时间戳

首页 > 解决方案 > 使用 JavaScript 打开模态框时如何播放视频？

javascript - 使用 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

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

提前致谢！

标签： javascripthtmlvideomodal-dialogplayback

解决方案

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

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

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

推荐阅读