Vedio标签视频隐藏右下角三点的方法

2022年2月12日 517次阅读 来源: 钟记小前端--全栈

video 显示隐藏播放全屏更多控件&Shadow DOM
最近做项目中用到了 H5 video标签播放视频,需求删除自带的更多控制按钮;自以为很简单设定标签的属性,查看文档只有一个可怜的controls布尔值属性与这方面相关;查了半天video相关文档,也学到了很多相关的知识.废话不多说上代码:

第一种:controlslist属性(只有3个配置项)
controlslist=“nodownload nofullscreen noremoteplayback”;

  <video
    controls
    controlslist="nodownload"
    class="video-player"
    disablePictureInPicture  // 隐藏画中画
  ></video>

controlslist:取值如下,设定多个空格间隔
nodownload:取消更多控件弹窗的下载功能;
nofullscreen:取消全屏功能;
noremoteplayback:取消远程播放视频
controlslist=“nodownload” + disablePictureInPicture,弹窗中两个选项全部取消后,更多按钮自动消失了

第二种 shadow DOM
shadow DOM就是浏览器创建的在DOM子树。简单来说，它是一系列的DOM元素，跟熟悉的div span一样，只不过shadow DOM是浏览器添加的文档片段(document fragment)并且能够像DOM树一样在页面中得到渲染。下面引用James Edwards的话简要概括一下影子DOM的作用:

影子DOM通过创建文档片段的形式高效地封装内容，影子DOM的内容是特殊的文档，会通过合并到主文档的方式来创建所有被渲染的内容。
实际上一些浏览器已经通过影子DOM的方式来渲染浏览器的插件

1.查看shadow DOM
打开控制台只有video DOM,没有播放 暂停等元素的信息,其实video标签的控制栏就是浏览器创建的shadow DOM
《Vedio标签视频隐藏右下角三点的方法》

2.查看shadow DOM
(1)在控制设定如下(Chrome)
《Vedio标签视频隐藏右下角三点的方法》
《Vedio标签视频隐藏右下角三点的方法》

(2)shadow DOM信息如下
《Vedio标签视频隐藏右下角三点的方法》

伪元素为::-webkit-media-controls,通过名字我们就已经知道这是和视频控制栏相关联的标签。然后我们可以通过设置display:none !important覆盖样式来将它隐藏就是这么简单;

 // // 播放按钮
    video::-webkit-media-controls-play-button { 
      display: none !important;
    }
    // 当前播放时间
    video::-webkit-media-controls-current-time-display { 
      display: none !important;
    }
    // 剩余时间
    video::-webkit-media-controls-time-remaining-display { 
      display: none !important;
    }
    // 音量按钮
    video::-webkit-media-controls-volume-control-container { 
      display: none !important;
    }
    // 全屏
    video::-webkit-media-controls-fullscreen-button { 
      display: none !important;
    }
    // 时间轴
    video::-webkit-media-controls-timeline { 
      display: none !important;
    }
    // 更多选项 --然而并不生效
    video::-internal-media-controls-overflow-button { 
      display: none !important;
    }

**然而覆盖隐藏更多按钮样式并不生效;**可以设定disablePictureInPicture属性,隐藏画中画

总结
以上两点,需要隐藏取消的按钮要根据实际情况选用以上两种方法;定制化比较高的话,隐藏controls = false隐藏视频控制栏,调用API play() pause()也可以实现播放等功能。

版权声明：本文为CSDN博主「花自飘凌水自流」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38417082/article/details/103749942

    原文作者：钟记小前端--全栈
    原文地址: https://blog.csdn.net/qq_40997551/article/details/109050923
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞