クロムで一時停止した後にHtml5ビデオが再生されない

Question

すべてのブラウザで再生されるhtml5ビデオがありますが、一時停止してクロムで再生を再開すると、再生が再開されません。動画をもう一度開始するには、ページをリロードするしかありません。

私が間違っていることはわかりません。それは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> 

例えば、私は他のスレッドを見ていると、それらのどれも助けなかったスレッドの一つがnoneに予圧を設定すると、それは彼らと私の順序を変更すると、別の動作しませんでしたそれを試みたが、何も働いていない。事前に

感謝:)

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