zm/medicine_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

视频组件 规范

Browse Source
This commit is contained in:
@fawn-nine
2024-07-24 16:43:26 +08:00
parent 172e0fa2be
commit 79f0b7461d
6 changed files with 112 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
pages/component/commonComponents/video/index.vue
View File

@@ -1,9 +1,7 @@
<template>
<view class="container" style="background-color: #000; position: relative">
<view style="width: 100%; height: 200px">
<view v-if="show" style="height: 100%;display: flex;align-items:center;justify-content:center;color: #fff;font-size: 38rpx;text-align: center;">
此设备暂不支持观看当前视频<br/>请移步到安卓手机进行学习！
</view>
<view v-if="show" style="height: 100%;display: flex;align-items:center;justify-content:center;color: #fff;font-size: 38rpx;text-align: center;">{{errorTxt}}</view>
<div class="" v-else style="background-color: #000" ref="videoContent" @tap="renderScript.handleClick"
id="url-player-test" :videoData="videoData" :winWidth="winWidth" :winHeight="winHeight"
:currentVideoList="currentVideoList" :firstTime="firstTime" :isfresh="isfresh" :platform="platform"
@@ -14,21 +12,21 @@
:change:isfresh="renderScript.receiveIsfresh" :change:platform="renderScript.receiveplatform"
:change:isChange="renderScript.receiveIsChange"
:change:currentVideoList="renderScript.receiveVideoList"></div>
<div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
<div @tap="renderScript.emitData" ref="videoContent1" v-show="false" class="videoContent1">
直接调用renderjs中的emitData的方法,传递当前播放时长
</div>
<div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false">
<div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false" class="videoContent2">
监听结束方法，记录播放时长
</div>
<div @tap="renderScript.changeVideoData" ref="videoContent3" v-show="false">
<div @tap="renderScript.changeVideoData" ref="videoContent3" v-show="false" class="videoContent3">
监听切换视频方法
</div>
<div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false">
<div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false" class="videoContent4">
监听切换视频方法
</div>
<div @tap="renderScript.emitopenShow" ref="videoContent5" v-show="false">
<div @tap="renderScript.emitopenShow" ref="videoContent5" v-show="false" class="videoContent5">
打开视频提示
</div>
<div class="fullScreenButton-container">
@@ -50,8 +48,7 @@
props: ["currentVideo", "currentVideoList","videoTitle"],
data() {
return {
show: false,
content: "此设备暂不支持观看当前视频，请移步到安卓手机进行学习！",
show: false,
platform: null,
//当前是否是全屏模式
isFullScreen: false,
@@ -70,6 +67,7 @@
isSetFirstTime: false,
screenType: null,
videoUrl: null,
errorTxt:'此设备暂不支持观看当前视频请移步到安卓手机进行学习！'
};
},
computed: {
@@ -91,10 +89,9 @@
beforeDestroy() {
this.handleEnd();
console.log("是否走啦习销毁");
clearInterval(this.$store.state.videoTimer);
// clearInterval(this.$store.state.videoTimer);
plus.screen.lockOrientation("portrait-primary");
console.log("是否走啦习销毁定时器", this.timer);
// console.log("是否走啦习销毁定时器", this.timer);
},
async onUnload() {
uni.navigateTo({
@@ -113,7 +110,8 @@
},
methods: {
openShow() {
openShow(data) {
data.msg ? this.errorTxt = data.msg : '此设备暂不支持观看当前视频请移步到安卓手机进行学习'
this.show = true;
},
start() {
@@ -211,7 +209,7 @@
},
// 存储本地播放时间
recordTime(data) {
// console.log('recordTime',data.time);
console.log('recordTime',data.time);
this.currentTime = data.time;
var list = [];
@@ -252,8 +250,7 @@
},
})
.then(async (res) => {
if (this.$platform == 'ios') {
console.log('不符合播放条件');
if (this.$platform == 'ios') {
if (this.currentVideo.type == 1 && res.video.m3u8Url == null || this.currentVideo.type == 1 && res.video.m3u8Url == '') {
// 只存在私有加密
this.show = true
@@ -272,9 +269,7 @@
}
var data = {
...res.video,
};
// console.log("/checkjieguo", data);
// return
};
if (this.currentVideo.type == 1) {
var playAuth = res.video.playAuth.replace(/=/g, "");
// console.log("这是接口获取的视屏凭证111", playAuth);
@@ -309,17 +304,19 @@
this.currentTime
);
await this.setVideoTime();
clearInterval(this.$store.state.videoTimer);
this.timer = null;
// clearInterval(this.$store.state.videoTimer);
// this.timer = null;
},
// 存储时长到线上
setVideoTime(time) {
var data = {};
console.log("是否走了存储视屏," + this.videoData.id, this.currentTime);
console.log("是否走了存储视屏," + this.videoData.id, time,this.currentTime);
let _time = null
time ? _time = time : _time = this.currentTime
var data = {
videoId: this.videoData.id,
position: this.currentTime, //秒数
loadAnimate: 'none',
position: _time, //秒数
// loadAnimate: 'none',
};
$http
@@ -335,30 +332,20 @@
.then((res) => {
console.log("存储视屏时长接口返回信息", res);
this.$forceUpdate();
}).catch(e => {
console.log("存储进度报错", e);
});
},
// changePlayerTime(player) {
// console.log("this.firstTime at line 106:", this.firstTime);
// player.seek(this.firstTime);
// },
},
goBack() {
uni.navigateBack({
delta: 1,
});
},
// 设置初始播放时间 并开启定时器
async setVideoFirtsetTime(time) {
async setVideoFirtsetTime(data) {
this.currentTime = this.firstTime;
console.log("这里准备开始设置播放时间:", this.currentTime);
store.commit(
"setVideoTimer",
setInterval(async () => {
// if (this.currentTime) {
await this.setVideoTime();
// }
}, 60000)
);
// }, 5000);
console.log("setVideoFirtsetTime播放时间:", data.time);
await this.setVideoTime(data.time);
},
},
@@ -368,6 +355,10 @@
<script module="renderScript" lang="renderjs">
var videoData = null
var _seconds = 0
var curStatus = null
var diff = 0
import $ from 'jquery'
export default {
components: {
@@ -382,19 +373,18 @@
return {
player: null,
videoTimer: null,
curTime: null,
// curTime: null,
// firstTime: null,
curStatus: null,
// curStatus: null,
// currentTime:null,
}
},
watch: {
curTime(val) {
if (this.curTime !== null && this.curStatus !== null) {
this.$refs.videoContent1.click()
}
}
// curTime(val) {
// if (this.curTime !== null && this.curStatus !== null) {
// this.$refs.videoContent1.click()
// }
// }
},
methods: {
handleClick(event, ownerInstance) {
@@ -402,47 +392,57 @@
},
emitData(event, ownerInstance) {
var that = this;
ownerInstance.callMethod('recordTime', {
time: that.curTime,
status: that.curStatus
time: _seconds,
status: curStatus
})
},
async receiveFirstTime(newValue, oldValue, ownerVm, vm) {
async receiveFirstTime(newValue, oldValue, ownerVm, vm) {
},
async receiveisSetFirstTime(newValue, oldValue, ownerVm, vm) {
console.log('是否刚开始设置播放时间', newValue, this.firstTime, this.player);
},
emitSetData(event, ownerInstance) {
var that = this;
// this.player.seek(this.firstTime)
console.log('是否设置的第一次初始播放', this.firstTime, this.videoData.id);
ownerInstance.callMethod('setVideoFirtsetTime')
// var that = this;
ownerInstance.callMethod('setVideoFirtsetTime',{
time: _seconds,
})
},
emitopenShow(event, ownerInstance) {
ownerInstance.callMethod('openShow')
ownerInstance.callMethod('openShow',{msg:'播放出错啦！'})
},
// 全屏切换事件
changeVideoScreen(event, ownerInstance) {
var that = this;
// this.$emit('changeScreenLoading',true)
var status = this.player.fullscreenService.getIsFullScreen();
ownerInstance.callMethod('screenChange', {
status: status,
primary: status ? 'portrait' : 'landscape'
})
console.log('this.$platform--------',this.platform);
if (this.platform != 'ios') { // 改变按钮形态
ownerInstance.callMethod('screenChange', {
status: status,
primary: status ? 'portrait' : 'landscape'
})
}
if (status) {
if (this.platform != 'ios') {
console.log('恢复竖版');
setTimeout(() => {
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
this.player.fullscreenService.cancelFullScreen();
}, 100);
}
} else {
this.player.fullscreenService.requestFullScreen();
setTimeout(() => {
plus.screen.lockOrientation("landscape-primary");
}, 100);
if (this.platform != 'ios') {
setTimeout(() => {
plus.screen.lockOrientation("landscape-primary");
}, 100);
}else{
console.log('不要旋转, 使用原生全屏');
}
}
},
changeVideoData(event, ownerInstance) {
@@ -461,7 +461,7 @@
$('#url-player-test').empty();
this.player = null;
}
var fullScreenButtonComponent = Aliplayer.Component({
var fullScreenButtonComponent = Aliplayer.Component({
/**
* 初始函数，在new对象时调用
*
@@ -506,11 +506,10 @@
* 隐藏广告
*/
playing: function(player, e) {
this.$html.show();
this.$html.show();
// this.$html.hide();
},
waiting: function(player, e) {
waiting: function(player, e) {
// this.$html.hide()
},
timeupdate: function(player, e) {},
@@ -658,15 +657,6 @@
this.player = player;
console.log('是否拿到第一次初始值呢', this.platform, typeof this.firstTime, this.firstTime)
clearInterval(this.videoTimer);
this.videoTimer = null;
this.videoTimer = setInterval(() => {
var that = this;
that.curTime = parseInt(this.player.getCurrentTime());
that.curStatus = this.player.getStatus()
}, 1000);
this.$refs.videoContent4.click()
player.on('ready', function() {
})
player.one('canplay', function() {
@@ -677,8 +667,30 @@
this.player.on('playing', function() {
console.log('正在播放')
})
this.player.on('ended', function() {
this.$refs.videoContent2.click()
this.player.on('timeupdate', function() {
let that = this
var _time = parseInt(player.getCurrentTime())
curStatus = player.getStatus()
// console.log('timeupdatetimeupdate...',curStatus);
if(_seconds != _time){
_seconds = _time
diff ++
if(diff % 60 === 0){
console.log('符合---------');
$('.videoContent4').click()
diff = 0
}
$('.videoContent1').click()
}
})
this.player.on('ended', function() {
console.log('播放完毕');
$('.videoContent2').click()
})
this.player.on('error', function() {
console.log('播放出错')
$('.videoContent5').click()
})
},
showPreview(e) {
@@ -713,12 +725,13 @@
console.log('是否走了刷新销毁方法:', this.player)
if (this.player) {
clearInterval(this.$store.state.videoTimer)
// clearInterval(this.$store.state.videoTimer)
// await this.setVideoTime();
this.player.dispose();
}
},
async receiveplatform(newValue) {
},
async receiveIsChange(newValue) {
if (this.isChange) {
@@ -743,6 +756,7 @@
//数据变化
console.log('newValue', newValue)
},
// 检测是否传入播放参数
checkValue() {
console.log(this.videoId, this.authId, this.videoData, "1111888888")
if ((!this.videoData.playAuth || !this.currentVideoList)) {
@@ -780,8 +794,7 @@
document.body.appendChild(l_tag);
});
},
loadComponent() {
}
}
}
</script>