HTML5视频播放/暂停问题

问题描述

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

I am trying to build a really simple HTML5 video player :

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>

TYPESCRIPT

TYPESCRIPT

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

因此，当视频可以播放时，一个大的播放按钮会渐渐消失淡出，小暂停/播放淡入。

So when the video can "playthrough", a big "play" button fades in, when cliked in fades out and a small pause/play fades in.

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

If I click the button play/pause, the pause works but then if I click it again it either plays only few seconds and freezes or nothing happens.

我正在测试Chrome 40.0.2214.91米。

I am testing on Chrome 40.0.2214.91 m.

我试过如下所示，设置preload =none：
但没有成功。

I tried to set-up preload="none" as suggested there :HTML5 video controls - Cannot play after pause in chrome onlybut no success.

不确定是否有解决方案。

Not sure if there is a solution.

推荐答案

所以我设法通过设置preload =none解决问题：

So I manage to fixe the problem by setting up preload="none" as suggested there:

并清除谷歌浏览器的缓存（我在发布问题之前没有尝试过）。

AND clear the cache of Google Chrome (which I did not try before I posted the question).

尝试过几次，现在看起来很好。

Tried few times, it looks fine now.

这篇关于HTML5视频播放/暂停问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！