隐藏html5中video标签的控件

1、

• 隐藏视频控件：

  • 使用video::-webkit-media-controls、video::-moz-media-controls、video::-ms-media-controls等CSS选择器来隐藏不同浏览器上的默认控件。
  • video::part(media-controls)用于覆盖未来的标准，确保最大兼容性。

/* 隐藏所有默认控件 */
video::-webkit-media-controls {
  display: none !important;
}

video::-moz-media-controls {
  display: none !important;
}

video::-ms-media-controls {
  display: none !important;
}

/* 针对不同浏览器的隐藏控件的方式 */
video::part(media-controls) {
  display: none !important;
}

2、

• 视频模板：

  • 去掉controls属性。

     <video
            ref="video"
            height="142"
            width="100%"
            controls
            :src="'/api/'+url"
            @play="onPlay"
            @pause="onPause"
            @ended="onEnded" >
            您的浏览器不支持 HTML5 视频。
    </video>
    
    改为
    
    <video
            ref="video"
            height="142"
            width="100%"
            :src="'/api/'+url">
            您的浏览器不支持 HTML5 视频。
    </video>