笔者也是刚开始接触uniapp开发,如有错漏,欢迎讨论
笔者需要的布局是两个连续的video,不过我试了一下三个视频组件也可以做到只播放其中一个视频,代码如下:
<video src="txt1.mp4"
id="myVideo1"
autoplay
muted
loop
controls
show-mute-btn
auto-pause-if-open-native
poster="txt1.png"
auto-pause-if-navigate
style="width: 100%; height: 250rpx;"
@play="videoPlayHandle('myVideo1')">
</video>
<div class="video-gap"></div>
<video src="txt2.mp4"
id="myVideo2"
muted
loop
controls
show-mute-btn
auto-pause-if-open-native
auto-pause-if-navigate
poster="txt2.png"
style="width: 100%; height: 250rpx;"
@play="videoPlayHandle('myVideo2')">
</video>
videoPlayHandle方法代码如下:
methods{
videoPlayHandle(id){
let newVideo = uni.createVideoContext(id,this);
console.log("newvideo:"+JSON.stringify(newVideo));
newVideo.id = id;
if (!this.video) {
this.video = newVideo;
this.video.play();
console.log(JSON.stringify(this.video)+"播放");
return;
}
if (this.video.id !== newVideo.id) {
console.log("this.video.id = "+this.video.id + " newVideo.id = " + newVideo.id);
console.log("切换视频主体");
newVideo.play();
console.log("目前视频主体播放");
this.video.pause();
console.log("之前视频主体暂停");
this.video = newVideo;
console.log("播放主体切换");
}
},
}
一开始uni.createVideoContext()中只写了id,没有后面的this,所以明明下面的log输出都是对的,但是.pause一直无法实现,以后使用的时候uni.createVideoContext需要注意。
补充一个代码中看到的将video保存在数组中的只同时播放一个video的方法:
<!--视频-->
<view v-else-if="n.name=='video'">
<view v-if="(!loadVideo||n.lazyLoad)&&!(controls[n.attrs.id]&&controls[n.attrs.id].play)" :id="n.attrs.id" :class="'_video '+(n.attrs.class||'')"
:style="n.attrs.style" @tap="_loadVideo" />
<video v-else :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay||(controls[n.attrs.id]&&controls[n.attrs.id].play)"
:controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :poster="n.attrs.poster" :src="n.attrs.source[(controls[n.attrs.id]&&controls[n.attrs.id].index)||0]"
:unit-id="n.attrs['unit-id']" :data-id="n.attrs.id" data-from="video" data-source="source" @error="error" @play="play" />
</view>
/*play方法*/
method{
// #ifndef MP-ALIPAY
play(e) {
if (this.top.videoContexts.length > 1 && this.top.autopause)
for (var i = this.top.videoContexts.length; i--;)
if (this.top.videoContexts[i].id != e.currentTarget.dataset.id)
this.top.videoContexts[i].pause();
},
// #endif
}