javascript 使用 JQuery .append() 播放两次 html5 视频（音频加倍）

html5 video playing twice (audio doubled) with JQuery .append()

提问by forresto

Huge WTF that I thought was a bug hidden in the semicomplex web appthat 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.

我认为巨大的 WTF 是隐藏在我正在制作的半复杂网络应用程序中的一个错误，但我已将其精简为最简单的代码，并且它仍然可以在 Firefox、Chrome 和 Safari 中复制，不可预测但超过 1 /2 的时间。

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

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

1. 添加视频元素。
2. 视频开始加载和播放。
3. 视频音频听起来像是翻了一番。
4. 暂停可见视频，一个音轨继续。
5. 删除视频元素；鬼音频继续播放。
6. 删除框架，幽灵音频停止（尽管在 Firefox 中它关闭窗口后继续播放，直到退出 Firefox 才停止）。

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

这是一个屏幕截图，可能表明我并不完全疯了：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/

使用.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>");

I'm on OS X 10.6.7.

我在 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/

我认为我拥有它。即使只是创建 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>");

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 issueto JQuery.

现在我可以通过使用.html(). 我会向 JQuery报告这个问题。

采纳答案by jhlllnd

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$()在将其附加到您的播放器 div 之前缓存它的内容？所以还有另一个视频标签实例。这可能是 jQuery 中的错误。你在没有 Jquery/js 的情况下试过这个吗？

回答by Mark Elphinstone-Hoadley

I would try adding the autoplay attribute afteryou append the video player. This should then instantiate the play function.

在您附加视频播放器后，我会尝试添加自动播放属性。这应该然后实例化播放功能。

That would be something like this:

那将是这样的：

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

When you create elements in JavaScript i.e. image elements, objects etc, they are loaded instantly and stored in memory as objects. That is why you can preload images before you load a page. It is therefore not a jQuery bug.

当您在 JavaScript 中创建元素时，即图像元素、对象等，它们会立即加载并作为对象存储在内存中。这就是为什么您可以在加载页面之前预加载图像。因此，它不是 jQuery 错误。

Ref: http://www.w3.org/TR/html5/video.html#attr-media-autoplay

参考：http: //www.w3.org/TR/html5/video.html#attr-media-autoplay

When present, the user agent (as described in the algorithm described herein) will automatically begin playback of the media resource as soon as it can do so without stopping.

当存在时，用户代理（如本文描述的算法中所述）将在不停止的情况下尽快开始播放媒体资源。

回答by Sebastian Sauer

I've got the same problem over here. This seems to be an issue with using the "autoplay" attribute on your video markup.

我这里也有同样的问题。这似乎是在视频标记上使用“自动播放”属性的问题。

• Remove the autoplay attribute
• append your video DOMNode to any node
• if you want autoplay behavior, call videodomnode.play() - using jquery this would be $('video')[0].play()

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

回答by Kristoffer la Cour

You could get the html of #playerand append the video your self, then add the total with .html()like this:

您可以获取自己的 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);

It's not as good as the .append()function, but if the .append()doesn't work, you might be forced to do something like this.

它不如.append()函数好，但如果.append()不起作用，你可能会被迫做这样的事情。

回答by Daniel

This one worked best in my case:

在我的情况下，这个效果最好：

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

回答by ?brahim Ersoy

I solved mine by loading video after dom loaded:

我通过在 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');  
});