Приостановить местное видео при модальном закрытии - PullRequest
Новая
       46

Приостановить местное видео при модальном закрытии

2 голосов
/ 23 сентября 2019

Я видел несколько решений аналогичной проблемы здесь, на SO, но никто не делает то, что мне нужно.У меня есть веб-страница, которая будет отображаться в киоске, где не будет подключения к Интернету, поэтому все локально.Все мои видео находятся в режиме начальной загрузки, и они продолжают воспроизводиться при закрытии режима.

Одно из решений полностью удаляет ссылку, поэтому при повторном нажатии видео невозможно воспроизвести.Другие решения в их различных формах останавливают видео на 1/2 секунды, затем видео продолжается.

Видео-модал 

    <!-- Modal Overview -->
  <div class="portfolio-modal modal fade" id="gal_overview" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <h2 class="text-uppercase">Overview</h2>
              <div class="embed-responsive embed-responsive-16by9">
                      <iframe class="embed-responsive-item" src="video/overview.mp4" allowfullscreen></iframe></div>
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fas fa-times"></i>
                        Close Video</button>
                    </div>
                  </div>
                </div>
            </div>
          </div>
      </div>
    </div>

Последний сценарий пробовал

<script>
  $('.portfolio-modal').on('hide.bs.modal', function(e) {    
    var $if = $(e.delegateTarget).find('iframe');
    var src = $if.attr("src");
    $if.attr("src", '/empty.html');
    $if.attr("src", src);
  });
  </script>

Этот текущий код начнет проигрывать все видео в фоновом режиме при загрузке страницы.Я уверен, что мне здесь не хватает чего-то очень простого.

1 Ответ

1 голос
/ 23 сентября 2019

Рабочий ответ:

Поскольку iframe просто указывает на видеофайл, вы можете изменить iframe на <video> и намного проще управлять видео. 

<video src="video/overview.mp4"></video>

Метод .pause() на видеоэлементе может затем использоваться для фактической приостановки видео. 

<script>
  $('.portfolio-modal').on('hide.bs.modal', function(e) {
    var $v = $(e.delegateTarget).find('video');
    $v[0].pause();  // use [0] because jQuery returns a list
  });
</script>

Первоначальный ответ:

Звучиткак лениво - примените атрибут iframe src.Поэтому, когда страница загружается, атрибуты iframes src должны быть data-src.Таким образом, видео не воспроизводится.

Затем на $('.portfolio-modal').on('show.bs.modal') установите атрибут src с содержимым data-src.Видео будет воспроизводиться.

Затем, когда модал скрыт, замените src на /empty.html снова.

В следующий раз, когда модал будет запущен, src будет установлен снова,и цикл повторяется.

Если вы действительно хотите приостановить видео, а не сбросить iframe, тогда этот ответ должен быть полезен.

...