HTML5-动画中的视频jQuery-对话在动画结束时暂停

Question

我们在 jQuery 对话框中使用 jPlayer（非 Flash 版本）播放视频。它们被设置为自动播放，这有效，但如果对话框是动画的，即具有显示效果，它会暂停。有谁知道为什么或如何避免这种情况？

使用的库：

jQuery 1.10.1
jQuery UI 1.11.14

在 Firefox 40 和 Chrome 44 上测试 Windows 7

以下显示效果暂停视频：

盲目、掉落、折叠、弹跳、剪辑、粉扑、缩放、摇晃、大小、滑动

这些工作正常：

slideDown、突出显示、脉动

"explode" 不会暂停视频，但在动画期间视频不可见

<div id="dialog" title="Basic dialog">
  <p>Inner Video does not play automatically (because jPlayer is missing), but if started manually while the dialog is animated, it'll pause when the animation is finished.</p>
  <video id="inner" autoplay controls src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"></video>
</div>

<p>Outer Video plays automatically without problems</p>
<video id="outer" autoplay controls src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"></video>

$( "#dialog" ).dialog({
  width: 680,
  height: 540,
  show: {
    effect: "drop",
    duration: 10000
  }
});

jsfiddle： http://jsfiddle.net/LePhil/uk9gpLne/1/

Answer 1

我很确定ui我确定我找到了原因：jQueryUI 将对话框包装在一个包装器中，同时对其进行动画处理，并在完成动画处理后，它移动 ui-dialog-包装外的元素。这会暂停视频。解决方法是

a) 动画结束后再次调用play

b) 仅在动画完成后才开始播放视频（因此没有本机自动播放）

c) 自己制作动画，这样它就不会被包裹起来，例如通过在对话框的构造函数中使用 .animate( left: 100 ) 而不是 show:{ left: 100 }。

HTML5-动画中的视频jQuery-对话在动画结束时暂停

HTML5-Video in animated jQuery-Dialog pauses on animation end

jquery

jquery-ui

jplayer

html5-video