时间戳

首页 > 解决方案 > 打开和关闭模式时自动播放和停止

javascript - 打开和关闭模式时自动播放和停止

问题描述

我是 javascript 新手，在打开和关闭模式时遇到自动播放视频和停止视频的问题。

目前，如果我在视频控件之外单击，此脚本允许我关闭模式，并且也必须修复。它旨在能够在单击视频主体时播放/暂停视频，并在单击视频时关闭模态。

同时，在打开模态时，视频应该能够自动播放，同样在关闭模态时，视频停止。

我不熟悉这些功能，是否有人可以建议对当前脚本进行任何改进？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">

        <style>
            .trailer{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            background: rgba(0, 0, 0, 0.7);
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            opacity: 0;
        }

        .trailer.active{
            visibility: visible;
            opacity: 1;
        }

        .trailer #mainvid{
            position: relative;
            max-width: 1200px;
            outline: none;
        }

        .trailer-close{
            position: absolute;
            top: 30px;
            right: 30px;
            cursor: pointer;
            filter: invert(1);
            max-width: 32px;
        }

        @media (max-width: 991px) {
            .trailer #mainvid{
                max-width: 90%;
            }
        }
        </style>


    </head>
    <body>

        <div class="banner">
            <div class="content">
                <p>Testing Testing 1 2 3</p>
                <a href="#" onclick="toggle();">
                    <button>Play Video</button>
                </a>
            </div>
        </div>

        <div class="trailer" id="main">
            <video id="mainvid" src="/video/products/container accomodation/main/main video.mp4" controls="true"></video>
        </div>


    <script type="text/javascript">
        function toggle(){
            var trailer = document.querySelector(".trailer")
            trailer.classList.toggle("active");
            video.pause();
            video.currentTime = 0;
        }

        window.addEventListener('mouseup',function(){
            var traileractive = document.querySelector(".trailer.active")
            traileractive.classList.toggle("active");
        })

    </script>

    </body>
</html>

标签： javascriptvideomodal-dialogautoplay

解决方案

要处理视频播放器的状态，我们可以简单地使用 的play pause函数HTMLMediaElement。使用此代码，它会处理所有所需的功能。

var videoElem = document.querySelector(".trailer video");
var trailerElem = document.querySelector(".trailer")

function toggle() {
  trailerElem.classList.add("active");
  videoElem.play();
  videoElem.currentTime = 0;
}

function handleTrailerClick(event) {
  if (event && event.target && event.target.nodeName !== "VIDEO") {
    videoElem.pause();
    trailerElem.classList.remove('active');
  }
}

function handleVideoClick(event) {
  event.preventDefault();
  videoElem.paused ? videoElem.play() : videoElem.pause();
}

document.querySelector("#playButton").addEventListener('click', toggle)
document.querySelector(".trailer").addEventListener('click', handleTrailerClick);
document.querySelector(".trailer video").addEventListener('click', handleVideoClick);
.trailer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}

.trailer.active {
  display: flex;
}

.trailer #mainvid {
  position: relative;
  max-width: 1200px;
  outline: none;
}

.trailer-close {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
  filter: invert(1);
  max-width: 32px;
}

@media (max-width: 991px) {
  .trailer #mainvid {
    max-width: 90%;
  }
}
<div class="banner">
  <div class="content">
    <p>Testing Testing 1 2 3</p>
    <button id="playButton">Play Video</button>
  </div>
</div>

<div class="trailer" id="main">
  <video id="mainvid" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" controls="true"></video>
</div>

推荐阅读