html5 video标签自定义设置（全屏、音量、下载、画中画）

Mystery0410

已于 2022-08-26 10:48:10 修改

阅读量6k

点赞数 3

文章标签： html5 html css

于 2021-10-13 10:12:48 首次发布

本文链接：https://blog.youkuaiyun.com/valkyrie0/article/details/120738376

版权

本文介绍了如何使用HTML和CSS来定制视频播放体验，着重讲解了如何隐藏视频的全屏和音量控制按钮，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<video :src="videoSrc"
        autoplay
        controls="controls"
        controlsList="nodownload nofullscreen"
        disablePictureInPicture></video>

css

/*video隐藏全屏按钮*/
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
/*video隐藏音量控制*/
video::-webkit-media-controls-volume-control-container {
  display: none !important;
}