Html5 Video startet nicht nach Pause in Chrom

Question

Ich habe ein HTML5 Video, das in allen Browsern abgespielt wird, aber wenn ich es pausiere und dann auf Wiedergabe in Chrome erneut drücke, wird es nicht neu gestartet, es bricht nur. Die einzige Möglichkeit, das Video erneut zu starten, ist das erneute Laden der Seite.

Ich bin mir nicht sicher, was ich falsch mache. Es funktioniert gut in IE und Firefox. Es ist in einem Bootstrap-Modal, also bin ich mir nicht sicher, ob das aus irgendeinem Grund wirkt?

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

ich in anderen Threads ausgesehen haben und keiner von denen geholfen haben, zum Beispiel einer der Threads die Vorspannung auf keine gesetzt und das hat eine andere nicht gesagt arbeiten, um sie und ich neu zu ordnen habe das versucht, aber nichts hat funktioniert.

Vielen Dank im Voraus :)

Answer 1

Dies scheint

Credit ios-lizard für die jquery (obwohl ich es nur mit einer MP4-Datei getestet) zu arbeiten:

https://jsfiddle.net/RachGal/tc2pj553/ (Anmerkung + verwenden 2.1)

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