收藏
回答

微信浏览器和小程序webview组件展示h5,现在究竟能不能实现自动播放video视频?

1.目前的需求是小程序页面中有视频的话,实现视图滚动出现在视图中会自动播放,其他视频关闭。通过微信浏览器打开的 h5页面同样需求。

2.实际操作,小程序通过webview嵌套加载h5网页,实现滚动视图中有视频的话自动播放视频, video设置了静音和使用video.play()、video.pause()播放方法。

3.实际效果:

(1)小程序 iOS (14pro)进去首页,首页的视频播放被禁止,点击进去详情,详情页的视频播放被禁止。点击返回首页,首页的视频播放成功,再点击详情,详情页的视频播放成功。总结:首次进入的页面,不管是首页、详情还是其他页面,页面的播放都被禁止,再次进入,播放打开。

(2)小程序 安卓进去首页,首页的视频播放被禁止,点击进去详情,详情页的视频播放成功。点击返回首页,首页的视频播放成功,再点击详情,详情页的视频播放成功。(首页是分页数据,请求更多后,滚动后,有些视频播放还是被禁止,点击详情,详情的该视频播放成功,返回首页,首页的该视频又可以播放了。加载更多的数据同样效果)。

4.微信浏览器打开的 h5页面都没有成功。

迫切希望有大佬有没有有效的方法来实现效果。也欢迎关注此问题的人员理智讨论。

回答关注问题邀请回答
收藏

2 个回答

  • 牲产队-朝酒晚舞
    牲产队-朝酒晚舞
    05-22

    是浏览器做的限制,为了避免自动播放使用了 用户的流量。

    之前有做jssdk onready后触发play。不确定现在是否依然可行

    05-22
    有用
    回复
  • hello world
    hello world
    05-22

    微信(不仅仅是微信)禁止无操作自动播放,这个没有任何办法。

    视频加载后,用户滚动后也可以播放。

    05-22
    有用
    回复 3
    • 如若菇凉
      如若菇凉
      05-22
      目前的是写了视频组件,监听div滚动判断播放的,这是视频组件的调用。
      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();
          },
      05-22
      回复
    • Wang富贵儿
      Wang富贵儿
      06-01回复如若菇凉
      这样能播放吗
      06-01
      回复
    • 如若菇凉
      如若菇凉
      星期五 00:29
      与预期效果不符合
      星期五 00:29
      回复
登录 后发表内容