关于HTML5 video标签的视频不能自动播放和去掉下载选项的问题

vue项目demo中有遇到页面需要开场视频动画,需要点击才能进入主页,不考虑兼容性,自然想起的事html5的video标签可以播放视频,于是使用以下方法:


常规操作,但是发现不能自动播放于是添加了video属性: autoplay=“autoplay”,视频加载后自动播放,但是多次尝试刷新进入发现时灵时不灵,有时可以自动播放,有时不能自动播放,查了文档没发现其他可设置的属性,于是去网上查了一下资料,说是给video标签中添加“muted”即可,但是“muted”属性是该视频的音频输出是否为静音,抱着活马当作死马医的想法, 试了一下,果不其然。okay

由于是点击进入页面,所以视频是循环播放,这个只需要给video标签添加“loop”属性即可,如果是视频播放完毕进入则需要添加“onended”事件来执行播放完毕的方法,这个“onended”是js跳转,比如简单的跳转直接οnended=“window.location.href=‘xxxxxxxxx’”, 前端框架自己直接写即可,比如vue中直接“@ended”执行method中的函数即可。

另外如果你需要controls控制声音和进度等那么可以直接给video标签添加controls即可,但是问题来了,controls bar出现后右下角有个选项点击可以下载视频,如果不想展示该选项的话,可以给video标签添加“ controlsList="nodownload“即可。

打包丢至服务器上后,发现仍然不能播放,只需要给video标签绑定个ref值,在需要动态绑定的方法里设置ref的src即可,像这样:

      this.$refs.videos.src = this.videoUrl

你可能感兴趣的:(前端)