video标签常用控制配置，禁用单击暂停，保留双击全屏

muller25。。。

已于 2023-07-17 10:46:16 修改

阅读量2.5k

点赞数 1

分类专栏： JavaScript Vue 文章标签：前端

于 2023-07-15 16:21:42 首次发布

本文链接：https://blog.csdn.net/mullerpp/article/details/131740759

版权

JavaScript Vue 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

<template>
    <video id="video1" controls autoplay muted width="100%" height="100%" style="object-fit: fill"></video>
    <video id="video2" controls autoplay muted width="100%" height="100%" style="object-fit: fill"></video>
</template>

<script>
        const videos = document.querySelectorAll("video");   //获取所有video标签
        videos.forEach(video => {
          // 阻止单击暂停
          video.addEventListener("click", (event) => {
            event.preventDefault();
          });
          // 添加双击全屏放大功能
          video.addEventListener("dblclick", () => {
            if (!document.fullscreenElement) {
              if (video.requestFullscreen) {
                video.requestFullscreen();
              } else if (video.mozRequestFullScreen) { // 兼容火狐浏览器
                video.mozRequestFullScreen();
              } else if (video.webkitRequestFullscreen) { // 兼容谷歌浏览器和Safari
                video.webkitRequestFullscreen();
              }
            } else {
              if (document.exitFullscreen) {
                document.exitFullscreen();
              } else if (document.mozCancelFullScreen) { // 兼容火狐浏览器
                document.mozCancelFullScreen();
              } else if (document.webkitExitFullscreen) { // 兼容谷歌浏览器和Safari
                document.webkitExitFullscreen();
              }
            }
          });
        });
</script>

/* 隐藏video 全屏按钮 */
.video::-webkit-media-controls-fullscreen-button {
    display: none;
}
/* 隐藏video 播放按钮 */
.video::-webkit-media-controls-play-button {
	display: none;
}
/* 隐藏video 进度条 */
.video::-webkit-media-controls-timeline {
	display: none;
}
/* 隐藏video 观看的当前时间 */
.video::-webkit-media-controls-current-time-display{
	display: none;            
}
/* 隐藏video 剩余时间 */
.video::-webkit-media-controls-time-remaining-display {
	display: none;            
}
/* 隐藏video 音量按钮 */
.video::-webkit-media-controls-mute-button {
	display: none;            
}
.video::-webkit-media-controls-toggle-closed-captions-button {
	display: none;            
}
/* 隐藏video 音量的控制条 */
.video::-webkit-media-controls-volume-slider {
	display: none;            
}
/* 隐藏video 所有控件 */
.video::-webkit-media-controls-enclosure{ 
	display: none;
}