uni-app video组件怎么会同时播放两个视频,播放第一个视频的时候点击第二个视频播放,第一个视频不会暂停,需要如何设置呢?
y***@163.com
- 发布:2019-05-08 16:26
- 更新:2020-04-20 17:42
- 阅读:6223
export default {
data(){
return {
video:null
}
},
onLoad(){
let video= uni.createVideoContext()
this.video= video;
},
methods:{
handle(){
// 检测 this.video 的值
// 停止播放
// do something ...
}
}
}
9***@qq.com - 90
(仿抖音)当一个视频播放结束后,自动切换到下一个视频,要怎么实现?
利用video标签 ended事件,我是用swiper包裹video标签实现的滑动切换视频效果,如何在触发@ended事件时让swiper滑动?
<template>
<view>
<swiper vertical="true" @change="swiperChange">
<swiper-item v-for="(item,index) in list" :key="index">
<view class="swiper-item">
<video :id="index" :src="item.thumb.img_arr.video" :poster="item.thumb.img_arr.jpg" controls objectFit="fill" @ended="autoNext">
</video>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
videoCur: 0,
video: null,
list: []
}
},
created() {
this.video = uni.createVideoContext(String(this.videoCur));
},
onload() {
this.video.play();
},
methods: {
swiperChange(e) {
let index = e.target.current;
this.videoCur = index;
let newVideo = uni.createVideoContext(String(index));
if (this.video !== newVideo) {
newVideo.play();
this.video.pause();
}
this.video = newVideo;
},
autoNext(){
//当前视频播放结束后,自动切换下一个视频
}
}
}
</script>
<style>
swiper {
width: 100%;
height: 100vh;
}
swiper-item video {
width: 100%;
height: 100vh;
display: block;
}
</style>
y***@163.com (作者)
你好,我没懂,我的逻辑是这样的,一组视频列表循环获取到,uni.createVideoContext() 需要传入参数video组件的id,用上面的代码获取到的this.video都是一样的。
2019-05-09 14:50
y***@163.com (作者)
谢谢,懂了,知道怎么做了。
2019-05-09 15:23
c***@qq.com
回复 y***@163.com: 怎么做到的? 可以把代码贴出来看一下吗?
2019-05-16 15:36
y***@163.com (作者)
回复 c***@qq.com:
handle(index){
// 检测 this.video 的值
// 停止播放
// do something ...
let newVideo = uni.createVideoContext(
${index}
);if(this.video !== newVideo) {
newVideo.play()
this.video.pause();
2019-05-16 15:54
c***@qq.com
回复 y***@163.com: 我的整个视频列表 都很卡,不知道什么原因,你遇到了吗?
2019-05-16 16:23
y***@163.com (作者)
回复 c***@qq.com: 没有哎,我的不卡。
2019-05-16 16:32
嗨翻咯
回复 y***@163.com: 请问一下,我的图文和视频混杂的列表,如何获取到正在播放视频的index,你的${index}这个是啥意思啊
2019-08-07 13:50
8***@qq.com
回复 y***@163.com: 作者请详细告知怎样做,怎样选中除正在播放外的所有视频???uni.createVideoContext()不传参就报错
2019-10-23 11:34