414 lines
8.1 KiB
Vue
414 lines
8.1 KiB
Vue
<template>
|
|
<view
|
|
class="container playerBox"
|
|
id="playerBox"
|
|
style="
|
|
background-color: #fff;
|
|
width: 100%;
|
|
height: 200px;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
"
|
|
>
|
|
<cx-audio :list="list" ref="cxaudio" :autoplays="true" @curTime="recordTime" :firstTime="firstTime">
|
|
<template slot="title" slot-scope="slotProps">
|
|
<view style="color: #fff; text-align: center;font-size: 36rpx;"
|
|
>{{ curriculumData.title }}
|
|
</view>
|
|
<view style="color: #fff; text-align: center;font-size: 28rpx;margin-top: 10px;"
|
|
>音频
|
|
{{ Number(currentVideoIndex+1)>10? Number(currentVideoIndex+1):'0'+ Number(currentVideoIndex+1) }}
|
|
|
|
|
|
</view>
|
|
</template>
|
|
</cx-audio>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import cxAudio from "./cx-audio-play.vue";
|
|
|
|
import store from "@/store/index.js";
|
|
import $http from "@/config/requestConfig.js";
|
|
import { mapState, mapMutations } from "vuex";
|
|
export default {
|
|
components: {
|
|
cxAudio,
|
|
},
|
|
props: {
|
|
videoData: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
curriculumData: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
videoInfo: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
firstTime: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
currentVideoIndex: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
list: [],
|
|
|
|
show: false, //视频提示显示
|
|
isDipose: false, //视频提示显示
|
|
content: "此设备暂不支持观看当前视频，请移步到安卓手机进行学习！",
|
|
platform: null, //设备类型
|
|
isFullScreen: false, //当前是否是全屏模式
|
|
isOnLoad: false, //是否刷新
|
|
isChange: false, //是否切换播放源
|
|
videoList: [], //视频列表
|
|
videoOssList: [], //本地视频列表
|
|
options: {}, //父组件传参
|
|
currentTime: "", //当前播放时间
|
|
|
|
isSetFirstTime: false, //是否获取到初始播放时间
|
|
|
|
urlList: {
|
|
checkVideo: "sociology/course/checkVideo",
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
// ...mapState(["videoOssList"]),
|
|
},
|
|
|
|
watch: {
|
|
timer(newValue) {
|
|
this.$emit("child-event", newValue);
|
|
},
|
|
videoOssList: {
|
|
immediate: true,
|
|
handler(newValue) {
|
|
if (this.videoOssList.length > 0) {
|
|
uni.setStorageSync("videoOssList", JSON.stringify(this.videoOssList));
|
|
}
|
|
},
|
|
},
|
|
},
|
|
//
|
|
created() {
|
|
this.platform = this.$platform;
|
|
this.show = false;
|
|
if (uni.getStorageSync("videoOssList")) {
|
|
this.videoOssList = JSON.parse(uni.getStorageSync("videoOssList"));
|
|
}
|
|
this.list=[this.videoData.source]
|
|
},
|
|
mounted(){
|
|
this.init();
|
|
},
|
|
//子组件销毁前
|
|
beforeDestroy() {
|
|
this.handleEnd();
|
|
|
|
clearInterval(this.$store.state.videoTimer);
|
|
plus.screen.lockOrientation("portrait-primary");
|
|
},
|
|
updated() {
|
|
// console.log("触发了更新");
|
|
},
|
|
methods: {
|
|
init() {
|
|
console.log("at line 101:", "初始化");
|
|
|
|
console.log('this.list.push at line 127:', this.list)
|
|
this.$nextTick(() => {
|
|
this.$refs.cxaudio.init();
|
|
});
|
|
},
|
|
emitDispose1(status) {
|
|
this.$emit("handleSuccessDispose", status);
|
|
},
|
|
destory() {
|
|
// this.isDipose = true;
|
|
},
|
|
//ios不能播放私有加密提示信息
|
|
openShow() {
|
|
this.show = true;
|
|
},
|
|
|
|
changeVideoData() {
|
|
this.show = false;
|
|
this.isChange = false;
|
|
},
|
|
screenChange(data) {
|
|
this.isFullScreen = !data.status;
|
|
this.$emit("changeScreen", this.isFullScreen);
|
|
},
|
|
calcTimer(time){
|
|
console.log('time at line 111111111111111151:', time)
|
|
|
|
},
|
|
//当前播放时间 存本地
|
|
recordTime(time) {
|
|
this.currentTime = time;
|
|
var list = [...this.videoOssList];
|
|
var index = list.findIndex((e) => e.id == this.currentVideoId);
|
|
var setData = {
|
|
id: this.currentVideoId,
|
|
vid: this.videoData.vid,
|
|
time: time,
|
|
};
|
|
if (list.length > 0 && index >= 0) {
|
|
list[index] = setData;
|
|
} else {
|
|
list.push(setData);
|
|
}
|
|
this.videoOssList = list;
|
|
if (this.currentTime % 60 == 0) {
|
|
this.setVideoTime();
|
|
}
|
|
},
|
|
|
|
//播放结束
|
|
async handleEnd() {
|
|
|
|
this.setVideoTime();
|
|
},
|
|
//存播放进度
|
|
setVideoTime() {
|
|
console.log('存播放进度',this.currentTime)
|
|
if (!this.videoData.id) {
|
|
return false;
|
|
}
|
|
var data = {
|
|
videoId: this.videoData.id,
|
|
position: this.currentTime ? this.currentTime : 0, //秒数
|
|
loadAnimate: "none",
|
|
};
|
|
|
|
$http
|
|
.request({
|
|
url: `sociology/course/saveCoursePosition`,
|
|
method: "Post",
|
|
data,
|
|
header: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then((res) => {});
|
|
},
|
|
//定时器 存播放进度
|
|
async setVideoFirtsetTime() {
|
|
this.setVideoTime();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
width: 100vw;
|
|
height: auto;
|
|
|
|
/deep/.pause {
|
|
width: 60rpx !important;
|
|
height: 60rpx !important;
|
|
}
|
|
}
|
|
|
|
.fds {
|
|
background-color: blue;
|
|
height: 600rpx;
|
|
position: fixed;
|
|
top: 60rpx;
|
|
}
|
|
|
|
.returnBack {
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
height: 88rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.txt {
|
|
color: #fff;
|
|
}
|
|
|
|
.right_title {
|
|
background: #000;
|
|
height: 96rpx;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.return {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
color: #fff;
|
|
}
|
|
|
|
.right_handle {
|
|
width: 200rpx;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
padding-right: 20rpx;
|
|
}
|
|
|
|
cover-view {
|
|
display: block;
|
|
line-height: 1.2;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
cover-view {
|
|
visibility: visible !important;
|
|
}
|
|
|
|
cover-image {
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.fullScreenButton-container {
|
|
color: #fff;
|
|
float: right;
|
|
height: 35px;
|
|
margin-top: 6px;
|
|
margin-right: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
i {
|
|
color: #fff;
|
|
display: inline-block;
|
|
font-size: 22px;
|
|
display: block;
|
|
margin-top: 7px;
|
|
cursor: pointer;
|
|
|
|
& + i {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
&:hover + .player-tooltip {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.player-tooltip {
|
|
&.prev {
|
|
left: -10px;
|
|
}
|
|
|
|
&.list {
|
|
left: 5px;
|
|
}
|
|
|
|
&.next {
|
|
right: -12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.playlist-content {
|
|
position: absolute;
|
|
right: 0;
|
|
width: 0px;
|
|
padding-bottom: 48px;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
transition: all 0.38s ease-in-out;
|
|
overflow: hidden;
|
|
|
|
.list {
|
|
background-color: #000;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
height: 100%;
|
|
overflow: auto;
|
|
|
|
.video-item {
|
|
color: #fff;
|
|
padding: 0px 10px;
|
|
line-height: 35px;
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
|
|
&.active {
|
|
background-color: #000;
|
|
color: #00ddff;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
&:hover {
|
|
background-color: #000;
|
|
color: #00ddff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.player-tooltip {
|
|
position: absolute;
|
|
display: none;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
line-height: 28px;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
background: #3c3c3c;
|
|
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
|
|
height: 28px;
|
|
top: -48px;
|
|
padding: 0 5px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.playlist-skip-tip {
|
|
padding: 5px 15px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 30;
|
|
line-height: 30px;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
color: #000;
|
|
text-align: center;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
#rotating-div {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #3498db;
|
|
transform: rotate(90deg);
|
|
/* 旋转90度 */
|
|
transform-origin: center center;
|
|
/* 设置旋转中心点在div中心 */
|
|
position: fixed;
|
|
/* 固定定位，全屏显示 */
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
.playerBox {
|
|
}
|
|
</style>
|