Статьи
iT заметки
web мастерская
Как вставить видео на сайт
03.12.2015 в 16:45:08 |
|
Просмотров: 1588 |
0 ответов
1. Старый способ как вставить видео на сайт (годится для doctype отличного от html5).
Сохраняете с папке сайта три файла:
1.http://домен/файл.flv Ваше видео.
В формат flv (самый легкий для просмотра видео) можно перекодировать здесь или загрузить эти конвертеры к себе на компьютер:
mirovideoconverter
handbrake.fr
2.http://домен/uflvplayer_500x375.swf Это плеер для проигрывания видео на сайте. Скачать его можно тут или в любом другом месте (загуглите flv плеер)
3.http://домен/картинка.jpg Заставка для видео
В месте, куда нужно ставить видео пишете код:
Код
<object type="application/x-shockwave-flash" data="http://domen/videos/uflvplayer_500x375.swf" height="225" width="400"><param name="bgcolor" value="#FFFFFF" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="movie" value="http://domen/videos/uflvplayer_500x375.swf" /><param name="FlashVars" value="way=http://luckyframe74.com/videos/Bic_Glorius0-show01.flv&swf=http://domen/videos/uflvplayer_500x375.swf&w=400&h=225&pic=http://&autoplay=1&tools=2&skin=white&volume=70&q=&comment=" /></object>
Недостатки указанного способа — не работает в старых моделях iPhone / iPad (iPad2), которые не поддерживают Flash.
2. Новый способ как вставить видео на сайт — использовать тег video. Работает только для сайтов html5. Для кроссбраузерного отображения нужно перекодировать видео в 3 разных формата. Сделать это можно в указанном выше конвертере. И подключить три файла:
Код
<video width="400" height="300" controls="controls" poster="video/duel.jpg">
<source src="video/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/myvideo.webm" type='video/webm; codecs="vp8, vorbis"'>
Тег video не поддерживается вашим браузером.
<a href="video/myvideo.mp4">Скачайте видео</a>.
</video>
<source src="video/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/myvideo.webm" type='video/webm; codecs="vp8, vorbis"'>
Тег video не поддерживается вашим браузером.
<a href="video/myvideo.mp4">Скачайте видео</a>.
</video>
Недостатки. Новый тег html5 video пока не дает полной гарантии адекватного отображения видеоролика во всех браузерах ( не работает в старых браузерах и некоторых мобильных платформах, в частности Android версии 2.3 ) и ограничивает разработчика в кастомизации элеметов отображения видео (переключателей и др). В разных браузерах переключатели отображаются по разному, а в некоторых не отображаются вообще. Поэтому если хотите легкий и кроссбраузерный (кроссплатформенный) способ как вставить видео на сайт используйте html5 видеоплейеры.
На сайте praegnanz.de приводится список и характеристики наиболее популярных html5 плейеров. Там же есть ссылки на сайты разработчиков с подробным описанием того, как эти плейеры подключать и кастомизировать. Следует, прежде всего, обратить внимание на плеейры:
1. Videojs (плейер также существует в виде плагина для CMS WordPress, Joomla и Drupal).
2. flowplayer
3. mediaelementjs.com
4. Codoplayer. Адаптивный плеер, подстраивается под изменение размеров родительского контейнера.
3. Рекомендуемый способ как вставить видео на сайт. Можно угодить и старым и новым браузерам. Гарантирует, что видео смогут посмотреть все без исключения пользователи, с какого бы древнего девайса они на Ваш сайт не выходили.
Код
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> <param name="allowFullScreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value='config={"clip":{"url":"HTML5Sample_flv.flv","autoPlay":false,"autoBuffering":true}}' /> </object>
</video>
<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> <param name="allowFullScreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value='config={"clip":{"url":"HTML5Sample_flv.flv","autoPlay":false,"autoBuffering":true}}' /> </object>
</video>
Лениво писать код самостоятельно — к Вашим услугам генератор кода вставки видео, который использует Flow player.Для поддержки нового тега video в старых браузерах не забудьте подключить modernizr.
Если видео проигрывается на локальном хостинге, но живой сайт отказывается его производить, значит, проблема в том, что Ваш сервер отказывается распознавать MIME — тип.
Для Widows Server необходимо добавить MIME в IIS. Подробнее о том, как это сделать читайте здесь. Для Apache нужно добавить AddType в httpd.conf или в локальный файл .htaccess, который необходимо создать в той же папке, где хранятся видеофайлы.
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Если возникнут трудности как вставить видео на сайт, пишите в комментариях.
При подготовке статьи использовались следующие материалы:
How to Embed Video Using HTML5
Video for Everybody!
обсудить на форуме |
1588 визитов ↳ 0 ответов | Ваше мнение о материале | Голосовало: 6 |
