js点击弹窗播放h5视频，点击关闭窗口暂停播放

2023-08-28

1,806次阅读

我们使用document添加了一个点击事件监听器，来判断点击事件的目标元素是否位于弹窗内部（videoPopup）以及是否不是 “打开弹窗” 按钮。只有当点击事件的目标元素不在弹窗内部且不是 “打开弹窗” 按钮时，才会触发关闭弹窗的逻辑。

这样，当你点击video-popup-container区域以外的任何地方时，弹窗都会关闭。

截图

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5视频弹窗示例</title>
    <style>
        img{
            max-width: 100%;
        }
        button{
            border: none;
            background: none;
            cursor: pointer;
        }
        #open-popup{
            padding: 10px 20px;
            background: #000;
            color: #FFF;
            border-radius: 5px;
        }
        #video-popup-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明的灰色背景 */
            justify-content: center;
            align-items: center;
            z-index: 1000; /* 确保遮罩位于其他内容之上 */
        }

        #video-popup {
            width: 800px;
            position: relative;
        }
        #close-popup {
            position: absolute;
            top: -50px;
            right: -30px;
            width: 50px;
        }
        #close-popup:hover img{
            opacity: .8;
        }
    </style>
</head>

<body>
    <button id="open-popup">打开弹窗</button>
    <div id="video-popup-container">
        <div id="video-popup">
            <video id="video" controls width="100%" height="100%">
                <source src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-720p.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <button id="close-popup"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFJGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjAgKDIwMjMwODIwLm0uMjI5NiBjNjFjM2E1KSAgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0wOC0yOFQxMTozOTowNCswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMDgtMjhUMTE6Mzk6MjErMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMDgtMjhUMTE6Mzk6MjErMDg6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmI5ZmZlNzhmLTM1MDMtM2U0My1hZWJiLTYwYTgx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" alt=""></button>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
                const openPopupButton = document.getElementById("open-popup");
                const closePopupButton = document.getElementById("close-popup");
                const videoPopupContainer = document.getElementById("video-popup-container");
                const videoPopup = document.getElementById("video-popup");
                const video = document.getElementById("video");

                openPopupButton.addEventListener("click", function () {
                    videoPopupContainer.style.display = "flex";
                    video.play();
                });

                closePopupButton.addEventListener("click", function () {
                    closePopup();
                });

                document.addEventListener("click", function (event) {
                    if (!videoPopup.contains(event.target) && event.target !== openPopupButton) {
                        closePopup();
                    }
                });

                function closePopup() {
                    videoPopupContainer.style.display = "none";
                    video.pause();
                }
            });
    </script>
</body>
</html>

正文完

要饭中，多少给点吧（支付宝)