~~~ KOCI.INUMO.RU ~~~
HTML5 - Теги <audio> и <video>. Урок 34. Разработчики нового стандарта HTML5 замахнулись на решение важной и интересной проблемы: сделать так, чтобы браузеры воспроизводили аудио (звуки) и видео (кино) без всяких внешних программ, плагинов и скриптом, исключительно на чистом коде HTML. Если бы эта проблема была решена на 100%, то облегчение вебмастерам было бы серьезное. Снял клип на телефоне, и с помощью простого тега HTML5 можно выставлять на своем сайте.
© Перепечатка разрешается с установкой ссылки на ресурс http://koci.inumo.ru
34. HTML5 - Теги <audio> и <video>.
Разработчики нового стандарта HTML5 замахнулись на решение важной и интересной проблемы: сделать так, чтобы браузеры воспроизводили аудио (звуки) и видео (кино) без всяких внешних программ, плагинов и скриптом, исключительно на чистом коде HTML.
Если бы эта проблема была решена на 100%, то облегчение вебмастерам было бы серьезное. Снял клип на телефоне, и с помощью простого тега HTML5 можно выставлять на своем сайте. И не нужно никаких ютьюбов и прочих сервисов (это хорошие сервисы, но ведь они рекламу показывают, а могут вообще удалить ваш клип, если вдруг что-то кому-то не понравится).
Но пока, на сегодня, проблема решена не на 100%, а только частично.
Для упрощения анализа разберем только форматы .mp3 (для аудио) и .mp4 (для видео). Замечу только, что с остальными форматами ситуация еще хуже.
Кодирование для данных тегов примерно такое:
Протестировал эти новые мультимедиа теги на разных браузерах и результаты получил такие:
Определить, как сегодня разные браузеры воспроизводят аудио и видео с помощью тегов HTML5, вы можете погоняв данные тестовые странички:
audio.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
video.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_034.zip ← скачайте пример, чтобы установить на свой сайт...
Если бы эта проблема была решена на 100%, то облегчение вебмастерам было бы серьезное. Снял клип на телефоне, и с помощью простого тега HTML5 можно выставлять на своем сайте. И не нужно никаких ютьюбов и прочих сервисов (это хорошие сервисы, но ведь они рекламу показывают, а могут вообще удалить ваш клип, если вдруг что-то кому-то не понравится).
Но пока, на сегодня, проблема решена не на 100%, а только частично.
Для упрощения анализа разберем только форматы .mp3 (для аудио) и .mp4 (для видео). Замечу только, что с остальными форматами ситуация еще хуже.
Кодирование для данных тегов примерно такое:
<audio controls> <source src="http://kocby.ru/kino/styl/tm/old-ship.mp3" type="audio/mpeg"> </audio> <video width="320" height="240" controls> <source src="http://kocby.ru/post/webmaster/html/movie/walk-like-an-egyptian.mp4" type="video/mp4"> </video>
- Google Chrome. Версия 28.0.1500.95 m - самый лучший браузер с точки зрения воспроизведения новых тегов <audio> и <video>. Без проблем проигрывается и файл *.mp3 (аудио), и файл *.mp4 (видео).
- FireFox. Версия 22.0. - работает кое-как (без возможности регулирование громкости в самом окне браузера) только с файлом *.mp3 (аудио). Файл *.mp4 (видео) не воспроизводится.
- Internet Explorer. Версия 10.0.9200.16635. - наихудшие результаты из данной большой тройки. Вообще ничего не воспроизводит.
Определить, как сегодня разные браузеры воспроизводят аудио и видео с помощью тегов HTML5, вы можете погоняв данные тестовые странички:
audio.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
video.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_034.zip ← скачайте пример, чтобы установить на свой сайт...
*** Машина-Функционал для передвижения по страничкам курса HTML ***
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Тропинка к данной страничке:
ГлавСтр :: Урок_00 :: Урок_01 :: Урок_01.4 :: Лаба_1 :: Урок_01.5 :: Урок_01.6 :: Урок_02 :: Урок_03 :: Урок_04 :: Урок_05 :: Урок_06 :: Урок_07 :: Урок_08 :: Урок_09 :: Урок_10 :: Урок_11 :: Урок_12 :: Урок_13 :: Урок_14 :: Урок_15 :: Урок_16 :: Урок_17 :: Урок_18 :: Урок_19 :: Урок_20 :: Урок_21 :: Урок_22 :: Урок_23 :: Урок_24 :: Урок_25 :: Урок_26 :: Урок_27 :: Урок_28 :: Урок_29 :: Урок_30 :: Урок_31 :: Урок_32 :: Лаба_2 :: Урок_33 :: Урок_34
Следующие странички, рекомендуемые для посещения и изучения:
Урок 35
Страничка сделана на основе контента курса HTML сайта kocby.ru