前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >html中video作为banner的设置

html中video作为banner的设置

作者头像
痴心阿文
发布2022-11-18 17:18:51
1.5K0
发布2022-11-18 17:18:51
举报

 html中video作为banner的设置

效果前:

效果后预览

 <video controls class="video"/>  通过css样式可以将其隐藏

代码语言:javascript
复制
//设置全屏平铺

.video{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* 隐藏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;
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-11-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  •  html中video作为banner的设置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档