Я изучал это довольно давно, и я пытаюсь сделать то же самое, так что, надеюсь, это поможет кому-то еще.Я использовал crossbrowsertesting.com и буквально проверял это почти во всех браузерах, известных человеку.У меня есть настоящее решение, которое работает в Opera, Chrome, Firefox 3.5+, IE8 +, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+, Windows Phone 8.
Динамически изменяемые источники
Динамическое изменение видео очень сложно, и в случае отказа Flash вам придется удалить видео со страницы DOM / и повторно добавить его, чтобы Flashбудет обновляться, потому что Flash не будет распознавать динамические обновления Flash.Если вы собираетесь использовать JavaScript для его динамического изменения, я бы полностью удалил все элементы <source> и просто использовал canPlayType для установки src в JavaScript и break или return после первого поддерживаемого типа видеои не забывайте динамически обновлять flash var mp4.Кроме того, некоторые браузеры не зарегистрируют, что вы изменили источник, если вы не позвоните video.load().Я полагаю, что проблема с .load(), с которой вы столкнулись, может быть исправлена путем первого вызова video.pause().Удаление и добавление видеоэлементов может замедлить работу браузера, поскольку он продолжает буферизовать удаленное видео, но есть обходной путь .
Поддержка кросс-браузерной поддержки
Что касается фактической кросс-браузерной части, я также получил Видео для всех .Я уже попробовал плагин MediaelementJS Wordpress, который, как оказалось, вызвал гораздо больше проблем, чем решил.Я подозреваю, что проблемы были из-за плагина Wordpress, а не из-за библиотеки.Я пытаюсь найти что-то, что работает без JavaScript, если это возможно.На данный момент я пришел к следующему простому HTML:
<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
<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={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" />
<img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" />
</object>
<strong>Download video:</strong> <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>
Важные примечания :
- Закончилось помещением ogg в качестве первого
<source>, поскольку Mac OS Firefox прекращает попытки воспроизведения видео, если в качестве первого MP4-файла <source>. - важны правильные типы MIME. .ogv файлов должно быть * 1039.*, не
video/ogv - Если у вас есть HD-видео, лучший транскодер, который я нашел для файлов OGG с качеством HD, - Firefogg
- Файл
.iphone.mp4 предназначен для iPhone 4+, который будет только воспроизводить видео в формате MPEG-4 с H.264 Baseline 3 Video и AAC audio.Лучший транскодер, который я нашел для этого формата, это Handbrake, использующий предустановку iPhone и iPod Touch , который будет работать на iPhone 4+, но для работы iPhone 3GS необходимо использовать iPod пресет с гораздо более низким разрешением, который я добавил как video.iphone3g.mp4. - . В будущем мы сможем использовать атрибут
media в элементах <source> для нацеливания на мобильные устройства медиазапросов, но вернотеперь старые устройства Apple и Android не поддерживают его достаточно хорошо.