使用 JQuery .append() 播放两次 html5 视频(音频加倍) [英] html5 video playing twice (audio doubled) with JQuery .append()

问题描述

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

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. 添加视频元素.
2. 视频开始加载和播放.
3. 视频音频听起来好像翻了一番.
4. 暂停可见视频，一个音轨继续.
5. 删除视频元素；幽灵声音一直在播放.
6. 删除帧，ghost 音频停止(虽然在 Firefox 中关闭窗口后继续播放，直到退出 Firefox 才停止).

这是一个屏幕截图，可能表明我并不是完全疯了:http://www.youtube.com/watch?v=hLYrakKagRY

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

使用 .html() 而不是 .append() 制作元素时似乎不会发生这种情况，所以这是我唯一的线索:http://jsfiddle.net/cDpV9/6/

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

我使用的是 OS X 10.6.7.

I'm on OS X 10.6.7.

我认为我拥有它.即使只是创建 JQuery 对象而不将其添加到页面也会导致幽灵播放器播放:http://jsfiddle.net/cDpV9/8/

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' 预加载自动播放控件></video>");

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

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

推荐答案

也许 jQuery 在将 $() 的内容附加到您的播放器 div 之前缓存它?所以还有另一个视频标签实例.这可能是 jQuery 中的错误.你在没有 Jquery/js 的情况下试过这个吗?

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屋！