使用JQuery .append（）播放两次（音频加倍）html5视频 [英] html5 video playing twice (audio doubled) with 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）; 
  

1. 添加视频元素。
   
2. 视频开始加载和播放。


3. 视频音频听起来像加倍了。


4. 暂停可见视频，并继续播放一段音频。


5. 删除视频元素; ghost音频继续播放。


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报告问题。

解决方案

也许jQuery将 $（）的内容缓存到您的播放器div中？所以还有另一个视频标签的例子。这可能是jQuery中的错误。你有没有试过这个没有jquery / js？

Huge WTF that I thought was a bug hidden in the semicomplex web app that I'm making, but I have pared it down to the simplest code possible, and it is still replicable in Firefox, Chrome, and Safari, unpredictably but more than 1/2 of the time.

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. Add a video element.
2. Video starts to load and play.
3. Video audio sounds like it is doubled.
4. Pause the visible video, and one audio track continues.
5. Delete the video element; the ghost audio keeps playing.
6. Delete the frame, and the ghost audio stops (though once in Firefox it continued to play after closing the window, and didn't stop until quitting Firefox).

Here is a screen capture to maybe show that I'm not completely crazy: http://www.youtube.com/watch?v=hLYrakKagRY

It doesn't seem to happen when making the element with .html() instead of .append(), so that's my only clue: 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>");

I'm on OS X 10.6.7.

---

I think that I have it. Even just creating the JQuery object without adding it to the page causes the ghost player to play: 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>");

For now I can work around this by using .html(). I'll report the issue to JQuery.

解决方案

Maybe jQuery caches the content of $() before appending it to your player div? So there is another instance of the video tag. It could be an error in jQuery. Have you tried this without Jquery/js?

这篇关于使用JQuery .append（）播放两次（音频加倍）html5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！