评论

video组件 重复播放 IOS正常,Android只播放一次

video loop=“{{true}}” IOS正常,Android无效, 一种解决办法

一种解决思路:创建一个和video绑定的VideoContext实例,通过VideoContext控制video的播放。
1.给video绑定id,同时绑定ended事件(视频播放结束触发),data-name为VideoContext实例名称;videoSettings.loop可以设置为false,或者不定义
<video
                    id="video1"
                    class="rc-video"
                    object-fit="{{videoSettings.objectFit}}"
                    src="{{videoSettings.sources[0]}}"
                    controls="{{videoSettings.controls}}"
                    autoplay="{{videoSettings.autoplay}}"
                    loop="{{videoSettings.loop}}"
                    muted="{{videoSettings.muted}}"
                    show-progress="{{videoSettings.showProgress}}"
                    show-fullscreen-btn="{{videoSettings.showFullscreenBtn}}"
                    show-play-btn="{{videoSettings.showPlayBtn}}"
                    show-center-play-btn="{{videoSettings.showCenterPlayBtn}}"
                    enable-progress-gesture="{{videoSettings.enableProgressGesture}}"
                    bindended="videoEnd"
                    data-name="videoContext1"
                ></video>
2.在lifetimes的ready回调中将VideoContext与video1绑定,得到videoContext1实例。
lifetimes: {
    ready() {
      //video1实例
      if (!this.data.videoContext1) {
        this.setData({
          videoContext1: wx.createVideoContext('video1', this)
        });
        app.log("video1 实例化");
      }
     }
    }
3.视频播放结束后触发ended回调,此时通过VideoContext1实例调用play()方法重新播放视频。
//视频播放结束 => 重新播放
    videoEnd(ev) {
      const { name } = ev.currentTarget.dataset;
      app.log(`${name} 视频播放结束,重新播放`);
      if (this.data[name]) {
        this.data[name].play();
      } else {
        app.log(`未获取到${name}的实例,停止播放`);
      }
    },
最后一次编辑于  星期三 16:45  
点赞 0
收藏
评论
登录 后发表内容