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

6
components/commentsList.vue
View File

@@ -1,15 +1,15 @@
<template>
<view class="">
<view class="box">
<view class="box" v-if="sayList && sayList.length > 0">
<view class="firstLeve flexbox leve" v-for="(item, index) in sayList" :key="index" style="flex-wrap: wrap;">
<view class="imgbox" :style="getBackGround(item.user.avatar)">
<view v-if="item.user && item.user != null && item.user != 'null'" class="imgbox" :style="getBackGround(item.user.avatar)">
<view class="img">
<!-- <image :src="item.user.avatar" mode="aspectFit" style="width: 80rpx; height: 80rpx;"></image> -->
</view>
</view>
<view class="contentBox contentBoxfirstLeve">
<view class="name">
<view class="name" v-if="item.user && item.user != null && item.user != 'null'">
{{item.user.name == '' ? '暂无昵称': item.user.name}}
</view>
<view class="content" v-if="item.content != ''">

10
config/requestConfig.js
View File

@@ -85,10 +85,12 @@ $http.getAliToken = function(callback) {
//请求开始拦截器
$http.requestStart = function(options) {
// console.log("请求开始", options);
if (options.load && options.data.loadAnimate != 'none') {
//打开加载动画
store.commit("setLoadingShow", true);
}
// if (options.load && options.data.loadAnimate != 'none') {
// //打开加载动画
// store.commit("setLoadingShow", true);
// }
// delete(options.loadAnimate)
// console.log('options',options);
// 图片、视频上传大小限制
if (options.method == "FILE") {
// 文件最大字节: options.maxSize 可以在调用方法的时候加入参数

4
manifest.json
View File

@@ -12,8 +12,8 @@
"src" : "图片路径"
}
],
"versionName" : "1.0.11",
"versionCode" : 1011,
"versionName" : "1.0.12",
"versionCode" : 1012,
"app-plus" : {
"nvueCompiler" : "weex",
"compatible" : {

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>

35
pages/course/chapterDetail.vue
View File

@@ -453,33 +453,6 @@ export default {
}
console.log("data at line 380111111111111111111:", data.type);
// var mynavData = JSON.stringify(data); // 这里转换成 字符串
// if (data.type == 0 || data.type == 2) {
// //1 mp4 2 mp3
// uni.navigateTo({
// url: `/pages/curriculum/order/curriculum/videoDetail?data=${mynavData}`,
// });
// } else if (data.type == 1) {
// //视频云点播
// uni.navigateTo({
// url: `/pages/curriculum/order/curriculum/videoDetailOss?data=${mynavData}`,
// });
// }
// else if (data.type == 2) {
// //mp3
// this.isOpenMp3 = true;
// this.$nextTick(() => {
// this.$refs.mp3Detail.init({ data: mynavData });
// });
// }
// uni.navigateTo({
// // url: '../bookShop/commodityDetail?id=' + item.id
// url: `/pages/curriculum/order/curriculum/detail?navTitle=${v.title}&title=${v.title}&oid=${v.oid}`,
// });
},
hancleModalCancel() {
this.show = false;
@@ -497,13 +470,7 @@ export default {
customerOid: uni.getStorageSync("customerOid"),
...this.taiHuClassInfo,
},
};
// $mars.progressBegin('申请中...');
// $mars.post(customerType, 'applyRelearn', data, function (ret) {
// api.hideProgress();
// fnLoadDataGrid();
// });
};
},
//课程详情

157
pages/course/chapterDetailAndorid.vue
View File

@@ -27,15 +27,6 @@
<view style="height: 200px" v-else></view>
</view>
<!-- <common-sticky
style=""
itemStyle="width:auto; height: 80rpx;font-size:20rpx;color:#fff"
:list="ordersTabs"
label="name"
:currentCateIndex="currentCateIndex"
@handleselectCate="ordersTabCLi"
></common-sticky> -->
<scroll-view
:style="`height:calc(100% - 200px - 40rpx) ;`"
scroll-y="true"
@@ -90,141 +81,7 @@
<p class="aui-text-danger" style="text-align: center">
本课程版权归天津众妙之门科技有限公司所有，翻版必究!
</p>
<!-- <view class="small_class_teaching_box" v-if="medicalCasesList.length > 0">
<view class="small_class_teaching_top">
<view class="small_class_teaching_top_left">
<image
src="@/static/icon/course_ic.png"
mode="aspectFil"
class="icon1"
></image>
<text>相关医案</text>
</view>
</view>
<view class="small_class_teaching_content"> </view>
</view>
<view
class="small_class_teaching_box related_courses_box"
v-if="relatedCoursesList.length > 0"
>
<view class="small_class_teaching_top">
<view class="small_class_teaching_top_left">
<image
src="@/static/icon/course_ic.png"
mode="aspectFil"
class="icon1"
></image>
<text>相关课程</text>
</view>
</view>
<view class="small_class_teaching_content">
<common-curriculum-list
imgUrl="url"
:isCondition="true"
:dataList="relatedCoursesList"
@hancleClick="goCourseDescription"
label="title"
>
<template slot="labelSlot" slot-scope="slotProps">
<view class="related_courses_name hidden1">{{
slotProps.row.title
}}</view>
</template>
<template slot="rightSlot" slot-scope="slotProps">
<text class="aui-text-danger">
￥{{ slotProps.row.courseFee }}</text
>
<view> </view>
</template>
</common-curriculum-list>
</view>
</view>
<view
class="small_class_teaching_box correlation_box"
v-for="(v, i) in correlationiList"
>
<view class="small_class_teaching_top">
<view class="small_class_teaching_top_left">
<template v-if="v.iconType == 'uni'">
<uni-icons
:type="v.icon"
:color="v.color ? v.color : '#71d5a1'"
:size="v.iconSize"
style="display: inline-block; margin-right: 10rpx"
></uni-icons>
</template>
<template v-else>
<u-icon
:name="v.icon"
:color="v.color ? v.color : '#71d5a1'"
:size="v.iconSize"
style="display: inline-block; margin-right: 10rpx"
></u-icon>
</template>
<text
:style="`color:${v.color ? v.color : '#71d5a1'}`"
class="title"
>{{ v.name }}</text
>
</view>
<view class="small_class_teaching_top_right"
><text
:style="`color:#b0b0b0`"
class="more"
@click="handleClickMore(v, i, true)"
v-show="!v.isOpen"
v-if="v.type != 'dashang'"
>查看全部</text
>
</view>
</view>
<view
:class="`small_class_teaching_content dianzan_box ${
v.isOpen ? '' : 'hidden5'
}`"
v-if="v.type == 'dianzan'"
>
{{ praise }}
</view>
<view
:class="`small_class_teaching_content dianzan_box ${
v.isOpen ? '' : 'hidden5'
}`"
v-if="v.type == 'pinglun'"
>
<view v-for="(item, index) in commentLst">
<text>{{ item.name }}:</text>
<text>{{ item.content }}</text>
</view>
</view>
<view
:class="`small_class_teaching_content dianzan_box dashang_box ${
v.isOpen ? '' : 'hidden5'
}`"
v-if="v.type == 'dashang'"
>
<rich-text :nodes="reward"></rich-text>
</view>
<view
@click="handleClickMore(v, i, false)"
class="close"
v-show="v.isOpen"
>收起
<u-icon
name="arrow-up"
color="#b0b0b0"
size="18"
style="display: inline-block; margin-left: 10rpx"
></u-icon>
</view>
</view> -->
</view>
</template>
@@ -239,17 +96,7 @@
"
v-show="screenLoading"
>
</view>
<!-- <u-modal
:show="show"
:title="modalInfo.title"
:content="modalInfo.content"
showCancelButton
@confirm="hancleModalConfirm"
@cancel="hancleModalCancel"
></u-modal> -->
<!-- <z-navigation></z-navigation> -->
</view>
</view>
</template>