HTML5 视频 Play/Pause 问题

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();
        });
    }
});

所以当视频可以 "playthrough" 时，一个大的 "play" 按钮淡入，当点击时淡入，一个小的 pause/play 淡入。

如果我点击按钮 play/pause，暂停有效，但如果我再次点击它，它要么只播放几秒钟然后停止播放，要么什么也没有发生。

我正在 Chrome 40.0.2214.91 米进行测试。

我尝试按照那里的建议设置 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 的缓存（我在发布问题之前没有尝试过）。

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

HTML5 视频 Play/Pause 问题

HTML5 Video Play/Pause issue

html

jquery

html5-video

typescript