изменение источника на видео тег HTML5

Question

Я пытаюсь создать видеоплеер, который работает везде.пока я буду идти с:

<video>
    <source src="video.mp4"></source>
    <source src="video.ogv"></source>
    <object data="flowplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="flowplayer.swf" />
        <param name="flashvars" value='config={"clip":"video.mp4"}' />
    </object>
</video>

(как видно на нескольких сайтах, например видео для всех ), пока все хорошо.

нотеперь я также хочу какой-нибудь плейлист / меню вместе с видеоплеером, из которого я могу выбирать другие видео.они должны быть сразу открыты в моем плеере.так что мне придется «динамически менять источник видео» (как видно на dev.opera.com / article / все, что вам нужно знать html5-video-audio / - раздел«Давайте посмотрим на другой фильм») с javascript.давайте пока что забудем о flashplayer (и, следовательно, IE), я попытаюсь разобраться с этим позже.

, поэтому мой JS для изменения тегов <source> должен выглядеть примерно так:

<script>
function loadAnotherVideo() {
    var video = document.getElementsByTagName('video')[0];
    var sources = video.getElementsByTagName('source');
    sources[0].src = 'video2.mp4';
    sources[1].src = 'video2.ogv';
    video.load();
}
</script>

Проблема в том, что это работает не во всех браузерах.а именно, firefox = O, есть хорошая страница, где вы можете наблюдать за проблемой, с которой я сталкиваюсь: http://www.w3.org/2010/05/video/mediaevents.html

, как только я запускаю метод load () (заметьте, в firefox),видео проигрыватель умирает.

Теперь я обнаружил, что когда я не использую несколько тегов <source>, а вместо одного атрибута src внутри тега <video>, все это работает в Firefox.

поэтому я планирую просто использовать этот атрибут src и определить соответствующий файл с помощью функции canPlayType () .

я что-то делаю неправильно или усложняю вещи ??

Answer 1

Я изучал это довольно давно, и я пытаюсь сделать то же самое, так что, надеюсь, это поможет кому-то еще. Я использовал 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 vars. , Если вы собираетесь использовать 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 прекращает попытки воспроизведения видео, если в качестве первого <source> встречается MP4.
• Важны правильные типы MIME .ogv Файлы должны быть video/ogg, , а не 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 не поддерживают его достаточно хорошо.

Редактировать

• Я все еще использую Video For Everybody, но теперь я перешел на использование FlowPlayer, чтобы управлять резервной версией Flash, которая имеет потрясающий JavaScript API , который можно использовать для управления им.

Answer 2

Использование тегов <source /> оказалось трудным для меня, в частности, в Chrome 14.0.835.202, хотя в FireFox он работал нормально. (Это может быть моим недостатком знаний, но я подумал, что альтернативное решение может быть полезным в любом случае.) Итак, я закончил тем, что просто использовал тег <video /> и установил атрибут src прямо на самом теге video. Функция canPlayVideo('<mime type>') использовалась для определения, может ли конкретный браузер воспроизводить входящее видео. Следующие работы в FireFox и Chrome.

Кстати, и FireFox, и Chrome воспроизводят формат «ogg», хотя Chrome рекомендует «webm». Сначала я поставил проверку поддержки браузером ogg только потому, что в других публикациях упоминалось, что FireFox сначала предпочитает источник ogg (т.е. <source src="..." type="video/ogg"/>). Но я не проверял (и сильно сомневаюсь), имеет ли значение порядок в коде при установке «src» для тега video.

HTML

<body onload="setupVideo();">
    <video id="media" controls="true" preload="auto" src="">
    </video>
</body>

JavaScript

function setupVideo() {
       // You will probably get your video name differently
       var videoName = "http://video-js.zencoder.com/oceans-clip.mp4";

       // Get all of the uri's we support
       var indexOfExtension = videoName.lastIndexOf(".");
       //window.alert("found index of extension " + indexOfExtension);
       var extension = videoName.substr(indexOfExtension, videoName.length - indexOfExtension);
       //window.alert("extension is " + extension);
       var ogguri = encodeURI(videoName.replace(extension, ".ogv"));
       var webmuri = encodeURI(videoName.replace(extension, ".webm"));
       var mp4uri = encodeURI(videoName.replace(extension, ".mp4"));
       //window.alert(" URI is " + webmuri);


       // Get the video element
       var v = document.getElementById("media");
       window.alert(" media is " + v);

       // Test for support
       if (v.canPlayType("video/ogg")) {
            v.setAttribute("src", ogguri);
           //window.alert("can play ogg");
       }
       else if (v.canPlayType("video/webm")) {
           v.setAttribute("src", webmuri);
           //window.alert("can play webm");
       }
       else if (v.canPlayType("video/mp4")) {
           v.setAttribute("src", mp4uri);
           //window.alert("can play mp4");
       }
       else {
           window.alert("Can't play anything");
       }

      v.load();
      v.play();
  }

Answer 3

У меня есть похожее веб-приложение, и я вообще не сталкиваюсь с подобной проблемой.Я делаю что-то вроде этого:

var sources = new Array();

sources[0] = /path/to/file.mp4
sources[1] = /path/to/another/file.ogg
etc..

, затем, когда я хочу изменить источники, у меня есть функция, которая делает что-то вроде этого:

this.loadTrack = function(track){
var mediaSource = document.getElementsByTagName('source')[0];
mediaSource.src = sources[track];

    var player = document.getElementsByTagName('video')[0];
    player.load();

}

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

Answer 4

Попробуйте переместить источник OGG наверх.Я заметил, что Firefox иногда сбивается с толку и останавливает игрока, когда тот, кого он хочет сыграть, OGG, не первый.

Answer 5

Использование JavaScript и jQuery:

<script src="js/jquery.js"></script>
...
<video id="vid" width="1280" height="720" src="v/myvideo01.mp4" controls autoplay></video>
...
function chVid(vid) {
    $("#vid").attr("src",vid);
}
...
<div onclick="chVid('v/myvideo02.mp4')">See my video #2!</div>