在 chrome 中暂停后 Html5 视频不会开始答案

【问题标题】：Html5 video won't start after pause in chrome在 chrome 中暂停后 Html5 视频不会开始
【发布时间】：2016-09-21 20:41:36
【问题描述】：

我有一个可以在所有浏览器中播放的 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>

我查看了其他线程，但没有一个有帮助，例如，其中一个线程说将 preload 设置为 none 并且不起作用，另一个说重新排序它们，我已经尝试过，但没有任何效果。

提前致谢:)

【问题讨论】：

标签： jquery html video modal-dialog

【解决方案1】：

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

感谢 ios-lizard 的 jquery（注意：使用 2.1 +）

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

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

});

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

<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>

【讨论】：