提交 2a400cd3 编写于 作者: DCloud_JSON's avatar DCloud_JSON

更新 示例项目 swiper-vertical-video 去掉import { VideoNode } from...

更新 示例项目 swiper-vertical-video 去掉import { VideoNode } from "uts.sdk.modules.DCloudUniVideo"...改成uni.createWebviewContext...
上级 4d2c0c44
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
</view> </view>
<swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange" @transition="onTransition"> <swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange" @transition="onTransition">
<swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i"> <swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i">
<video ref="video" class="video-box" objectFit="cover" :id="item._id" @loadstart="onLoadstart(i)" :src="item.src" :poster="item.poster_src" :show-center-play-btn="false" :autoplay="false" :controls="false" :loop="true" @play="onPlay(i)" @pause="onPause(i)"></video> <video ref="video" class="video-box" objectFit="cover" :id="'video-'+i" @loadstart="onLoadstart(i)" :src="item.src" :poster="item.poster_src" :show-center-play-btn="false" :autoplay="false" :controls="false" :loop="true" @play="onPlay(i)" @pause="onPause(i)"></video>
<view class="video-cover" @click="changeState(i)"> <view class="video-cover" @click="changeState(i)">
<image v-if="state[i] === 'pause'" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image> <image v-if="state[i] === 'pause'" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image>
</view> </view>
...@@ -22,7 +22,6 @@ ...@@ -22,7 +22,6 @@
</view> </view>
</template> </template>
<script> <script>
import { VideoNode } from "uts.sdk.modules.DCloudUniVideo";
type ListItem = { _id : string, content : string, src : string, poster_src : string } type ListItem = { _id : string, content : string, src : string, poster_src : string }
let page : number = 0, let page : number = 0,
currentPageIsShow : boolean = true; currentPageIsShow : boolean = true;
...@@ -31,6 +30,7 @@ ...@@ -31,6 +30,7 @@
components: {}, components: {},
data() { data() {
return { return {
$videoContextMap:new Map<string, VideoContext>(),
list: [] as ListItem[], list: [] as ListItem[],
visibleList: [] as ListItem[],// 提高性能 可见的只有3个 visibleList: [] as ListItem[],// 提高性能 可见的只有3个
current: 0 as number, current: 0 as number,
...@@ -106,22 +106,33 @@ ...@@ -106,22 +106,33 @@
}, },
onLoadstart(index : number) { onLoadstart(index : number) {
console.error("onLoadstart video" + index ); console.error("onLoadstart video" + index );
},
getVideoContext(index : number) : VideoContext{
let videoContext : VideoContext | null = this.$videoContextMap.get('video-'+index)
if(videoContext == null){
videoContext = uni.createVideoContext('video-'+index, this) as VideoContext
this.$videoContextMap.set('video-'+index,videoContext)
}
return videoContext
}, },
doPlay(index : number) { doPlay(index : number) {
// console.log("doPlay video" + index,(this.$refs["video"] as VideoNode[])[0] ); console.log("doPlay video" + index );
(this.$refs["video"] as VideoNode[])[index].play() this.getVideoContext(index).play()
}, },
doStop(index : number) { doStop(index : number) {
(this.$refs["video"] as VideoNode[])[index].stop() console.log("doStop video-" + index);
console.log("doPause video-" + index);
// this.getVideoContext(index).stop()
// TODO 临时方案:解决.stop()时触发了doPause的问题 // TODO 临时方案: 暂不支持stop(),先调用暂停并将播放时间归零
this.getVideoContext(index).pause()
this.getVideoContext(index).seek(0)
setTimeout(()=>{ setTimeout(()=>{
this.state[index] = 'unPlay' this.state[index] = 'unPlay'
},1000) },1000)
}, },
doPause(index : number) { doPause(index : number) {
(this.$refs["video"] as VideoNode[])[index].pause() this.getVideoContext(index).pause()
console.log("doPause video-" + index); console.log("doPause video-" + index);
}, },
onPause(index : number) { onPause(index : number) {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册