interval="10000"
@change="swiperChange"
>
<swiper-item
class="swiper-item"
v-for="(page, index) in videoCotent.contentFiles" key="index" style="overflow: hidden;"
style="getItemStyleInnervideo()"
<video
v-show=" index == currentDot" poster="page.coverAccessUrl"
@pause="pauseCurrent"
@ended="endedCurrent"
class="item-video"
style="position: relative;"
controls
show-progress enable-play-gesture="false"
preload="true"
webkit-playsinline="true"
playsinline="true"
x5-video-player-type="app"
x5-video-orientation="portraint"
x-webkit-airplay="true"
x5-video-player-fullscreen=""
>
<cover-view
style="color: #3b91f8; z-index: 99999"
class="slide-image"
></cover-view>
</video>
</swiper-item>
</swiper>
<view class="next-icon" @tap="handleNext()">
<uni-icons type="forward" size="20"></uni-icons>
</view>
<!-- <video v-show="isShow" :src="videoCotent.contentFiles[currentDot].fileAccessUrl" controls style="position: absolute;width: 80%;height: 100%;margin: 0 auto;"></video> --> </view>
</template>
<script>
import {baseUrl} from '@/common/js/config.js' //配 置接口域名
import uniIcons from '../../components/uni-icons/uni-icons.vue'
export default {
props:{
item:Object,
size:Number,
},
components:{
uniIcons,
},
data() {
return {
parmas:{
Id: "",
TenantId:uni.getStorageSync('tenantId'),
CampusId: uni.getStorageSync('campusId')
},
videoCotent:{
contentFiles:[]
},
currentDot:0,
itemdata:{},
currentVideo:"", //当前播放的视频
currentCovey:"",
autoplay:false,
nextTimestamp:null, //下一次刷新时间
controls:true,
stopTouchMove:false,
isShow:false,
ctxList: [] // 存储canvas的上下文对象列表
}
},
mounted() {
this.itemdata = this.item;
this.nextTimestamp = Date.now() + this.itemdata.refresh 60 1000;
this.initData("change");
this.handleTimer();
},
created() {
// 创建视频实例指向视频控件
this.videoContext = uni.createVideoContext("myVideo");
},
watch:{
'item':function(val){
console.log(val,"视频组件监听到变化值")
this.itemdata=val;
this.nextTimestamp = Date.now() + this.itemdata.refresh * 60 * 1000;
this.initData("change");
},
},
methods:{
initCanvas() {
console.log(this.videoCotent.contentFiles.length, "66666666666666666666");
if (this.videoCotent && this.videoCotent.contentFiles.length > 0) {
console.log('this.videoCotent:', this.videoCotent);
this.videoCotent.contentFiles.forEach((item, index) => {
const query = uni.createSelectorQuery().in(this); // 创建选择器查询
query.select('#canvas' + index).context((res) => {
if (res) {
const ctx = res.context; // 获取canvas上下文对象
this.ctxList.push({ ctx, index }); // 将ctx和对应的索引存储到ctxList中
} else {
console.log('No result for selector:', '#canvas' + index);
}
}).exec();
});
}
console.log(this.ctxList, "ctxList的值");
},
drawCanvas() {
this.ctxList.forEach((item) => {
const ctx = item.ctx
const index = item.index
const videoUrl = this.videoList[index].url
const video = uni.createVideoContext('videoPlayer' + index, this) // 创建video上下文对象
video.play() // 播放视频
setTimeout(() => {
video.pause() // 在指定时间后暂停视频
}, 200) // 200毫秒，可以根据需求进行调整
// 在canvas上绘制视频内容
ctx.clearRect(0, 0, 200, 200) // 清空画布
ctx.drawImage(video, 0, 0, 200, 200) // 将video画到canvas上
})
},
//全局计时器统一 处理定时问题
handleTimer(){
setInterval(() => {
this.initData('normal');
}, 1000);
},
//初始化获取视频列表
initData(type){
let timestamp = Date.now();
if(type == 'change' || timestamp >= this.nextTimestamp){
// console.log(type == 'change',"视频接口判断条件1");
// console.log(this.nextTimestamp,"视频接口判断条件2");
this.parmas.Id = this.itemdata.columnContentId;
uni.request({
url: `${baseUrl}/api/device-column-content-open/column-content`,
method: 'GET',
data: this.parmas,
success: res => {
this.videoCotent = res.data;
this.autoplay = this.videoCotent.playType === 0 ? true : false;
this.nextTimestamp = Date.now() + this.itemdata.refresh * 60 * 1000;
// console.log(res,this.nextTimestamp,"视频接口返回下次调接口时间");
// this.initCanvas() // 在页面挂载后进行canvas的初始化
},
fail: (err) => {
console.log(err,"失败");
},
});
}
},
//swiper滑动
swiperChange(e){
let {current, source} = e.detail
//只有页面自动切换，手动切换时才轮播，其他不允许
if(source === 'autoplay' || source === 'touch'){
this.currentDot = current;
}
},
//获取外部样式
getItemStyleInner(){
return {
width: this.itemdata.w*this.size - 20 + 'px',
height: this.itemdata.h*this.size -20 + 'px',
overflow:'hidden'
};
},
//获取内部样式
getItemStyleInnervideo(){
return {
width: this.itemdata.w*this.size - 80 + 'px',
height: this.itemdata.h*this.size -20 + 'px',
};
},
//点击上一个视频
handlePrev(){
let length = this.videoCotent.contentFiles.length;
if(this.currentDot == 0){
this.currentDot = length - 1;
}else{
this.currentDot --;
}
},
//点击下一个视频
handleNext(){
let length = this.videoCotent.contentFiles.length;
if(this.currentDot == length-1){
this.currentDot = 0
}else{
this.currentDot ++;
}
},
//播放视频
playCurrent(){
console.log("点击播放视频");
this.isShow = true;
this.stopTouchMove = true
this.autoPlay = false
},
//暂停视频
pauseCurrent(){
this.autoplay = this.videoCotent.playType === 0 ? true : false;
this.isShow = false;
},
//播放结束
endedCurrent(){
this.autoplay = this.videoCotent.playType === 0 ? true : false;
this.controls = false
this.isShow = false
this.stopTouchMove = false
},
}
} </script>
<style>
.show-box{
width:calc(100% - 20px);
height:calc(100% - 20px);
margin: 10px;
}
.middle-box{
width: 100%;
height: 100%;
background: #fff;
border-radius: 6px;
}
.inner-box{
width: 100%;
height: 100%;
margin-top: 10px;
display:flex;
justify-content: space-between;
align-items: center;
}
.prev-icon{
width:20px;
}
.next-icon{
width:20px;
text-align: left;
}
.mid-video{
position: relative;
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: 10px;
}
.video-play{
position:absolute;
width:100%;
height: 100%;
top:0;
left: 0;
}
.warp-container{
position: relative;
height:100%;
flex: 1;
overflow-y: scroll;
display:flex;
justify-content: space-between;
overflow: hidden;
align-items: center;
background: #ccc;
z-index: 1 !impotant;
}
.item-video{
width: 100%; /* 设置固定宽度 */
height: 100%; /* 设置固定高度 */
object-fit: cover; /* 根据实际需要调整 */
z-index: -1 !impotant; /* 调整z-index属性 */
position: relative;
} </style>
0 个回复