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的播放停止。
