y***@163.com
y***@163.com
  • 发布:2019-05-08 16:26
  • 更新:2020-04-20 17:42
  • 阅读:5896

uni-app video组件怎么会同时播放两个视频

分类:uni-app

uni-app video组件怎么会同时播放两个视频,播放第一个视频的时候点击第二个视频播放,第一个视频不会暂停,需要如何设置呢?

2019-05-08 16:26 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

export default {  
  data(){  
    return {  
      video:null  
    }  
  },  
  onLoad(){  
    let video= uni.createVideoContext()  
    this.video= video;  
  },  
  methods:{  
    handle(){  
      // 检测 this.video 的值  
      // 停止播放  
      // do something ...  
    }  
  }  
}
  • 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();


    		}  
    this.video = newVideo;

    },

    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

y***@163.com

y***@163.com (作者) - 智科研学淘

有人知道怎么解决吗

9***@qq.com

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>
  • 1***@qq.com

    swiper有个current属性,当视频播放完成以后current+1即可


    2019-08-02 10:06

4***@qq.com

4***@qq.com - 11111111111111111

1111

思达通

思达通 - 思达通

@ended="autoNext" 在小程序端有效,在app开发中无效

风云杭州

风云杭州

关注,也遇到这个问题

该问题目前已经被锁定, 无法添加新回复