附上代码 后来加上剧中按钮属性还是解决不了
<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>
0 个回复