1.目前的需求是小程序页面中有视频的话,实现视图滚动出现在视图中会自动播放,其他视频关闭。通过微信浏览器打开的 h5页面同样需求。
2.实际操作,小程序通过webview嵌套加载h5网页,实现滚动视图中有视频的话自动播放视频, video设置了静音和使用video.play()、video.pause()播放方法。
3.实际效果:
(1)小程序 iOS (14pro)进去首页,首页的视频播放被禁止,点击进去详情,详情页的视频播放被禁止。点击返回首页,首页的视频播放成功,再点击详情,详情页的视频播放成功。总结:首次进入的页面,不管是首页、详情还是其他页面,页面的播放都被禁止,再次进入,播放打开。
(2)小程序 安卓进去首页,首页的视频播放被禁止,点击进去详情,详情页的视频播放成功。点击返回首页,首页的视频播放成功,再点击详情,详情页的视频播放成功。(首页是分页数据,请求更多后,滚动后,有些视频播放还是被禁止,点击详情,详情的该视频播放成功,返回首页,首页的该视频又可以播放了。加载更多的数据同样效果)。
4.微信浏览器打开的 h5页面都没有成功。
迫切希望有大佬有没有有效的方法来实现效果。也欢迎关注此问题的人员理智讨论。
是浏览器做的限制,为了避免自动播放使用了 用户的流量。
之前有做jssdk onready后触发play。不确定现在是否依然可行
微信(不仅仅是微信)禁止无操作自动播放,这个没有任何办法。
视频加载后,用户滚动后也可以播放。
mounted() {
this.$nextTick(()=>{
let VideoScroll = document.getElementById(‘videoScroll’);
if (VideoScroll) {
VideoScroll.addEventListener(‘scroll’, this.checkVisibility, true);
setTimeout(() => {
this.checkVisibility()
},300);
}
})
this.$forceUpdate();
},
activated() {
this.currentPlaying = -1;
this.checkVisibility()
this.$forceUpdate();
},