3***@qq.com
3***@qq.com
  • 发布:2020-06-09 17:01
  • 更新:2020-06-09 17:01
  • 阅读:2171

uniapp视频组件 在做列表切换后 播放按钮和controls栏消失 小程序端

分类:uni-app

预览地址
预览地址

附上代码 后来加上剧中按钮属性还是解决不了

<template>  
	<view>  
		<view class="uni-padding-wrap uni-common-mt">  
			<view>  
				<video id="myVideo" :src="playVideo" @error="videoErrorCallback" controls @loadedmetadata="loading" @pause="pause" :show-center-play-btn="showCenterPlayBtn" @waiting="waiting" @controlstoggle="controlstoggle">  
					<cover-view class="controls-title">{{videoTit}}</cover-view>  
					<cover-view class="videoPro">{{videoPro}}</cover-view>  
				</video>  
			</view>  
			<view v-for="(item,index) in videoList" :key="index">  
				<view class="videoTlt">  
					<text>{{item.contant}}</text>  
				</view>  
				<view v-for="(videoLi,videoIndex) in item.list" :key="videoIndex" class="videoList" :class="{'actVideo':actId==videoLi.id}">  
					<text @click="changeVideo(videoLi.videoUrl,videoLi.title,videoLi.id)">{{videoLi.title}}</text>  
				</view>  
			</view>  
			<button @tap="test">click me</button>  
		</view>  
	</view>  
</template>  
  
<script>  
	import videoLi from '../../testData/videoList.js';  
	export default {  
		data() {  
			return {  
				title: 'Hello',  
				playVideo: '',  
				videoTit: '',  
				actId:0,  
				videoPro:'',  
				videoContext:null,  
				isPlay:false,  
				showCenterPlayBtn:true,  
				videoList: []  
			}  
		},  
		onLoad() {  
			// console.log(videoList);  
		},  
		onReady: function(res) {  
			this.videoList = videoLi.videoList  
			this.playVideo = this.videoList[0].list[0].videoUrl  
			this.videoTit = this.videoList[0].list[0].title  
			this.actId = this.videoList[0].list[0].id   
			this.videoContext = uni.createVideoContext('myVideo',this)  
		},  
		methods: {  
			videoErrorCallback: function(e) {  
				// uni.showModal({  
				// 	content: e.target.errMsg,  
				// 	showCancel: false  
				// })  
			},  
			changeVideo: function(videoUrl,title,id) {  
				console.log(videoUrl);  
				console.log(this.videoContext);  
				if (this.playVideo===videoUrl) {  
						this.videoContext.pause()  
						this.showCenterPlayBtn=true  
				} else{  
					this.videoContext.stop();  
				console.log(this.videoContext);  
					this.videoContext = uni.createVideoContext('myVideo',this)  
					this.showCenterPlayBtn=true  
					this.playVideo = videoUrl  
					this.videoTit = title   
					this.actId = id   
					this.videoContext.play();  
				}  
			},  
			loading:function(res){  
				console.log(res);  
			},  
			pause:function(res){  
				console.log(res);  
			},  
			waiting:function(res){  
				console.log(res);  
			},  
			controlstoggle:function(res){  
				console.log(res);  
			},  
			test: function() {  
				var self = this;  
				self.videoContext.stop()  
				uni.chooseVideo({  
					count: 1,  
					sourceType: ['camera', 'album'],  
					success: function(res) {  
						console.log(res);  
						self.videoTit = res.name || "视频预览"  
						self.actId = ''   
						self.playVideo = res.tempFilePath;  
					}  
				});  
			}  
		}  
	}  
</script>  
  
<style>  
	video {  
		width: 100%;  
		margin-bottom: 30rpx;  
	}  
  
	.videoTlt {  
		margin-bottom: 12rpx;  
	}  
  
	.videoList {  
		color: #777777;  
		font-size: 32rpx;  
		margin-bottom: 10rpx;  
	}  
	.controls-title{  
		color: #ffffff;  
		text-align: center;  
		padding-top: 40rpx;  
		font-size: 24rpx;  
	}  
	.actVideo{  
		color: #007AFF;  
	}  
</style>  

2020-06-09 17:01 负责人:无 分享
已邀请:

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