Question

我是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>

Answer 1

要处理视频播放器的状态，我们只需使用play的{{1}} 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%;
  }
}

自动播放并停止打开和关闭模式

1 个答案: