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

2022-01-17 00:00:00 modal-dialog javascript html video playback

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

I've been setting up a video page for my website and I'm trying to make it extra slick by using Javascript!... Unfortunately, I completely suck at Javascript! Ok, so here's my problem:

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

I've managed to make a modal box with an opening animation using HTML and CSS, now what I want to happen is as soon as I click the video thumbnails the video starts playing and when I click the close button, the video stops playing or pauses, I've managed to make it work using "onclick" commands... but it only works for one video!

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

I've tried setting up videos with multiple ids and multiple JS vars but none of them work, at some point I made it so all of the videos started playing at once even though I only had one modal box open... lol

这是我当前代码的片段:

Here's a snipet of my current code: 

<!-- 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

Here's the webpage itself if you need anymore context: https://sonic.retro-media.net/videos/tsr.php

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

All I really need is for each video to start playing when I click the thumbnail or pause when I close the modal/lightbox.

提前致谢！

推荐答案

我想通了！

解决方案也相当简单，我所要做的就是将代码编辑为:

The solution was rather simple too, all I had to do to was edit the code to:

<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"！

Now all I had to do was change my video IDs accordingly, in this case 'myVideo1' and 'myVideo2'!

感谢您的帮助！

相关文章