Question

我有一个可以在所有浏览器中播放的html5视频，但是当我暂停它然后再次在Chrome中播放时它将不会重新启动它只是休息。再次启动视频的唯一方法是重新加载页面。

我不确定我做错了什么。它在IE和Firefox中运行良好。它是一个自举模式，所以我不确定这是否会因某种原因影响它？

<div class="modal" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-lg"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <div class="modal-content">
        <div class="modal-body">
            <video loop="loop" id="mainVideo" preload="none" controls width="100%">

                <source src="video/video-home.ogv" type="video/ogg">
                <source src="video/video-home.webm" type="video/webm">
                <source src="video/video-home.mp4" type="video/mp4">

            </video>


        </div>
</div>

我已经查看了其他线程，并且没有一个帮助过，例如其中一个线程说将预加载设置为无，而另一个线程没有用，另一个说重新排序它们并且我已经尝试了但是没有任何工作。< / p>

提前致谢：）

Answer 1

这似乎有用（虽然我只测试了mp4文件）

为jquery（注意：使用2.1 +）

提供ios-lizard

https://jsfiddle.net/RachGal/tc2pj553/

＆＃13;

$("video").click(function(e) {

  // get click position 
  var clickY = (e.pageY - $(this).offset().top);
  var height = parseFloat($(this).height());

  // avoids interference with controls
  if (clickY > 0.82 * height) return;

  // toggles play / pause
  this.paused ? this.play() : this.pause();

});

＆＃13;

video{width:270px;
      height:auto;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <div class="modal-content">
      <div class="modal-body">
        <video loop="loop" id="mainVideo" preload="none" controls width="100%">

          <source src="video/video-home.ogv" type="video/ogg">
            <source src="video/video-home.webm" type="video/webm">
              <source src="http://www.rachelgallen.com/nature.mp4" type="video/mp4">

        </video>


      </div>
    </div>

＆＃13;

暂停Chrome后，Html5视频无法启动

1 个答案: