Видео html5 воспроизводится дважды (звук удваивается) с помощью JQuery.append()

Огромная WTF, которую я считал ошибкой, скрытой в полукомплексном веб-приложении, который я делаю, но я поменял ее на самый простой код, и он по-прежнему воспроизводится в Firefox, Chrome и Safari, непредсказуемо, но более чем в 1/2 раза.

http://jsfiddle.net/cDpV9/7/

var v = $("<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-piano-360.webm' autobuffer='auto' preload autoplay controls></video>");
$("#player").append(v);
  • Добавить элемент видео.
  • Видео начнет загружаться и воспроизводиться.
  • Звук видео звучит так, будто он удваивается.
  • Приостановить видимое видео и продолжить воспроизведение одной звуковой дорожки.
  • Удалить элемент видео; звук призрака продолжает играть.
  • Удалите фрейм, и звук призрака прекратится (хотя однажды в Firefox он продолжал играть после закрытия окна и не останавливался до выхода из Firefox).

Вот скриншот, чтобы показать, что я не совсем сумасшедший: http://www.youtube.com/watch?v=hLYrakKagRY

Кажется, это не происходит при создании элемента .html() вместо .append(), так что моя единственная подсказка: http://jsfiddle.net/cDpV9/6/

$("#player").html("<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-piano-360.webm' autobuffer='auto' preload autoplay controls></video>");

Я на OS X 10.6.7.

Я думаю, что у меня это есть. Даже просто создание объекта JQuery без добавления его на страницу заставляет игрока-призрака играть: http://jsfiddle.net/cDpV9/8/

var v = $("<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-banjo-360.webm' autobuffer='auto' preload autoplay controls></video>");

Пока я могу обойти это, используя .html(). Я сообщу вопрос в JQuery.

ОТВЕТЫ

Ответ 1

Может быть, jQuery кэширует содержимое $() перед тем, как добавить его в div вашего игрока? Таким образом, есть еще один экземпляр видеотега. Это может быть ошибка в jQuery. Вы пробовали это без JQuery/js?

Ответ 2

Я бы попробовал добавить атрибут autoplay после, который вы добавляете в видеоплеер. Затем это необходимо для создания функции воспроизведения.

Это будет примерно так:

var v = $("<video id='v' src='videofile.webm' autobuffer='auto' preload controls></video>");
$("#player").append(v);
v.attr('autoplay','autoplay');

Когда вы создаете элементы в JavaScript, то есть элементы изображения, объекты и т.д., они мгновенно загружаются и сохраняются в памяти как объекты. Вот почему вы можете предварительно загружать изображения перед загрузкой страницы. Это не ошибка jQuery.

Ссылка: http://www.w3.org/TR/html5/video.html#attr-media-autoplay

Когда присутствует, пользовательский агент (как описано в описанном алгоритме здесь) автоматически начнет воспроизведение медиа-ресурса как как только он сможет это сделать, не останавливаясь.

Ответ 3

У меня такая же проблема. Кажется, что проблема связана с использованием атрибута autoplay на вашей разметке видео.

  • Удалить атрибут автовоспроизведения
  • добавьте ваше видео DOMNode в любой node
  • Если вы хотите работать с автовоспроизведением, вызовите videodomnode.play() - с помощью jquery это будет $('video')[0].play()

Ответ 4

Вы можете получить html #player и добавить видео самостоятельно, а затем добавить общее количество с помощью .html() следующим образом:

var v = $("#player").html() + "<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-piano-360.webm' autobuffer='auto' preload autoplay controls></video>";
$("#player").html(v);

Это не так хорошо, как функция .append(), но если .append() не работает, вы можете сделать что-то вроде этого.

Ответ 5

В моем случае это лучше всего работало:

var v = '<audio hidden name="media"><source src="text.mp3"><\/audio>';
$('#player').append(v);
$("audio")[$('audio').size()-1].play();

Ответ 6

Я решил мой, загрузив видео после загрузки dom:

$(window).bind("load", function() {
  var v = $("<video id='bgvid' loop muted>
              <source src='/blabla.mp4'  type='video/mp4'>
              </source> 
             </video>");
$(".video-container").append(v);
v.attr('autoplay','autoplay');  
});