Taro开发小程序之视频组件的使用

使用的Taro开发要注意的地方

Taro 是一套遵循 React 语法规范的 多端开发 解决方案

创建 video上下文 VideoContext对象
wx.createVideoContext(string id, Object this)
在自定义组件下，要获取当前组件实例的this，以操作组件内video组件
如果Video放在了自定义的函数组件中，那是无法获取到this的，自定义的组件要使用类组件。

同一个页面允许的Video组件个数

在一个小程序页面中，不建议同个页面使用多个Video组件，建议不超过3个Video，如果要实现更多的Video功能或在Swiper中使用轮播视频，要进行优化（选中时将Image替换成Video），也就是说把Video组件先换为Image组件，用一张视频播放前的图片代替，点击时再更换为Video，可以把Video设置为autoplay，这样点击图片便会播放对应的视频，滑动轮播图的事件中要停止调上一个视频（最好是把图片改回去，不然安卓系统会出现仍在播放的问题）；避免了页面中出现过多的Video组件。

<Swiper  onChange={this.handleChange}>
    {
            swiperVideoUrl[page].urlArr.map((item) => {
                return (
                  <SwiperItem key={item.id} item-id={item.id}>
                    {
                      this.state.currentIndex === item.id ? 
                        <View className="video-processor">
                          <Video
                            className="bottom-video"
                            onPlay={this.handleBindPlay}
                            src={item.url}
                            controls
                            autoplay
                            id={'video' + item.id}
                            loop={false}
                            showFullscreenBtn={false}
                            onTimeUpdate={this.handleTimeupdate}
                            onEnded={this.handleVideoEnd}
                            autoPauseIfNavigate
                            autoPauseIfOpenNative
                            enable-progress-gesture={false}
                          />
                          <View className="process-bar-group">
                            <View className={this.state.isPlaying ? 'icon icon-pause' : 'icon icon-play'} onClick={this.changeBtnStatus} />
                            <View className="currentTime">{this.props.onParseTime(this.state.process)}</View>
                            <View id="process-box" className="process-and-btn">
                            </View>
                            // 视频的结束时间
                            <View className="duration">{this.props.onParseTime(item.duration)}</View>
                          </View>
                        </View> :
                        <Image 
                          onClick={() => this.handleClick(item.id)} 
                          className="mask-img" 
                          src={item.imgUrl}
                        /> 
                    }
                  </SwiperItem>
                );
              })
            }
          </Swiper>

通过videoContext对象停止视频后的操作

自定义进度条的情况下(项目中使用的是自定义进度条)
由于视频停止后仍然会监听一段时间onTimeUpdate，为了避免这段监听对切换后的下一个视频造成不必要的影响。我们需要在videoContext.stop()后使用nextTick()延迟一部分操作到下一个时间片再执行。（类似于 setTimeout）。nextTick并不确定具体的执行时间，如有必要，可以使用setTimeout代替。

 // 视频停止后的操作
  handleVideoEndCallBack = () => {
    this.state.videoContext && this.state.videoContext.stop();
    // 由于视频top()后,仍然会监听一会播放的状态,导致进度条不置0
    // 使用setTimeout;延迟一部分操作到下一个时间片再执行 
    setTimeout(() => {
      this.setState({ isPlaying: false, process: 0 });
      this.state.videoContext && this.state.videoContext.seek(0);
    }, 200);
  }

不同的Video在不同的组件中的交互情况(只允许一个视频在播放)

点击上方的视频，下方组件中的视频就要停止掉。可以使用this.videoContext或this.state.videoContext保存对象，通过在父组件中使用ref来获取进而操作Video的播放停止。

2020-04-15