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

Я настраиваю видео-страницу для своего веб-сайта и пытаюсь сделать ее более удобной с помощью 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

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

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


javascript html modal-dialog video playback
person Sonic Media    schedule 20.06.2019    source источник

Ответы (3)


arrow_upward
0
arrow_downward

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

Chrome – https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

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

person darklightcode    schedule 20.06.2019
comment
Хм ... это на самом деле не решает мою проблему и не относится к ней, может быть, я не очень ясно выразился, но я хочу, чтобы миниатюры работали как кнопки воспроизведения. Например: Нажмите «Миниатюра» › «Modal открывается и воспроизводится видео» › «Close Modal» и видео останавливается или приостанавливается (вы можете щелкнуть первую миниатюру на ссылке, которую я предоставил, чтобы понять, что я имею в виду). - person Sonic Media; 20.06.2019

arrow_upward
0
arrow_downward

Можете ли вы просто вызвать 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);
    }
});

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

Ваше здоровье!

person jreyes    schedule 20.06.2019

arrow_upward
0
arrow_downward

Я понял!

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

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

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

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

person Sonic Media    schedule 20.06.2019