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

因此，当视频能够播放＆＃34;播放时，＃34;播放＆＃34;当渐渐渐渐消失并且暂停/播放暂停时，按钮会淡入。

如果我点击按钮播放/暂停，则暂停有效，但如果我再次点击它，它只会播放几秒钟并冻结或没有任何反应。

我正在测试Chrome 40.0.2214.91 m。

我试图设置preload =＆＃34; none＆＃34;正如那里建议的那样：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视频播放/暂停问题

2 个答案: