测试版
This commit is contained in:
liuyuan
250
pages/curriculum/order/videoDetail.vue
Normal file
250
pages/curriculum/order/videoDetail.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<view class="container commonPageBox commonDetailPage" style="position: relative;">
|
||||
<video
|
||||
@fullscreenchange="fullscreenchange"
|
||||
@timeupdate="videoTimeUpdateEvent($event)"
|
||||
ref="videos"
|
||||
style="width: 100%; height: 100%"
|
||||
autoplay
|
||||
id="videoId"
|
||||
|
||||
object-fit="contain"
|
||||
class="video-box"
|
||||
:src="videoUrl"
|
||||
:poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
|
||||
@play="playVideo"
|
||||
>
|
||||
</video>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import courseDescription from "@/pages/component/commonComponents/list";
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
components: {
|
||||
courseDescription, //课程说明
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
videoUrl: "",
|
||||
currentTime: 0,
|
||||
firstTime: 0,
|
||||
|
||||
options: {},
|
||||
videoData: {},
|
||||
isSetFirstTime: false,
|
||||
currentVideoTime: "", //初始播放时长（秒）
|
||||
urlList: {
|
||||
detail: "sociology/course/getCourseCatalogueChapterDetail",
|
||||
curriculumInfo: "app/phone.do?getCourseInfo",
|
||||
},
|
||||
};
|
||||
},
|
||||
async onUnload() {
|
||||
this.timer = null;
|
||||
// #ifdef APP-PLUS
|
||||
uni.navigateTo({
|
||||
url: "/pages/curriculum/order/back",
|
||||
});
|
||||
|
||||
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
|
||||
// #endif
|
||||
await this.setVideoTime();
|
||||
},
|
||||
onLoad(options) {
|
||||
// #ifdef APP-PLUS
|
||||
plus.screen.lockOrientation("landscape-primary");
|
||||
// #endif
|
||||
|
||||
this.options = JSON.parse(options.data);
|
||||
this.getLive();
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
var that = this;
|
||||
if (this.currentTime) {
|
||||
that.setVideoTime();
|
||||
}
|
||||
}, 60000 * 10);
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
// 播放进度改变
|
||||
videoTimeUpdateEvent(e) {
|
||||
console.log("e at line 78:", e);
|
||||
this.playTime = parseInt(e.detail.currentTime);
|
||||
this.allTime = parseInt(e.detail.duration);
|
||||
this.recordTime({
|
||||
time: this.playTime,
|
||||
});
|
||||
},
|
||||
|
||||
recordTime(data) {
|
||||
this.currentTime = data.time;
|
||||
console.log("data at line 54:", data);
|
||||
var list = [];
|
||||
if (uni.getStorageSync("videoList")) {
|
||||
list = JSON.parse(uni.getStorageSync("videoList"));
|
||||
}
|
||||
var index = list.findIndex((e) => e.id == this.videoData.id);
|
||||
if (list.length > 0 && index >= 0) {
|
||||
list[index] = {
|
||||
...this.videoData,
|
||||
|
||||
time: data.time,
|
||||
};
|
||||
} else {
|
||||
list.push({
|
||||
...this.videoData,
|
||||
time: data.time,
|
||||
});
|
||||
}
|
||||
|
||||
uni.setStorageSync("videoList", JSON.stringify(list));
|
||||
},
|
||||
//是否全屏
|
||||
fullscreenchange(e) {
|
||||
if (!e.target.fullScreen) {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
getData(data) {
|
||||
if (!this.isSetFirstTime) {
|
||||
var netWork = this.videoData.userCourseVideoPositionEntity
|
||||
? this.videoData.userCourseVideoPositionEntity.position
|
||||
: 0;
|
||||
var list = [];
|
||||
if (uni.getStorageSync("videoList")) {
|
||||
list = JSON.parse(uni.getStorageSync("videoList"));
|
||||
}
|
||||
var index = list.findIndex((e) => e.id == this.videoData.id);
|
||||
|
||||
if (netWork) {
|
||||
if (index >= 0) {
|
||||
this.firstTime =
|
||||
list[index].time > netWork ? list[index].time : netWork;
|
||||
} else {
|
||||
this.firstTime = netWork ? netWork : 0;
|
||||
}
|
||||
} else {
|
||||
if (index >= 0) {
|
||||
this.firstTime = list[index].time ? list[index].time : 0;
|
||||
} else {
|
||||
this.firstTime = 0;
|
||||
}
|
||||
}
|
||||
|
||||
uni.setStorageSync("videoList", JSON.stringify(list));
|
||||
this.playVideo();
|
||||
this.isSetFirstTime = true;
|
||||
}
|
||||
},
|
||||
setVideoTime(time) {
|
||||
var data = {
|
||||
videoId: this.videoData.id,
|
||||
position: this.currentTime, //秒数
|
||||
};
|
||||
$http
|
||||
.request({
|
||||
url: `sociology/course/saveCoursePosition`,
|
||||
method: "Post",
|
||||
data,
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
playVideo(e) {
|
||||
this.videoContext = uni.createVideoContext("videoId", this);
|
||||
|
||||
this.videoContext.seek(this.firstTime);
|
||||
this.videoContext.requestFullScreen();
|
||||
},
|
||||
async getLive() {
|
||||
var data = {
|
||||
...this.options,
|
||||
};
|
||||
$http
|
||||
.request({
|
||||
url: `sociology/course/checkVideo`,
|
||||
method: "Post",
|
||||
data,
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
console.log("res at line 252:", res);
|
||||
this.videoData = res.video;
|
||||
this.videoUrl =
|
||||
res.video.videoUrl;
|
||||
|
||||
this.$nextTick(async () => {
|
||||
await this.getData();
|
||||
});
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
openVideo(data) {
|
||||
var mynavData = JSON.stringify(data); // 这里转换成 字符串
|
||||
if (data.type == 0) {
|
||||
//视频云点播
|
||||
uni.navigateTo({
|
||||
url: `/pages/curriculum/order/videoDetail?data=${mynavData}`,
|
||||
});
|
||||
} else if (data.type == 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/curriculum/order/videoDetailOss?data=${mynavData}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
hancleModalCancel() {
|
||||
this.show = false;
|
||||
},
|
||||
handleClickMore(v, i, status) {
|
||||
console.log("i at line 357:", i);
|
||||
this.$set(this.correlationiList[i], "isOpen", status);
|
||||
},
|
||||
hancleModalConfirm() {
|
||||
var data = {
|
||||
values: {
|
||||
customerType: "D",
|
||||
token: uni.getStorageSync("token"),
|
||||
customerOid: uni.getStorageSync("customerOid"),
|
||||
...this.taiHuClassInfo,
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video-box{
|
||||
position: relative;
|
||||
}
|
||||
.image_box{
|
||||
background-color: red;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user