由于浏览器厂商为了提高用户体验禁止video标签可以有声的自动播放,也就是说如果想让video标签能够自动播放必须给video标签添加muted属性。 但是在开发的过程中我们需要用视
由于浏览器厂商为了提高用户体验禁止video
标签可以有声的自动播放,也就是说如果想让video
标签能够自动播放必须给video
标签添加muted
属性。
但是在开发的过程中我们需要用视频自动有声播放,比如一些学习网站,需要老师或同学进入页面就可以播放学习视频,那么如何去实现呢?
首先我们要让video
标签能够自动播放,也就是让video
标签静音条件下自动播放。
<video
ref="videoPlayer"
id="videoPlayer"
class="video"
width="100%"
autoplay
muted
controls
:src="addPre()">
</video>
然后是我们通过javascript的方式让video
标签先取消静音然后再自动播放。
this.$nextTick(() => {
this.$refs.videoPlayer.muted = false;
this.$refs.videoPlayer.play();
})
此方法我只在Vue框架下尝试可以,在其他框架没有尝试。
此方法还需要注意的一点是如果此方法所在页面刷新或是从其他网站直接跳转到此页面则此方法就不管用了。
如果是刷新或者是外部链接跳转到此则会报如下错误:
Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.
这个错误的意思是:play() 失败,因为用户没有先与文档交互。
使用play
方法之前用户必须得和文档(也就是页面进行)交互,刷新和从外部链接跳转都没有与页面进行交互。但是在Vue项目中从一个路由页面跳转到视频播放页面是可以的,这是为什么呢?
因为Vue是单页面富应用,虽然我们看上去页面是从一个页面跳转到另一个页面但是这些路由页面始终在同一个文档(页面)中,当我们点击实现路由跳转时就已经实现了与文档交互,所以不会报上面的错。
补充:video标签核心属性:
总结
到此这篇关于Vue中video标签如何实现不静音自动播放的文章就介绍到这了,更多相关Vue video标签自动播放内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue中video标签如何实现不静音自动播放
本文链接: https://www.lsjlt.com/news/191758.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0