视频组件内，如何进行自定义内容组件呢？3分钟快速学会

1.为什么要进行自定义内容组件呢？

我们可以先看，不进行自定义内容组件时的效果显示：

不进行自定义内容组件时，只能使用固定html提供的组件，如果我们想实现在下方发送弹幕，弹幕的开关，以及直接在下方进行分享该视频的功能都要自定义内容组件

2.自定义内容组件的例子

先看看效果：

代码如下所示：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义视频控件示例</title>
</head>

<body>
    <!-- 视频容器 -->
    <div id="videoContainer" class="video-container">
        <!-- 视频元素 -->
        <video id="myVideo" src="video.mp4" type="video/mp4" width="640" height="360" preload="auto"></video>
        <!-- 自定义控制面板 -->
        <div class="custom-controls" id="customControls">
            <!-- 播放/暂停按钮 -->
            <button id="playPauseBtn">播放/暂停</button>
            <!-- 进度条 -->
            <input type="range" id="seekBar" min="0" max="100" value="0">
            <!-- 静音/取消静音按钮 -->
            <button id="muteBtn">静音/取消静音</button>
            <!-- 音量条 -->
            <input type="range" id="volumeBar" min="0" max="1" step="0.1" value="1">
            <!-- 全屏按钮 -->
            <button id="fullScreenBtn">全屏</button>
        </div>
    </div>

    <script>
        var videoContainer = document.getElementById("videoContainer");
        var video = document.getElementById("myVideo");
        var playPauseBtn = document.getElementById("playPauseBtn");
        var seekBar = document.getElementById("seekBar");
        var muteBtn = document.getElementById("muteBtn");
        var volumeBar = document.getElementById("volumeBar");
        var fullScreenBtn = document.getElementById("fullScreenBtn");
        var customControls = document.getElementById("customControls");

        // 控制播放和暂停
        playPauseBtn.addEventListener("click", function () {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        });

        // 更新播放进度条
        video.addEventListener("timeupdate", function () {
            seekBar.value = (video.currentTime / video.duration) * 100;
        });

        // 拖动进度条
        seekBar.addEventListener("input", function () {
            var time = seekBar.value * video.duration / 100;
            video.currentTime = time;
        });

        // 静音和取消静音
        muteBtn.addEventListener("click", function () {
            video.muted = !video.muted;
        });

        // 控制音量
        volumeBar.addEventListener("input", function () {
            video.volume = volumeBar.value;
        });

        // 初始化音量条
        volumeBar.value = video.volume;

        // 全屏视频
        fullScreenBtn.addEventListener("click", function () {
            if (video.requestFullscreen) {
                videoContainer.requestFullscreen();
            } else if (video.mozRequestFullScreen) { /* Firefox */
                videoContainer.mozRequestFullScreen();
            } else if (video.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                videoContainer.webkitRequestFullscreen();
            } else if (video.msRequestFullscreen) { /* IE/Edge */
                videoContainer.msRequestFullscreen();
            }

        });


        function showControls() {
            customControls.style.opacity = 1;
        }

        function hideControls() {
            customControls.style.opacity = 0;
        }

        // 鼠标移动到视频上显示控件
        video.addEventListener("mouseover", showControls);
        customControls.addEventListener("mouseover", showControls);

        // 鼠标移出视频隐藏控件
        video.addEventListener("mouseout", hideControls);
        customControls.addEventListener("mouseout", hideControls);

        // 监听全屏状态变化
        video.addEventListener("fullscreenchange", function onFullScreenChange() {
            if (document.fullscreenElement) {
                // 视频处于全屏状态，显示控件
                customControls.style.opacity = 1;
            } else {
                // 视频不在全屏状态，可以设置控件不显示或者根据需要调整
                customControls.style.opacity = 0;
            }
        });

        

    </script>

</body>
<style>
    .video-container {
        position: relative;
        width: 640px;
        /* 与视频宽度相同 */
    }

    video {
        width: 100%;
        height: auto;
    }

    .custom-controls {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        /* 根据需要调整 */
        background: rgba(0, 0, 0, 0.5);
        color: white;
        display: flex;
        align-items: center;
        padding: 10px;
        opacity: 0;
        /* 默认不显示控件 */
        transition: opacity 0.3s;
        /* 控件显示和隐藏的过渡效果 */
    }

    .custom-controls button {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        margin-right: 10px;
        /* 根据需要调整 */
    }

    .custom-controls input[type="range"] {
        margin: 0 10px;
    }


</style>

</html>

视频组件内，如何进行自定义内容组件呢？3分钟快速学会

1.为什么要进行自定义内容组件呢？

2.自定义内容组件的例子

悦读