HTML5 视频播放/暂停问题

Question

我正在尝试构建一个非常简单的 HTML5 视频播放器：

HTML

<div class="col-lg-12 video">
  <video id="format-video" width="100%" height="100%" loop="loop" preload="auto">
    <source src="Video-AOM.mp4" type="video/mp4" />
    <img src="images/fallback.jpg"  />
  </video>
  <img class="background" src="images/video-background.jpg" />
  <div class="video-run"></div>
  <div class="video-play-pause"></div>
</div>

打字稿

$(document).ready(function () {
   if ($('#format-video').length > 0) {
    var video = <HTMLVideoElement> document.getElementById('format-video');
    video.oncanplaythrough = function () {
        $('.video-run').fadeIn(200);
        $('.video-run').click(function () {
            $(".video .background").fadeOut(200);
            $('.video-run').fadeOut(200);
            $('.video-play-pause').fadeIn(200);
            $('.video-play-pause').on('click',function () {
                if (video.paused) {
                    video.play();
                }
                else {
                    video.pause();
                }
            })
            video.play();
        });
    }
});

所以当视频可以“播放”时，一个大的“播放”按钮会淡入，点击时会淡出，而小的暂停/播放会淡入。

如果我点击播放/暂停按钮，暂停会起作用，但如果我再次点击它，它要么只播放几秒钟并冻结，要么什么都没有发生。

我正在 Chrome 40.0.2214.91 m 上进行测试。

我尝试按照那里的建议设置 preload="none" :HTML5 video controls - Cannot play after pause in chrome only 但没有成功。

不确定是否有解决方案。

Answer 1

可能在这里发生的事情是，您可能会堆叠多个单击处理程序，这些处理程序都在运行并相互争斗，因为“canplaythrough”事件可以运行不止一次。

如果网络有点慢，那么可能发生的情况是，一旦视频开始播放，它就会赶上缓冲的量，直到它暂停片刻。发生这种情况时，readyState 会回落到较低的值。然后，一旦缓冲了更多视频，readyState 就会恢复到 4 并再次触发“canplaythrough”。

如果发生这种情况，那么您将开始遇到问题。首先，您会期望'.video-run' 再次出现。然后，您将附加第二个单击处理程序。如果您单击它，您还将有第二个单击处理程序附加到'.video-play-pause'。因此，此后每次单击该按钮时，视频都会播放，然后立即暂停。整个过程可能会不断重复，每次都会添加越来越多的点击处理程序。

我建议一开始就设置一次所有点击处理程序。如果您仍然想使用oncanplaythrough 淡入第一个按钮并单击大按钮以淡入小按钮，那很好。但是您应该在第一次运行这些事件处理程序后删除它们。

更新： 关于“canplaythrough”事件的说明。在缓冲足够的数据以使浏览器估计您可以直接播放整个视频而不会耗尽数据之前，此事件不应触发。这并不意味着您拥有所有数据 - 只是它的速度足够快，您可能无法赶上它。无法保证此事件会在您主动开始播放视频之前触发（如果有的话）。众所周知，Chrome 是 aggressive with this event，几乎立即触发它，而其他浏览器则等待更长时间。

Answer 2

所以我设法通过按照那里的建议设置 preload="none" 来解决问题：

HTML5 video controls - Cannot play after pause in chrome only

并清除 Google Chrome 的缓存（在发布问题之前我没有尝试过）。

试了几次，现在看起来不错。