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

Question

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

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);

1. Добавить элемент видео.
2. Видео начинает загружаться и воспроизводиться.
3. Видео аудио звучит так, как будто оно удвоено.
4. Приостановить видимое видео, и одна звуковая дорожка продолжается.
5. Удалить элемент видео; Призрачное аудио продолжает играть.
6. Удалите кадр, и призрачный звук остановится (хотя однажды в 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.

Answer 1

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

Answer 2

Я бы попробовал добавить атрибут автозапуска после добавления видео проигрывателя. Это должно затем создать экземпляр функции воспроизведения.

Это было бы что-то вроде этого:

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

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

Answer 3

У меня здесь та же проблема.Похоже, это проблема с использованием атрибута «autoplay» в разметке вашего видео.

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

Answer 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() не работает, вы можете быть вынуждены сделать что-то подобное.

Answer 5

Я решил мой, загрузив видео после загрузки 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');  
});

Answer 6

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

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