В этом уроке мы собираемся изучить два варианта встраивания видео HTML5: использование YouTube и другого проигрывателя HTML5. В HTML4 воспроизведение мультимедиа зависело от плагина Adobe Flash. Теперь благодаря HTML5 вы можете избавиться от Flash и плавно воспроизводить видео с помощью современных браузеров.
Первый шаг — решить, какой тип видеохостинга вы предпочитаете: YouTube или свой. Если вы не хотите исчерпывать пропускную способность вашего хостинга, вам лучше загрузить видеофайлы на YouTube. И использовать плеер, предоставляемый сервисом потоковой передачи Google. Если вы хотите сохранить исходный контент на своем собственном сервере, вы можете попробовать другие проигрыватели HTML5.
Новый YouTube5-дружественный код для вставки
В январе 2015 года YouTube объявил о переходе стандартного веб-плеера на HTML5.
Если вы щелкнете любой параметр «Поделиться»> «Вставить» под каждым видео, вы увидите код для вставки iFrame, например:
<iframe width="1280" height="720"
src="https://www.youtube.com/embed/e-Xb3uNK5vQ?rel=0" frameborder="0" allowfullscreen>
</iframe>Здесь вы можете настроить следующие свойства:
-
Размер видео плеера
Для этого замените ширину и высоту по умолчанию на желаемую. Например, если вам нужен маленький плеер, ваш код будет выглядеть так:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/e-Xb3uNK5vQ?rel=0" frameborder="0" allowfullscreen>
</iframe>-
Отключить управление плеером
Добавьте & controls = 0 перед элементом frameborder. Вот пример:
<iframe width="1280" height="720"
src="https://www.youtube.com/embed/e-Xb3uNK5vQ?rel=0&controls=0" frameborder="0" allowfullscreen>
</iframe>-
Время начала воспроизведения видео
Для этого добавьте # t = после URL. Как это:
<iframe width="1280" height="720"
src="https://www.youtube.com/embed/e-Xb3uNK5vQ#t=1m01s?rel=0" frameborder="0" allowfullscreen>
</iframe>Поддержка браузера :
-
Гугл Хром
-
Mozilla Firefox
-
Safari 8
-
Internet Explorer 11
-
Microsoft Edge
Резюме
Хостинговая инфраструктура YouTube — это большое преимущество для тех, кто ограничен в пропускной способности сервера. Кроме того, вам не нужно конвертировать видео самостоятельно. YouTube позаботится об этом. Тем не менее, ваш контент будет доступен для всех.
Альтернатива YouTube — проигрыватель HTML5 от Freemake
Иногда вы не можете сделать видео общедоступными. Тогда вам нужен альтернативный не YouTube-плеер HTML5. Взгляните на HTML5-плеер, созданный с помощью Freemake Video Converter . Бесплатное программное обеспечение конвертирует видеофайлы в HTML5 и автоматически генерирует код для вставки плеера. Вот как это выглядит:
<div style="position: relative; width: 420px;">
<video id=0 controls width=420 height=240>
<source src="Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="Wildlife.webm" type='video/webm' >
<source src="Wildlife.mp4" type='video/mp4'>
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
</div>Настройка игрока
С плеером Freemake вы можете быстро настроить размер видео перед конвертацией. Допустим, вы хотите встроить HD-фильм на свой сайт. Просто выберите необходимые выходные параметры HTML5, такие как: такие же, как источник, 1080p или 720p или любое другое измерение вашего видеоплеера.
Программа конвертирует видео в 3 ключевых HTML5-совместимых форматах: OGV, MP4 (H.264), WebM (VP8). В идеале вы должны загрузить все версии файлов на свой сервер. Если вы загружаете только одну или две версии видео, это может вызвать проблемы с воспроизведением во всех браузерах.
Поддержка браузера :
-
Chrome 6.0 и выше
-
Mozilla Firefox 4.0 и выше
-
Safari 3.1 и выше
-
Internet Explorer 9 и выше
-
Microsoft Edge
Резюме
Freemake HTML5 player гарантирует правильный формат видеофайлов и воспроизведение в старых браузерах. Но он не позволяет настраивать элементы управления видео или цвета проигрывателя.
Так какой HTML5 плеер вы бы выбрали?