Как заставить воспроизводиться видео, когда вы открываете модальное окно с помощью JavaScript? - PullRequest
Новая
       21

Как заставить воспроизводиться видео, когда вы открываете модальное окно с помощью JavaScript?

0 голосов
/ 20 июня 2019

Я настраивал видео-страницу для своего сайта и пытаюсь сделать ее более удобной, используя Javascript! ... К сожалению, я полностью отстой в Javascript!Итак, вот моя проблема:

Мне удалось создать модальное окно с открывающей анимацией, используя HTML и CSS, и теперь я хочу, чтобы, как только я щелкнул по миниатюрам видео, видео начинает воспроизводиться.и когда я нажимаю кнопку закрытия, видео перестает воспроизводиться или приостанавливается, мне удается заставить его работать с помощью команд "onclick" ... но это работает только для одного видео!

Я попытался установитьвидео с несколькими идентификаторами и несколькими JS-переменными, но ни один из них не работает, в какой-то момент я сделал так, чтобы все видео начали воспроизводиться одновременно, хотя у меня была открыта только одна модальная коробка ... lol

Вотфрагмент моего текущего кода: 

<!-- Open the Lightbox with these images -->
<div class="row">
  <div class="column">
    <img src="tsr/teaserthumbnail.png" onclick="openModal();currentSlide(1);playVid()" class="hover-shadow">
    <img class="play-btn" src="/assets/play-btn.png" onclick="openModal();currentSlide(1);playVid()">
  </div>
  <div class="column">
    <img src="tsr/e3thumbnail.png" onclick="openModal();currentSlide(2);playVid()" class="hover-shadow">
    <img class="play-btn" src="/assets/play-btn.png" onclick="openModal();currentSlide(2);playVid()">
  </div>
</div>

<!-- Modal/Lightbox Content -->
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal();pauseVid()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <center><video id="myVideo" width="100%" controls src="tsr/TSR_TeaserMovie_PEGI_ENG_1527074582.mp4"></video></center>
    </div>

    <div class="mySlides">
      <center><video id="myVideo" width="100%" controls src="tsr/TSR_E3_Trailer_UK_PEGI_1528474075.mp4"></video></center>
    </div>

<script>
// Open the Modal
var vid = document.getElementById("myVideo");
function openModal() {
  document.getElementById("myModal").style.display = "block";
}

function playVid() { 
  vid.play(); 
} 

// Close the Modal
function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

function pauseVid() { 
  vid.pause(); 
}

Вот сама веб-страница, если вам нужно больше контекста: https://sonic.retro -media.net / videos / tsr.php

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

Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 20 июня 2019

Можете ли вы просто вызвать playVid() из openModal(), когда эта функция работает?

Одно из решений , которое вы можете попробовать, - установить autoplay=1, когда модал тоже открыт, таким образом, видео начинает воспроизводиться. Вы можете сделать то же самое, чтобы остановить видео при вызове closeModal (), установив autoplay=0.

Вот так вы бы добавили автовоспроизведение к текущей src видео, если оно находится в iframe: 

vid.src = vid.src + (vid.src.indexOf('?') < 0 ? '?' : '&') + 'autoplay=1';

Вот более полная версия кода. 

var autoplayVideo = function (modal) {

    // Look for a YouTube, Vimeo, or HTML5 video in the modal
    var video = modal.querySelector('iframe[src*="www.youtube.com"], iframe[src*="player.vimeo.com"], video');

    // Bail if the modal doesn't have a video
    if (!video) return;

    // If an HTML5 video, play it
    if (video.tagName.toLowerCase() === 'video') {
        video.play();
        return;
    }

    // Add autoplay to video src
    // video.src: the current video `src` attribute
    // (video.src.indexOf('?') < 0 ? '?' : '&'): if the video.src already has query string parameters, add an "&". Otherwise, add a "?".
    // 'autoplay=1': add the autoplay parameter
    video.src = video.src + (video.src.indexOf('?') < 0 ? '?' : '&') + 'autoplay=1';

};

Теперь, чтобы остановить видео, когда модал закрывается: 

/**
 * Stop a YouTube, Vimeo, or HTML5 video
 * @param  {Node} modal  The modal to search inside
 */
var stopVideo = function (modal) {

    // Look for a YouTube, Vimeo, or HTML5 video in the modal
    var video = modal.querySelector('iframe[src*="www.youtube.com"], iframe[src*="player.vimeo.com"], video');

    // Bail if the modal doesn't have a video
    if (!video) return;

    // If an HTML5 video, pause it
    if (video.tagName.toLowerCase() === 'video') {
        video.pause();
        return;
    }

    // Remove autoplay from video src
    video.src = video.src.replace('&autoplay=1', '').replace('?autoplay=1', '');

};

Не забудьте выставить кнопку / эскиз и модал в качестве аргументов 

modals.init({
    callbackOpen: function ( toggle, modal ) {
        autoplayVideo(modal);
    },
    callbackClose: function ( toggle, modal ) {
        stopVideo(modal);
    }
});

Дайте мне знать, если это работает!

Ура!

0 голосов
/ 20 июня 2019

Я понял!

Решение было довольно простым, все, что мне нужно было сделать, это отредактировать код так: 

<script> 
function playVid(vidID) { 
    var vid = document.getElementById(vidID); 
    vid.play(); 
} 
function pauseVid(vidID) { 
    var vid = document.getElementById(vidID); 
    vid.pause(); 
}
</script>

Теперь все, что мне нужно было сделать, это изменитьсоответственно, мои идентификаторы видео, в данном случае «myVideo1» и «myVideo2»!

Спасибо за помощь!

0 голосов
/ 20 июня 2019

Firefox - https://support.mozilla.org/en-US/kb/block-autoplay

Хром - https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

autoplay будет отключено ( похоже, оно уже отключено ) по умолчанию во всех основных браузерах, если только пользователь не изменит настройки автозапуска браузера.

...