video自动播放问题+方案
1个回答
展开全部
在用H5做短视频的需求中,碰到视频不能自动播放的问题,踩过很多坑,总结了一些问题和方案。
其实,严格的来说,是浏览器不允许在用户对网页进行交互之前播放音频,而视频其实是不受限制的。但因为视频文件同样包含了音频,所以也一同被禁止了。浏览器这样做的目的是为了防止开发者滥用自动播放功能而对用户产生骚扰。
参考1
参考2
据新政策,媒体内容将在满足以下至少一个的条件下自动播放:
第3、4点没懂具体怎么实现,知道的小伙伴请指教。
video标签设置muted属性使它静音,这样视频就能自动播放了。
这个方案是最简单的,所有设备和浏览器都适用。像优酷,爱奇艺在浏览器上自动播放就是这么做的。
使用单页应用 + 用户交互 + 一个video复用来实现。
参考: https://vring.kuyin123.com/
示例: https://gitee.com/songyuanlu/daily/tree/develop/src/video-autoplay
1、它需要有一个前置页或者让用户交互的入口。没有的话第一个视频需要用户点击。
2、只能有一个video标签。在切换播放过的视频时,进度更新会有点卡。(具体细节的坑需要继续踩)
让浏览器放开限制。
不知道QQ浏览器有没有特别给腾讯视频白名单,未验证(反正验证了我们也进不去白名单不是),感兴趣的可以去验证。
如果你的H5是跑在自己的APP中,可以让Native支持在WebView给与H5自动播放权限,具体策略与Native商量吧,总之Native是有办法的。如果他说没有,他可能在忽悠你。
这个对H5来说应该是属于最完美的方案。
在微信中可以 wx.ready 后调用 video.play() 来自动播放。我实践的结果是,有时候可以有时候不行。
以上努力后,其它是否可以自动播放就随缘吧~~~~我没招了。
其实,严格的来说,是浏览器不允许在用户对网页进行交互之前播放音频,而视频其实是不受限制的。但因为视频文件同样包含了音频,所以也一同被禁止了。浏览器这样做的目的是为了防止开发者滥用自动播放功能而对用户产生骚扰。
参考1
参考2
据新政策,媒体内容将在满足以下至少一个的条件下自动播放:
第3、4点没懂具体怎么实现,知道的小伙伴请指教。
video标签设置muted属性使它静音,这样视频就能自动播放了。
这个方案是最简单的,所有设备和浏览器都适用。像优酷,爱奇艺在浏览器上自动播放就是这么做的。
使用单页应用 + 用户交互 + 一个video复用来实现。
参考: https://vring.kuyin123.com/
示例: https://gitee.com/songyuanlu/daily/tree/develop/src/video-autoplay
1、它需要有一个前置页或者让用户交互的入口。没有的话第一个视频需要用户点击。
2、只能有一个video标签。在切换播放过的视频时,进度更新会有点卡。(具体细节的坑需要继续踩)
让浏览器放开限制。
不知道QQ浏览器有没有特别给腾讯视频白名单,未验证(反正验证了我们也进不去白名单不是),感兴趣的可以去验证。
如果你的H5是跑在自己的APP中,可以让Native支持在WebView给与H5自动播放权限,具体策略与Native商量吧,总之Native是有办法的。如果他说没有,他可能在忽悠你。
这个对H5来说应该是属于最完美的方案。
在微信中可以 wx.ready 后调用 video.play() 来自动播放。我实践的结果是,有时候可以有时候不行。
以上努力后,其它是否可以自动播放就随缘吧~~~~我没招了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询