uniapp 多个视频时播放当前视频暂停其他视频解决方案

10 篇文章 0 订阅
4 篇文章 0 订阅

<template>
	<view class="video-content">
		<!-- <topNavbar  title="用户口碑" isIcon titilePosition="left" @clickIcon="navToBack">
		</topNavbar> -->
		<view class="main"  v-for="item in videoList" :key="item.id">
			<view class="video-box">
				<video  :data-id="item.id" :key="item.id" :id="'video'+item.id" class="video" title="产品介绍" :src="item.videoUrl"
				 controls show-mute-btn :poster="item.coverUrl"
				 @play="playVideo"
				 @error="videoErrorCallback" 
				 >
				</video>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import {videoList} from './videoList.js'
	export default {
		data() {
			return {
				videoList:videoList
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo',this)
		},
		methods: {
			navToBack(){
				this.$api.backPage()
			},
			playVideo(e){
				let _this = this;

				let currentId = 'video' + e.currentTarget.dataset.id;// 获取当前视频id
				
				this.videoContent = uni.createVideoContext(currentId,_this).play();
				
				// 获取视频列表
				let trailer = this.videoList;
				trailer.forEach((item, index) =>{	// 获取json对象并遍历, 停止非当前视频
					if (item.videoUrl != null && item.videoUrl != "") {
						let temp = 'video' + item.id;
						if (temp != currentId) {
							// 暂停其余视频
							uni.createVideoContext(temp,_this).pause(); //暂停视频播放事件
						}
					}
	 
				})

			},
			// 视频错误信息回调
			 videoErrorCallback(e) {
				
			 },
		}
	}
</script>

关键代码

playVideo(e){
	let _this = this;

		let currentId = 'video' + e.currentTarget.dataset.id;// 获取当前视频id
		
		//播放选中视频
		this.videoContent = uni.createVideoContext(currentId,_this).play();
		
		// 获取视频列表
		let trailer = this.videoList;
		trailer.forEach((item, index) =>{	// 获取json对象并遍历, 停止非当前视频
			if (item.videoUrl != null && item.videoUrl != "") {
				let temp = 'video' + item.id;
				if (temp != currentId) {
					// 暂停其余视频
					uni.createVideoContext(temp,_this).pause(); //暂停视频播放事件
				}
			}

		})

	},
  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
可以通过以下步骤实现每次只有一个视频播放,其他的在暂停: 1. 在每个video组件上添加一个id属性,用来标识不同的视频组件。例如: ```html <video :src="video1" id="video1"></video> <video :src="video2" id="video2"></video> ``` 2. 在data中添加一个变量,用来保存当前正在播放视频组件的id。初始值为null。 ```js data() { return { currentVideoId: null } } ``` 3. 在每个video组件上绑定一个play事件和pause事件,用来更新currentVideoId的值。 ```html <video :src="video1" id="video1" @play="onPlay('video1')" @pause="onPause('video1')"></video> <video :src="video2" id="video2" @play="onPlay('video2')" @pause="onPause('video2')"></video> ``` ```js methods: { onPlay(videoId) { if (this.currentVideoId && this.currentVideoId !== videoId) { // 如果当前有正在播放视频,并且不是当前触发的视频,则暂停当前视频 const currentVideo = uni.createVideoContext(this.currentVideoId) currentVideo.pause() } this.currentVideoId = videoId }, onPause(videoId) { if (this.currentVideoId === videoId) { // 如果暂停视频当前正在播放视频,则清空currentVideoId this.currentVideoId = null } } } ``` 4. 在mounted生命周期钩子中,获取所有video组件的id,并将其保存到一个数组中。 ```js mounted() { this.videoIds = this.$el.querySelectorAll('video').map(v => v.id) } ``` 完整代码如下: ```html <template> <view> <video :src="video1" id="video1" @play="onPlay('video1')" @pause="onPause('video1')"></video> <video :src="video2" id="video2" @play="onPlay('video2')" @pause="onPause('video2')"></video> </view> </template> <script> export default { data() { return { videoIds: [], currentVideoId: null, video1: 'http://example.com/video1.mp4', video2: 'http://example.com/video2.mp4' } }, mounted() { this.videoIds = this.$el.querySelectorAll('video').map(v => v.id) }, methods: { onPlay(videoId) { if (this.currentVideoId && this.currentVideoId !== videoId) { // 如果当前有正在播放视频,并且不是当前触发的视频,则暂停当前视频 const currentVideo = uni.createVideoContext(this.currentVideoId) currentVideo.pause() } this.currentVideoId = videoId }, onPause(videoId) { if (this.currentVideoId === videoId) { // 如果暂停视频当前正在播放视频,则清空currentVideoId this.currentVideoId = null } } } } </script> ```
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值