html什么属性设置视频拖动

HTML是Web开发中的重要语言，可以实现丰富多彩的网页效果。在网页中加入视频可以增加用户体验度，那么如何设置视频的拖动呢？

video {
        width: 100%;
}
video::-webkit-media-controls {
        display: none !important;
}
video::-webkit-media-controls-enclosure {
        overflow: hidden !important;
}
video::-webkit-media-controls-overlay-play-button {
        opacity: 0 !important;
}
    

以上代码可以去掉视频播放时的默认控制条，用JavaScript添加自定义操作，再使用HTML中的“progress”元素创建拖动条。代码如下：

        var video = document.getElementById("myVideo");
        var progress = document.getElementById("progressBar");
            video.addEventListener("timeupdate", updateProgressBar);
        progress.addEventListener("click", seek);
        function updateProgressBar() {
            var duration = video.duration;
            var currentTime = video.currentTime;
            var percent = (currentTime / duration) * 100;
                    progress.value = percent;
    }
        function seek(event) {
            var percent = event.offsetX / this.offsetWidth;
                    video.currentTime = percent * video.duration;
            progress.value = percent / 100;
    }
    

这段代码会在HTML中添加一个视频元素和进度条，使用JavaScript为视频添加了两个事件：时间更新和点击进度条改变播放进度。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！