使用JavaScript打开模式框时如何播放视频? [英] How to make a video play when you open a modal box using JavaScript?

问题描述

我一直在为我的网站设置一个视频页面，我正在尝试通过使用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 var的视频，但是它们都不起作用，在某个时候我做到了，所以即使我只打开了一个模式框，所有视频都立即开始播放...大声笑

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

谢谢您的帮助！

这篇关于使用JavaScript打开模式框时如何播放视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！