使用JavaScript打开模态框时如何播放视频？

Question

我一直在为我的网站设置一个视频页面，我试图通过使用 Javascript 使它更加流畅！...不幸的是，我完全不喜欢 Javascript！好的，这是我的问题：

我已经使用 HTML 和 CSS 成功地制作了一个带有打开动画的模态框，现在我想要发生的是，只要我点击视频缩略图，视频就会开始播放当我点击关闭按钮时，视频停止播放或暂停，我已经设法使用 "onclick" 命令让它工作......但它只适用于一个视频！

我已经尝试设置具有多个 ID 和多个 JS 变量的视频，但其中 none 有效，在某些时候我成功了所以所有视频都同时开始播放，即使我只有一个模态框打开... 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

我真正需要的是让每个视频在我单击缩略图时开始播放或在我关闭 modal/lightbox 时暂停。

提前致谢！

Answer 1

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

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

autoplay 将在所有主要浏览器上默认关闭（更像是，它已经关闭），除非用户更改浏览器自动播放设置。

Answer 2

当那个函数是运行时，你能从 openModal() 调用 playVid() 吗？

您可以尝试的一个 解决方案是在模态也打开时设置 autoplay=1，这样视频就会开始播放。您可以通过设置 autoplay=0 在调用 'closeModal()' 时执行相同的操作来停止视频。

如果视频在 iframe 中，这就是将自动播放添加到视频的当前 src 的方式：

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', '');

};

不要忘记公开 button/thumbnail 和模态作为参数

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

让我知道这是否有效！

干杯！

Answer 3

我想通了！

解决方案也很简单，我只需将代码编辑为：

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

现在我所要做的就是相应地更改我的视频 ID，在本例中为 'myVideo1' 和 'myVideo2'！

感谢您的帮助！

使用JavaScript打开模态框时如何播放视频？

How to make a video play when you open a modal box using JavaScript?

html

javascript

video

modal-dialog

playback