音频
This commit is contained in:
413
pages/component/commonComponents/video/audio.vue
Normal file
413
pages/component/commonComponents/video/audio.vue
Normal file
@@ -0,0 +1,413 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user