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

Question

我认为巨大的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. 删除视频元素; 幽灵音频一直在播放.
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

在添加视频播放器后,我会尝试添加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

当存在时,用户代理(如本文所述的算法中所述)将在不停止的情况下自动开始播放媒体资源.

Answer 3

我在这里遇到了同样的问题.这似乎是在视频标记上使用"autoplay"属性的问题.

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