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

我一直在为我的网站设置一个视频页面，我正在尝试使用 Javascript 使其变得更加流畅！...不幸的是，我完全不擅长 Javascript！好的，这是我的问题：

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

我尝试过设置具有多个 id 和多个 JS 变量的视频，但它们都不起作用，在某个时候我做到了，所以所有视频都立即开始播放，即使我只打开了一个模式框...哈哈

这是我当前代码的片段：

<!-- 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 https://sonic.retro-media.net/videos/tsr.php

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

提前致谢！

你可以打电话吗playVid()来自openModal()该函数何时运行？

One您可以尝试的解决方案是设置autoplay=1当模式也打开时，视频就会开始播放。当调用“closeModal()”时，您可以通过设置执行相同的操作来停止视频autoplay=0.

如果视频位于 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', '');

};

不要忘记将按钮/缩略图和模式作为参数公开

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

让我知道这个是否奏效！

Cheers!