需求
视频交互：
-
用户wifi状态：视频自动播放（默认静音播放） 流量状态：视频界面有播放按钮，点击按钮可播放视频。
-
点击视频界面则视频停止播放，下方出现播放开关、进度条、声音开关，支持调节进度条 再次点击视频界面可重新播放，重新播放时进度条隐去。
-
页面滑动至视频下方，即完全看不见该视频界面，则视频播放停止。 视频尺寸750宽*420高。
componentWillMount () {
// 入口判断是否wifi条件访问小程序
let _this = this
Taro.getNetworkType({
success (res) {
if (res.networkType == 'wifi') {
_this.setState({
isWifi: true,
})
} else {
_this.setState({
isWifi: false,
})
}
}
})
}
// 请求视频资源接口
getData() {
let url = baseUrl + '/core-service/operation/types/list';
request({
url: url,
method: "get",
header: {
...getJsonHead(),
"content-type": "application/x-www-form-urlencoded"
},
data: {
}
}).then(res => {
let homePageVideo = res && Array.isArray(res.homePageVideo) ? res.homePageVideo : []
homePageVideo.filter((row, index) => {
row.controls = false
row.isPlay = false
// 返回首页如果视频存在，保持播放/暂停状态
if (this.state.homePageVideo && this.state.homePageVideo.length) {
this.state.homePageVideo.filter(item => {
if (item.operationId && item.operationId === row.operationId && item.linkUrl && item.linkUrl === row.linkUrl) {
row.controls = item.controls
row.isPlay = item.isPlay
row.IsExistVideo = true
}
})
}
})
this.setState({
homePageVideo: homePageVideo
},()=>{
homePageVideo.filter((row, index) => {
// wifi条件下自动播放第一条视频
if (index == 0 && this.state.isWifi && !row.IsExistVideo) {
Taro.createVideoContext('pageVideo' + 0).play()
row.controls = false
row.isPlay = true
}
})
this.setState({
homePageVideo: homePageVideo
})
});
}
}).catch(err => {
console.log(err);
});
}
// 视频位视频暂停
videoPauseByPosition = (index) => {
}
// 视频位视频播放
videoPlayByPosition = (index) => {
}
// 当播放到末尾时触发 ended 事件
videoEndedByPosition = (index) => {
if (this.state.homePageVideo[index].videoDuration) {
Taro.createVideoContext('pageVideo'+ index).seek(this.state.homePageVideo[index].videoDuration)
}
let mTout = setTimeout(() => {
this.state.homePageVideo[index].isPlay = false
this.state.homePageVideo[index].controls = true
this.state.homePageVideo[index].videoIsLast = true
Taro.createVideoContext('pageVideo'+ index).pause()
this.setState({
homePageVideo: this.state.homePageVideo
})
clearTimeout(mTout)
}, 100)
}
// 播放进度变化时触发
videoTimeupdateByPosition = (details, index) => {
if (details && details.detail && details.detail.duration && !this.state.homePageVideo[index].videoDuration) {
this.state.homePageVideo[index].videoDuration = Number(Math.floor(details.detail.duration))
this.setState({
homePageVideo: this.state.homePageVideo
})
}
}
// 视频点击事件
videoClickByPosition = (index) => {
if (Array.isArray(this.state.homePageVideo)) {
this.state.homePageVideo.filter((row, rowIndex) =>{
// 停止播放视频位其他视频
if (index === rowIndex) {
if (row.isPlay) {
row.isPlay = false
row.controls = true
row.videoIsLast = false
Taro.createVideoContext('pageVideo'+ index).pause()
} else {
row.isPlay = true
// row.controls = false
if (row.videoIsLast) {
Taro.createVideoContext('pageVideo'+ index).seek(0)
let mTout = setTimeout(() => {
Taro.createVideoContext('pageVideo'+ index).play()
clearTimeout(mTout)
}, 100)
} else {
Taro.createVideoContext('pageVideo'+ index).play()
}
row.videoIsLast = false
}
} else {
row.isPlay = false
row.controls = false
row.videoIsLast = false
Taro.createVideoContext('pageVideo'+ rowIndex).pause()
}
})
}
this.setState({
bannerData: this.state.bannerData,
homePageVideo: this.state.homePageVideo
}, () =>{
let myTimeout = setTimeout(() => {
if (this.state.homePageVideo[index].isPlay) {
this.state.homePageVideo[index].controls = false
} else {
// this.state.homePageVideo[index].controls = true
}
this.setState({
homePageVideo: this.state.homePageVideo
})
clearTimeout(myTimeout)
}, 3000)
})
}
onPageScroll(e) {
let query = Taro.createSelectorQuery();
let wh = Taro.getSystemInfoSync().windowHeight;//可视区域高度
if (this.state.homePageVideo && this.state.homePageVideo.length) {
this.state.homePageVideo.filter((row, index) => {
query
.select('#pageVideo' + index)
.boundingClientRect(rect => {
// 我查询的是包裹视频的元素，可根据需求
if (rect) {
let top = rect.top;//距离顶部高度
let bottom = rect.bottom;
let vh = rect.height;//元素高度
// console.log('pageVideo' + index + '\t\ttop：' + top + '\t\tbottom：' + bottom + '\t\tvh：' + vh+ '\t\twh：' + wh)
if ((top < 0 && (top + bottom) <= 0) || top >= wh) {
//当视频不在可视范围内，停止播放
row.isPlay = false
row.controls = false
Taro.createVideoContext('pageVideo'+ index).pause()
this.setState({
homePageVideo: this.state.homePageVideo
})
}
}
})
.exec();
})
}
}
{
/*首页视频位*/}
{
Array.isArray(this.state.homePageVideo) && this.state.homePageVideo.length > 0 ?
<View className={
classnames('page-video-content')}>
{
this.state.homePageVideo.map((item, itemIndex) => (
<View key={
itemIndex} className='page-video-item'>
<Video
id={
`pageVideo${
itemIndex}`}
preload={
"auto"}
style={
{
width: '750rpx', height: '420rpx'}}
src={
item.linkUrl}
controls={
item.controls}
autoplay={
false}
showshowPlayBtnPlayBtn={
true}
showCenterPlayBtn={
false}
showFullscreenBtn={
false}
showMuteBtn={
true}
enableProgressGesture={
false}
playBtnPosition={
'bottom'}
direction={
90}
initialTime={
0}
loop={
false}
muted={
true}
objectFit={
'cover'}
onPause={
this.videoPauseByPosition.bind(this, itemIndex)
}
onPlay={
this.videoPlayByPosition.bind(this, itemIndex)
}
onEnded={
this.videoEndedByPosition.bind(this, itemIndex)
}
onTimeUpdate={
(details) =>{
this.videoTimeupdateByPosition(details, itemIndex)
}
}
>
{
!item.isPlay && !item.controls ?
<View className='page-video-control' onClick={
this.videoClickByPosition.bind(this, itemIndex, 'play')}>
<Image className='video-play-icon' src={
`${
imgCdn}/wowcolour/index/video-play-white.png`} />
</View> : '' }
{
item.isPlay || item.controls ?
<View className='play-video-control' onClick={
this.videoClickByPosition.bind(this, itemIndex, 'hide')}>
</View> : '' }
</Video>
</View>
))}
</View> : ''
}