HTML5, Firefox воспроизводит дубликаты видео после вставки jQuery

Question

Из проекта, над которым мы работаем, я извлек следующее:

http://www.bridgedev1.com/videotest.html

Воспроизводит видео OGV или M4V в зависимости от браузера, как и следовало ожидать.

Страница загружается, затем видео обслуживается с помощью jQuery. Это отлично работает в Safari и Chrome.

Проблема в том, что в Firefox (3.6.3). При приостановке видео вторая копия видео все еще воспроизводится.

Удаление элемента видео в Firebug удалило первое видимое видео, но оставило саундтрек второго воспроизводимого видео. Вкладка «Сетевой трафик» также показала, что видео 7,2 МБ загружалось дважды.

Эта проблема возникает как на Windows, так и на Mac, и хуже на ПК.

Может кто-нибудь предложить решение?

Спасибо

Jim

Answer 1

Я знаю, что этому вопросу несколько месяцев, но у меня возникла та же проблема, и я нашел решение.

В html моей страницы у меня есть следующий div:

<div id="Video"></div>

Этот div служит заполнителем для флеш-плеера, который используется для FLV-видео и для IE и Firefox. Если видео является MP4 и браузер поддерживает видео .H264, javascript используется для замены div тегом HTML5 video.

Сначала я включил атрибут src в тег video. Это вызвало проблему, с которой вы столкнулись: видео иногда проигрывалось дважды, звук удваивался. Вставка сначала, а затем установка src позже, кажется, решает проблему.

    if (canPlayH264() && isMP4) { //HTML5       

$("#Video").replaceWith('<video id="HTML5Video" controls />');  
$("#HTML5Video")[0].src = "thefile.mp4";
$("#HTML5Video")[0].play();

Answer 2

У нас были очень смешанные результаты кросс-браузер с использованием jQuery для вставки тега видео. (IE особенно плохо.)

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

Best

Zach

Разработчик, LongTail Video