355 lines
8.5 KiB
Vue
355 lines
8.5 KiB
Vue
<template>
|
|
<view
|
|
class="container commonPageBox commonDetailPage"
|
|
style="position: relative; height: auto"
|
|
>
|
|
|
|
<video
|
|
@timeupdate="videoTimeUpdateEvent($event)"
|
|
ref="videos"
|
|
style="width: 100%; height: 60rpx"
|
|
autoplay
|
|
id="videoId"
|
|
controls
|
|
:show-progress="true"
|
|
:show-fullscreen-btn="false"
|
|
object-fit="contain"
|
|
class="video-box"
|
|
:src="videoUrl"
|
|
:poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
|
|
@play="playVideo"
|
|
></video>
|
|
|
|
<!-- 倍速 -->
|
|
<view class="play-rate" @click="videoPlayRate" v-if="showRate">{{ playbackRate }}x</view>
|
|
<!-- 倍速菜单 -->
|
|
<ul class="play-rate-menu" :style="{ height: height }" v-if="showRateMenu">
|
|
<li
|
|
v-for="item in playbackRates"
|
|
:key="item"
|
|
:class="[{ activeRate: playbackRate === item }, 'play-rate-item']"
|
|
@click="changePlayRate(item)"
|
|
>
|
|
{{ item }}x
|
|
</li>
|
|
</ul>
|
|
</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 {
|
|
playbackRate: 1, // 初始播放速率
|
|
showRateMenu: false, //显示播放速率
|
|
speedState: 1,
|
|
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) {
|
|
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
computed: {
|
|
...mapState(["userInfo"]),
|
|
},
|
|
methods: {
|
|
// 显示倍速
|
|
videoPlayRate() {
|
|
this.showRateMenu = true
|
|
},
|
|
// 点击倍速
|
|
changePlayRate(rate) {
|
|
this.playbackRate = rate
|
|
this.videoPlayer.playbackRate(rate)
|
|
this.showRateMenu = false
|
|
this.hideControls()
|
|
},
|
|
// 创建倍速按钮
|
|
createPlayRateDOM() {
|
|
const playRateDom = document.createElement('div')
|
|
playRateDom.className = 'full-play-rate'
|
|
playRateDom.innerText = `${this.playbackRate}x`
|
|
playRateDom.onclick = () => {
|
|
const playRateMenuDom = document.querySelector('.full-play-rate-menu')
|
|
playRateMenuDom.style.display = 'block'
|
|
}
|
|
return playRateDom
|
|
},
|
|
// 创建倍速菜单
|
|
createPlayRateMenuDom() {
|
|
const playRateMenuDom = document.createElement('ul')
|
|
playRateMenuDom.className = `play-rate-menu full-play-rate-menu`
|
|
playRateMenuDom.style.height = this.windowWidth + 'px'
|
|
playRateMenuDom.style.display = 'none'
|
|
let liStr = ''
|
|
this.playbackRates.forEach((item) => {
|
|
liStr += `
|
|
<li class="${this.playbackRate === item ? 'activeRate' : ''} play-rate-item full-play-rate-item">
|
|
${item}x
|
|
</li>
|
|
`
|
|
})
|
|
playRateMenuDom.innerHTML = liStr
|
|
return playRateMenuDom
|
|
},
|
|
handleSetSpeedRate(rate) {
|
|
console.log("rate at line 125:", rate);
|
|
let videoContext = uni.createVideoContext("videoId");
|
|
videoContext.playbackRate(rate);
|
|
speedRate.value = rate;
|
|
},
|
|
init(options) {
|
|
this.options = JSON.parse(options.data);
|
|
this.getLive();
|
|
|
|
this.timer = setInterval(() => {
|
|
var that = this;
|
|
if (this.currentTime) {
|
|
that.setVideoTime();
|
|
}
|
|
}, 60000 * 10);
|
|
},
|
|
// 播放进度改变
|
|
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"));
|
|
}
|
|
|
|
console.log("点击后设置播放时长的方法list at line 65:", list);
|
|
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);
|
|
},
|
|
async getLive() {
|
|
var data = {
|
|
...this.options,
|
|
};
|
|
console.log("data at line 57:", data);
|
|
$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();
|
|
});
|
|
},
|
|
hancleModalCancel() {
|
|
this.show = false;
|
|
},
|
|
handleClickMore(v, i, status) {
|
|
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;
|
|
}
|
|
|
|
.speed {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 16rpx;
|
|
|
|
.doubleSpeed {
|
|
color: #fff;
|
|
font-size: 14rpx;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
padding: 4rpx 6rpx;
|
|
}
|
|
}
|
|
|
|
// 倍速的蒙版
|
|
.speedModal {
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.speedNumBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background-color: #2c2c2c;
|
|
width: 120rpx;
|
|
position: absolute;
|
|
right: 0rpx;
|
|
top: 0;
|
|
|
|
.number {
|
|
width: 120rpx;
|
|
font-weight: 700;
|
|
font-size: 14rpx;
|
|
padding: 18rpx 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.active {
|
|
color: red;
|
|
}
|
|
|
|
.noActive {
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|