Html5 Видео не запускается после паузы в chrome

У меня есть видео html5, которое будет воспроизводиться во всех браузерах, но когда я приостанавливаю его, а затем снова нажимаю play в chrome, он не перезапускается, он просто ломается. Единственный способ запустить видео снова-перезагрузить страницу.

Я не уверен, что я делаю неправильно. Он отлично работает в IE и firefox. Это в модальном bootstrap, поэтому я не уверен, что это влияет на него по какой-то причине?

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

Я посмотрел на другие потоки, и ни один из них не помог, например, один из потоков сказал, чтобы установить поджатие ни один, и это не сработало другой сказал, чтобы переупорядочить их, и я попытался, что, но ничего не сработало.

Спасибо заранее 🙂

1 ответ

  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>