用JQuery .append()播放HTML5视频时出现重复播放（音频翻倍）的问题

Question

我曾经认为是隐藏在半复杂的Web应用程序中的一个bug，但我已将其简化为可能的最简代码，并且仍然可以在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报告这个问题。

- forresto

---

我之前也遇到了同样的问题。将 $().append() 改为 $().html() 就解决了。 - Sorter

Answer 1

也许jQuery在将$()的内容附加到您的播放器div之前缓存了它？所以可能有另一个video标签的实例。这可能是jQuery中的错误。您尝试过不使用jQuery/js吗？

- jhlllnd

---

这似乎是正在发生的事情，但奇怪的是所有浏览器都在后台播放那些缓存的<video>元素。谢谢。 - forresto

这对我在使用<audio>元素时没有起作用。最终一直播放一个我无法控制（播放/停止）的音频文件，即使跳到新文件。 - Temega

Answer 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 当存在时，用户代理（根据此处描述的算法）将自动开始播放媒体资源，只要它能够在不停止的情况下这样做。

- Mark Elphinstone-Hoadley

---

我刚刚使用了这种技术的变体。在我的情况下，所需的包含视频元素（一个将视频作为src的iframe）已经存在于页面中，然后我插入了“autoplay”属性（并将“autoplay = 1”添加到“src”属性中）。 - simmer

$('iframe#video).attr('src',videourl+'?autoplay=1&loop=1&rel=0&wmode=transparent').attr('autoplay','autoplay'); - simmer

Answer 3

我这里也有同样的问题。这似乎是在视频标记中使用"autoplay"属性引起的问题。

• 移除autoplay属性
• 将视频DOMNode附加到任何节点
• 如果您想要自动播放，请调用videodomnode.play() - 使用jquery，这将是$('video')[0].play()

- Sebastian Sauer

Answer 4

你可以获取 #player 的 HTML 并自行添加视频，然后使用 .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() 方法无效，你可能被迫使用类似这样的方法。

- Kristoffer la Cour

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

- İbrahim Ersoy

Answer 6

在我的情况下，这个是最好的选择：

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

- Daniel