Формат html5 видео: HTML5 Video — от А до Я / Хабр

HTML5 видео против HTML видео

В настоящее время у дизайнеров и разработчиков есть несколько вариантов интеграции видео в веб-страницу. Вы можете создать свой собственный видеоплеер, использовать бесплатные виджеты, встраивать видеокод YouTube или купить модный флеш-плеер.

Существует множество форм, форм и макетов для онлайн-видеоплееров – все они предназначены для улучшения вашего присутствия в сети. Но независимо от того, каким плеером вы пользуетесь, основная цель – предоставить быстрый доступ к вашему видеоконтенту всем вашим посетителям.

Это означает, что каждый пользователь должен иметь возможность воспроизводить видео без получения недружелюбного сообщения «Установите плагин Flash для просмотра этого видео». Подобные оповещения ухудшают пользовательский интерфейс и повышают показатель отказов веб-сайта.

Размышляя об этом, вы можете стремиться к видео технологии HTML5. Ведь HTML5 обещает воспроизводить видео прямо в браузере без каких-либо плагинов.

На первый взгляд, это выглядит как идеальное видео решение. Но прежде чем переключить видео с вашего веб-сайта на HTML5, давайте сравним плюсы и минусы классического HTML-видео и инновационной интеграции HTML5-видео.

Flash – это HTML видео промежуточное ПО. Теперь это самый традиционный способ встраивания видео на сайт. Тег <object>

Вот типичный HTML-код для встраивания видео:

  <идентификатор объекта = 0 тип = "application / x-shockwave-flash" data = player_flv_maxi.swf width = 512 height = 384>
 <param name = "movie" value = player_flv_maxi.swf />
 <param name = "wmode" value = "opaque" />
 <param name = "allowFullScreen" value = "true" />
 <param name = "allowScriptAccess" value = "sameDomain" />
 <param name = "quality" value = "high" />
 <param name = "menu" value = "true" />
 <param name = "autoplay" value = "false" />
 <param name = "autoload" value = "false" />
 <param name = "FlashVars" value = "flv = movie1.
  flv & width = 512 & height = 384 & autoplay = 0 & autoload = 0 &
   Буфер = 5 & buffermessage = & playercolor = 464646 & loadingcolor = 999898 & buttoncolor = FFFFFF &
   buttonovercolor = dddcdc & slidercolor = FFFFFF & sliderovercolor = dddcdc & showvolume = 1 & showfullscreen = 1 &
   playeralpha = 100 & title = movie1.flv & margin = 0 & buffershowbg = 0 "/>
 </ Объект> 

Как и все промежуточное ПО, плагины Adobe Flash отстают и требуют постоянных обновлений.

HTML5 не нуждается ни в каких плагинах или обновлениях. С новым <video>вставить видео на страницу, подобную этой:

  <video width = "320"
     высота = "240"
     постер = "intro.jpg"
     Автовоспроизведение
 
     управления
     цикл>
     Это содержимое появляется, если тег видео или кодек не поддерживаются.
     <source src = "intro.mp4" type = "video / mp4" />
     <source src = "intro.  webm" type = "video / webm" />
     <source src = "intro.ogv" type = "video / ogg" />
     </ Видео> 

Как видите, при использовании HTML5 видео следует предлагать в трех основных форматах: H.264 (.mp4), WebM и Theora OGG. Покрытие всех трех форматов дает вам наилучшие шансы на правильное воспроизведение на всех устройствах.

Однако HTML5 не гарантирует воспроизведение во всех браузерах. Internet Explorer 6, 7 и 8 не может воспроизводить видео HTML5. Это становится актуальным, когда вы знаете, что у вас есть посетители сайта, которые используют такие браузеры. Поэтому вам следует тщательно изучить статистику трафика вашего сайта, чтобы подсчитать процент пользователей версий Internet Explorer до миграции видео HTML5. Google Analytics – отличный инструмент для этого.

Может оказаться, что 60% вашей аудитории придерживаются старомодных браузеров, и поэтому HTML5 не может быть хорошим средством защиты видео для вашего сайта. В качестве альтернативы, если большинство ваших посетителей являются пользователями мобильного Интернета, стоит добавить видео HTML5 на ваш сайт.

В таблице ниже приведены наиболее частые преимущества и недостатки HTML / HTML5, которые необходимо учитывать:

Видео HTML против видео HTML5

наценка	Pros	Cons
HTML-видео	Хорошо известный, проверенный временем язык разметки	Flash-плагин является обязательным
	Поддерживается всеми настольными браузерами: Internet Explorer, Firefox, Chrome, Opera, Safari.	Постоянные обновления плагинов
	Множество вариантов видеохостинга: собственный сервер, YouTube, Vimeo и т. Д.	Медленные, высоконагруженные видео
	Множество методов встраивания видео: от расширенного кодирования до простого кода копирования и вставки YouTube	Нет воспроизведения видео на мобильных телефонах, таких как iPad и iPhone
HTML5	Не требуется никаких плагинов	Не поддерживается Internet Explorer 6, 7, 8
	Работает как на настольных, так и на мобильных устройствах	Требуется конвертация видео
	Гибкие настройки плеера: пользователи могут перемещать и вращать веб-плееры	Нет стабильной спецификации. Вы должны изучить новые принципы разметки

На первый взгляд видео HTML5 имеет больше недостатков, чем активы. Но если вы углубитесь в HTML5-видео дальше, вы увидите, что появляющаяся веб-технология не так неясна. У него уже есть солидный набор инструментов для разработчиков.

Это правда, что HTML5-видео не поддерживается Internet Explorer 6,7 или 8. Поэтому для этих пользователей предоставьте резервную ссылку на YouTube или загрузку, чтобы посетители сайта могли просматривать стандартное Flash-видео:

  <video width = "640" height = "360" control>
     <source src = "__ VIDEO __. MP4" type = "video / mp4" />
     <source src = "__ VIDEO __. OGV" type = "video / ogg" />
     <object width = "640" height = "360" type = "application / x-shockwave-flash" data = "__ FLASH __. SWF">
         <param name = "movie" value = "__ FLASH __. SWF" />
         <param name = "flashvars" value = "controlbar = over & amp; image = __ POSTER __.  JPG & amp; file = __ VIDEO __. MP4" />
         <img src = "__ ВИДЕО __. JPG" width = "640" height = "360" alt = "__ TITLE__" title = "Нет воспроизведения видео 
             Возможности, пожалуйста, загрузите видео ниже "/>
     </ Объект>
 </ Видео>
 <p> <strong> Загрузить видео: </ strong>
               Закрытый формат: <a href="__VIDEO__.MP4"> «MP4» </a>
               Открытый формат: <a href="__VIDEO__.OGV"> "Ogg" </a>
 </ Р> 

Преобразование HTML5 в три формата (H.264, OGG и WebM) не так страшно, как может показаться. Есть несколько бесплатных решений:

• HandBrake Video Converter для Mac . Бесплатно, это известное программное обеспечение для конвертирования видео может иметь дело с конвертированием видео в HTML5
• Freemake Video Converter 3.0 для Windows . Это 100% бесплатный инструмент для конвертирования видео. Выберите видео, нажмите кнопку «HTML5», и вы получите видео файлы во всех трех форматах и ​​код видеопроигрывателя для встраивания. Видео Конвертер от Freemake делает всю работу за вас (раскрытие: я работаю для Freemake).
• Замзар . Бесплатный онлайн видео конвертер. Замзарское кодирование немного медленное. Кроме того, вы получите файлы по электронной почте.

Таким образом, даже минусы не означают, что вы не можете использовать HTML5 сегодня .

Напротив, минусы HTML на самом деле сложнее избежать. Уязвимый плагин Adobe Flash, неподходящий для переносных гаджетов, является камнем преткновения для интеграции потокового видео. самое популярное мобильное оборудование не поддерживает Flash-видео. Недавно Adobe даже отменила дальнейшую разработку плагина Flash и обратилась к экосистеме HTML5 / CSS3 со своим инструментом дизайна Adobe Edge.

Очевидно, что HTML5 находится на пути к славе и богатству, но пока рано говорить о полной победе HTML5 над Flash-видео, так как Flash все еще доминирует в потоковых веб-сервисах. По крайней мере, мы должны быть хорошо оснащены для плавного перехода от одной разметки к другой без потерь трафика.

Какие методы вы используете для реализации видео на веб-странице?

Улучшение анимированной производительности GIF с HTML5 видео — WordPressify

Было доведено до нашего сведения, что эта часть является переформулированная версия статьи, опубликованной на сайте Google Web Основы, написанная нашим другом Джереми Вагнер. Оригинальный кусок можно найти здесь,и мы рекомендуем его вам.

Я хотел бы лично извиниться перед Джереми за то, что не назвал это копией его работы. Признавая и кредитование работы людей в нашем сообществе является то, что я – и вся команда – заботиться очень много о. Мне жаль, что на этот раз мы не сделали все правильно.

— Рэйчел Эндрю, от имени редакции

Анимированные GIF-файлы имеют много будет для них; они просты в том, чтобы сделать и работать достаточно хорошо буквально во всех браузерах. Но формат GIF изначально не предназначался для анимации. Первоначальный дизайн формата GIF заключался в том, чтобы обеспечить способ сжатия нескольких изображений внутри одного файла с помощью безпотеревого алгоритма сжатия (так называемый сжатие L’W), что означало, что они могут быть загружены в достаточно короткий промежуток времени, даже на медленном Соединения.

Позже были добавлены основные возможности анимации, которые позволили покрасить различные изображения (кадры) в файле с задержками во времени. По умолчанию серия кадров, составляющих анимацию, отображалась только один раз, останавливаясь после показа последнего кадра. Netscape Navigator 2.0 был первым браузером, который добавил возможность для анимированных GIF-файлов цикл, что приводит к росту анимированных GIF-файлов, как мы их знаем сегодня.

Как анимационная платформа, формат GIF невероятно ограничен. Каждый кадр в анимации ограничен палитрой всего 256 цветов, и на протяжении многих лет, достижения в технологии сжатия сделал приводит к нескольким улучшениям, как анимация и видео файлы сжимаются и используются. В отличие от надлежащих форматов видео, формат GIF не использует ни одну из новых технологий, что означает, что даже несколько секунд содержания может привести к чрезвычайно большим размерам файлов, так как хранится много повторяющейся информации.

Даже если вы попытаетесь настроить качество и длину GIF с помощью такого инструмента, как Gifsicle,может быть трудно сократить его до разумного размера файла. Это причина, почему GIF тяжелых веб-сайтов, как Giphy, Imgur и любит не использовать фактический формат GIF, а конвертировать его в HTML5 видео и служить тем, для пользователей, а не. Как выяснила команда Pinterest Engineering,преобразование анимированных GIF-файлов в видео может уменьшить время загрузки и улучшить плавность воспроизведения, что приведет к более приятному пользовательскому опыту.

Таким образом, мы будем смотреть на некоторые методы, которые позволяют нам использовать HTML5 видео в качестве капли в замене анимированных GIF-файлов. Мы узнаем, как преобразовать анимированные GIF-файлы в видеофайлы и изучить, как правильно вставлять эти видео файлы в Интернете, так что они действуют так же, как GIF будет. Наконец, мы рассмотрим несколько потенциальных недостатков, которые необходимо обдумать, прежде чем использовать это решение.

Преобразование анимированных GIF-файлов в видео

Первым шагом является преобразование файлов GIF в формат видео. MP4 является наиболее широко поддерживаемым форматом в браузерах с почти 94% всех браузеров пользуются поддержкой, так что это безопасный по умолчанию.

94% всех браузеров поддерживают формат MP4(Большой предварительный просмотр)

Другим вариантом является формат WebM, который предлагает высококачественные видео, часто сопоставимые с MP4, но обычно при уменьшенном размере файла. Тем не менее, в настоящее время поддержка браузера не так широко распространена, так что вы не можете просто пойти заменить MP4 файлов с их WebM эквиваленты.

Internet Explorer и Safari являются заметными браузерами без поддержки WebM(Большой предварительный просмотр)

Однако, поскольку <video> тег поддерживает несколько <source> файлов, мы можем подавать WebM видео в браузеры, которые поддерживают их, отскакивая к MP4 везде.

Давайте идти вперед и конвертировать анимированные GIF как MP4 и WebM. Есть несколько онлайн-инструментов, которые могут помочь вам сделать это, но многие из них используют ffmpeg под капотом, чтобы мы пропустим среднего человека и просто использовать это вместо. ffmpegэто бесплатный и с открытым исходным кодом командной строки инструмент, который предназначен для обработки видео-и аудио файлов. Он также может быть использован для преобразования анимированных GIF в видео форматы.

Чтобы узнать, есть ли у вас ffmpeg на машине, запустите терминал и запустите ffmpeg команду. Это должно отображать некоторую диагностическую информацию, в противном случае, вам нужно установить его. Инструкции по установке для Windows, macOS и Linux можно найти на этой странице. Так как мы будем преобразования в WebM, вы должны убедиться, что независимо от ffmpeg сборки вы установите компилируется с libvpx.

Чтобы следовать вместе с командами, которые включены в эту статью, вы можете использовать любой анимированный файл GIF, лежащий вокруг на вашем компьютере или захватить этот, который составляет чуть более 28MB. Начнем с преобразования GIF в MP4 в следующем разделе.

Преобразование GIF в MP4

Откройте экземпляр терминала и перейдите в каталог, где находится тестовый GIF, а затем запустите приведенную ниже команду, чтобы преобразовать его в видеофайл MP4:

ffmpeg -i animated. gif video.mp4

Это должно вывести новый файл видео в текущем каталоге через несколько секунд в зависимости от размера файла GIF, который вы преобразуете. -iФлаг определяет путь к файлу ввода GIF, и впоследствии указывается выводной файл (видео.mp4 в данном случае). Запуск этой команды на моем 28MB GIF производит MP4 файл, который только 536KB в размере, 98% сокращение размера файла с примерно таким же качеством изображения.

Но мы можем пойти еще дальше. ffmpegимеет так много вариантов, которые можно использовать для регулирования вывода видео еще больше. Один из способов заключается в использовании метода кодирования, известного как Constant Rate Factor (CRF), чтобы еще больше сократить размер выпуска MP4. Вот команда, которая вам нужно запустить:

ffmpeg -i animated.gif -b:v 0 -crf 25 video.mp4

Как вы можете видеть, есть несколько новых флагов в выше команды по сравнению с предыдущим. -b:vобычно используется для ограничения битрата вывода, но при использовании режима CRF он должен быть установлен до 0. -crfФлаг контролирует качество видеовыхода. Он принимает значение между 0 и 51; чем ниже значение, тем выше качество видео и размер файла.

Запуск выше команды на тестовый GIF, обрезает видео выход только 386KB без заметной разницы в качестве. Если вы хотите обрезать размер еще больше, вы можете увеличить значение CRF. Просто имейте в виду, что более высокие значения снизят качество видеофайла.

Преобразование GIF в WebM

Вы можете преобразовать файл GIF в WebM, запустив команду ниже в терминале:

ffmpeg -i animated.gif -c vp9 -b:v 0 -crf 41 video.webm

Эта команда почти такая же, как и предыдущая, за исключением нового -c флага, который используется для указания кодека, который должен использоваться для этого преобразования. Мы используем vp9 кодек, который преуспевает vp8 кодек.

Кроме того, я скорректировал значение CRF до 41 в данном случае, так как значения CRF не обязательно дают одинаковое качество в форматах видео. Это конкретное значение приводит к webM файл, который на 16KB меньше, чем MP4 с примерно таким же качеством изображения.

Теперь, когда мы знаем, как преобразовать анимированные GIF-файлы в видеофайлы, давайте посмотрим, как мы можем имитировать их поведение в браузере с <video> помощью тега HTML5.

Заменить анимированные GIF-изображения видео в браузере

Создание видео действовать, как GIF на веб-странице не так просто, как падение файла в <img> тег, но это не так сложно либо. Основные качества анимированных GIF-файлов, которые следует иметь в виду, таковы:

• Они играют автоматически
• Они цикл непрерывно
• Они молчат

В то время как вы получаете эти качества по умолчанию с файлами GIF, мы можем заставить видеофайл действовать точно так же, используя несколько атрибутов. Вот как вы будете вставлять видео файл вести себя как GIF:

<video autoplay loop muted playsinline src="video.mp4"></video>

Эта разметка поручает браузеру автоматически запускать видео, цикл его непрерывно, играть не звук, и играть в режиме line без отображения каких-либо видео-элементов управления.

Это дает тот же опыт, как анимированный GIF, но с лучшей производительностью.

Чтобы указать больше, что один раз источник для видео, вы можете использовать <source> элемент в <video> тег, как это:

<video autoplay loop muted playsinline>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

Это говорит браузеру на выбор из предоставленных видеофайлов в зависимости от поддержки формата. В этом случае видео WebM будет загружено и воспроизведено, если оно поддерживается, в противном случае вместо него будет использован файл MP4.

Чтобы сделать это более надежным для старых браузеров, которые не поддерживают HTML5 видео, вы можете добавить некоторые HTML-контента ссылок на исходный файл GIF в качестве запасного.

<video autoplay loop muted playsinline>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support HTML5 video.        
    <a href="/animated.gif">Click here to view original GIF</a>
</video>

Или вы можете просто добавить файл GIF непосредственно в <img> тег:

<video autoplay loop muted playsinline>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
    <img src="animated.gif">
</video>

Теперь, когда мы рассмотрели, как подражать анимированным GIF-изображениям в браузере с помощью HTML5-видео, рассмотрим несколько потенциальных недостатков в следующем разделе.

Потенциальные недостатки

Есть несколько недостатков, которые необходимо рассмотреть, прежде чем принимать HTML5 видео в качестве замены GIF. Это явно не так удобно, как просто загрузка GIF на страницу и смотреть его просто работать везде. Сначала необходимо кодировать его, и может быть трудно реализовать автоматизированное решение, которое хорошо работает во всех сценариях.

Безопаснее всего было бы преобразовать каждый GIF вручную и проверить результат вывода, чтобы обеспечить хороший баланс между качеством изображения и размерфайла. Но в крупных проектах это может быть непрактично. В этом случае, возможно, было бы лучше обратиться к службе, как Cloudinary сделать тяжелую работу за вас.

Другая проблема заключается в том, что в отличие от изображений, браузеры не предзагружают видеоконтент. Поскольку видеофайлы могут быть любой длины, они часто пропускаютдо до тех пор, пока основная нить не будет готова разосмотреть их содержимое. Это может задержать загрузку видеофайла на несколько сотен миллисекунд.

Кроме того, Есть довольно много ограничений на автоматическое воспроизведение видео, особенно на мобильном телефоне. mutedАтрибут на самом деле требуется для видео для автоматического воспроизведения в Chrome для Android и iOS Safari, даже если видео не содержит звуковой дорожки, и где автоплей запрещен, пользователь будет видеть только пустое пространство, где видео должно иметь Был. Примером является режим Data Saver в Chrome для Android, где автоматическое воспроизведение видео не будет работать, даже если вы все правильно настроить.

Чтобы учесть любой из этих сценариев, следует рассмотреть возможность установки изображения заполнителя для видео с помощью poster атрибута, чтобы область видео по-прежнему засыпана содержательным контентом, если видео по какой-то причине не автоматически воспроизводиться. Также рассмотрите возможность использования атрибута управления, который позволяет пользователю инициировать воспроизведение, даже если видео автоматическое воспроизведение запрещено.

Оберните вверх

Заменив анимированные GIF-видео на HTML5,» мы можем обеспечить потрясающий GIF-подобный опыт без недостатков производительности и качества, связанных с файлами GIF. Покончить с анимированными GIF-файлы стоит серьезного рассмотрения, особенно если ваш сайт GIF-тяжелый.

Есть веб-сайты уже делают это:

• Twitter преобразует анимированные GIF-файлы в файлы MP4 при загрузке
• Производительность GIF была улучшена на Pinterest путем преобразования их в видео
• Imgur, GIF тяжелый веб-сайт, преобразует все GIF загружается в HTML5 видео

Время, необходимое для преобразования файлов GIF на вашем сайте в видео, может привести к значительному улучшению времени загрузки страницы. При условии, что ваш сайт не слишком сложна, это довольно легко реализовать, и вы можете быть запущен в течение очень короткого периода времени.

HTML5-видео: 10 вещей, которые нужно знать дизайнерам

Революция HTML5 захватывает веб-дизайнеров со всего мира. Новые спецификации поддерживают десятки элементов и атрибутов для создания семантических веб-сайтов. Эти новые функции включают мультимедийные теги для аудио- и видеоформатов.

В прошлые годы медиаплеера на основе Flash было более чем достаточно для потоковой передачи в Интернете, и эта технология по-прежнему необходима для поддержки устаревших браузеров. Но, к счастью, современные стандарты продвинулись вперед, и включение видео HTML5 открывает двери для десятков новых возможностей.

В этом руководстве я хотел бы предложить введение в видео HTML5 для Интернета. Потребуется некоторая практика, чтобы понять встроенный в браузер плеер и все его функции. А лучший способ познакомиться — погрузиться с головой!

Рекомендуемая литература: Презентация веб-сайта HTML5: 48 демонстраций, способных убить Flash

1.

Типы мультимедиа

Когда вы работаете с флэш-видеоплеером, слишком часто приходится связывать все форматы видео в .flv. Хотя это работает, большинство файлов FLV не могут сохранять качество даже близкое к более продвинутым форматам файлов/кодекам. HTML5 поддерживает 3 основных типа видео: MP4, WebM и Ogg/Ogv. Тип файла MPEG-4 обычно кодируется в формате H.264, что позволяет воспроизводить его в сторонних Flash-проигрывателях. Это означает, что вам не нужно хранить копию видео в формате .flv для поддержки резервного метода! WebM и Ogg — два гораздо более новых типа файлов, связанных с видео HTML5. Ogg использует кодировку Theora, основанную на стандартном формате аудиофайлов с открытым исходным кодом. Их можно сохранить с расширением .ogg или .ogv.

WebM — это проект, созданный Google, о котором вы можете узнать больше на веб-сайте проекта WebM. Этот формат уже поддерживается Opera, Google Chrome, Firefox 4+ и, совсем недавно, Internet Explorer 9. Большинству веб-профессионалов он до сих пор неизвестен, но WebM является ведущим форматом видео в будущем веб-видео.

2. Поддержка браузера

Итак, какие из этих типов файлов вам нужны для вашего веб-сайта? В идеале все 3 были бы великолепны, поскольку они обеспечивают полный спектр поддержки. Но это нереально, и на самом деле вы можете покрыть все базы только двумя из них. Вот разбивка того, что работает для каждого браузера:

• Mozilla Firefox – WebM, Ogg
• Google Chrome – WebM, Ogg
• Opera – WebM, Ogg
• Сафари – MP4
• Internet Explorer 9 — MP4
• Internet Explorer 6-8 — без HTML5, только Flash!

Если вы помните, ранее я упоминал, что большинство флеш-видеоплееров будут поддерживать файлы MP4, если они закодированы в H.264. Таким образом, каждый из этих браузеров будет встраивать MP4+Flash в крайнем случае. Это означает, что вам нужно создать только два различных видеоформатов для поддержки всех браузеров. MP4 для Safari/IE9 и выбор между WebM или Ogg для остальных.

На мой взгляд, я настоятельно рекомендую придерживаться формата WebM. За проектом стоит несколько громких имен (а именно Google), и он получил большую поддержку в сообществе HTML5. Ogg/Ogv будет поддерживаться, но, скорее всего, потеряет популярность из-за меньшего размера файлов WebM. Вы можете прочитать статью о будущем видео в Интернете, написанную Шоном Голлихером.

3. Встраивание простых HTML5-видео

Теперь давайте рассмотрим синтаксис, необходимый для встраивания примера кода. Все, что нам нужно, это тег видео HTML5 для ссылки на URL каждого фильма.

<видео управляет автоматическим воспроизведением poster="/img/scene-preview.jpg">


К сожалению, ваш браузер не поддерживает видео HTML5.

 

Обратите внимание на управляет , а атрибуты автозапуска не требуют установки каких-либо значений. Я также включил атрибут poster , который предварительно загружает изображение в видеоплеер перед потоковой передачей. Это обычный предварительный просмотр со многими веб-плеерами.

Мы предлагаем внутренние форматы видеоэлемента MP4 и WebM. Если ни один из них не может быть загружен, мы отображаем ошибку, чтобы пользователь обновил свой браузер.

4. Предложение Flash Fallback

Приведенный выше пример идеально подходит для всех веб-браузеров, соответствующих стандартам. Тем не менее, мы также должны учитывать, что мир не всегда находится на переднем крае технологий. Нам нужно поддерживать пользователей старых версий Safari, Mozilla Firefox и особенно Internet Explorer.

Лучший способ добиться этого — использовать резервный проигрыватель Flash. Их можно добавить с помощью тегов embed или object для ссылки на сторонний файл .swf. JW Player и Flowplayer — два бесплатных решения с открытым исходным кодом, которые вы можете рассмотреть. Но также проверьте видеоплееры премиум-класса на ActiveDen, которые могут стоить от 15 до 20 долларов.

Теперь давайте изменим приведенный выше код, включив в него резервный проигрыватель Flash для поддержки почти всех существующих браузеров.

<видео управляет автоматическим воспроизведением poster="/img/scene-preview.jpg">