开发者社区彭世瑜的博客文章正文

video标签自动播放视频

2021-11-25 376

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： video标签自动播放视频

 <video 
 src="xxxx/xxx.mp4" 
 autoplay="autoplay" 
 loop="loop" 
 muted="muted" 
 controls="controls"
 controlsList="nodownload"
 height="100%" width="100%">
 </video>

autoplay 自动播放

muted 静音，如果autoplay不自动播放，添加muted会静音自动播放

controls 控制

src 视频资源

controlsList=“nodownload” 隐藏下载按钮

通过css隐藏

video::-webkit-media-controls {
    overflow: hidden !important;
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}