|
|
@@ -17,8 +17,18 @@
|
|
|
@updateFileList="updateFileList"
|
|
|
/>
|
|
|
<div v-if="data.video_list.length > 0" class="interaction-box">
|
|
|
- <video id="interaction-video" :src="data.video_list[0].file_url" width="100%" height="400" controls></video>
|
|
|
- <el-button type="primary" size="small" @click="handlePause">暂停视频编辑题目</el-button>
|
|
|
+ <video
|
|
|
+ ref="videoPlayer"
|
|
|
+ id="interaction-video"
|
|
|
+ :src="data.video_list[0].file_url"
|
|
|
+ width="100%"
|
|
|
+ height="400"
|
|
|
+ controls
|
|
|
+ class="video-js vjs-default-skin vjs-big-play-centered"
|
|
|
+ ></video>
|
|
|
+ <!-- <video ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered"></video> -->
|
|
|
+
|
|
|
+ <el-button type="primary" size="small" @click="handlePause" style="margin-top: 5px">暂停视频编辑题目</el-button>
|
|
|
<!-- <el-button @click="handleMultilingual">多语言</el-button> -->
|
|
|
<ul v-if="data.file_info_list.length > 0" class="file-list">
|
|
|
<li v-for="(file, i) in data.file_info_list" :key="i">
|
|
|
@@ -74,6 +84,11 @@ import { getVideoInteractionData } from '@/views/book/courseware/data/videoInter
|
|
|
import { GetCoursewareExercise } from '@/api/book';
|
|
|
import { getSelectData } from '@/views/book/courseware/data/select';
|
|
|
|
|
|
+import 'videojs-markers/dist/videojs.markers.min.css';
|
|
|
+import videojs from 'video.js';
|
|
|
+import 'video.js/dist/video-js.css';
|
|
|
+import 'videojs-markers';
|
|
|
+
|
|
|
export default {
|
|
|
name: 'VideoInteractionPage',
|
|
|
components: { UploadFile, ExerciseAdd },
|
|
|
@@ -91,15 +106,21 @@ export default {
|
|
|
file_id_list: [],
|
|
|
loading: false,
|
|
|
currentTime: 0,
|
|
|
+ duration: 0,
|
|
|
multilingualText: '',
|
|
|
exerciseContent: null,
|
|
|
+ playTime: 0,
|
|
|
+ player: null,
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
'data.video_list': {
|
|
|
handler(val) {
|
|
|
if (val.length > 0) {
|
|
|
- this.handleData();
|
|
|
+ let _this = this;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ _this.handleCreatPlayer();
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
immediate: true,
|
|
|
@@ -107,6 +128,83 @@ export default {
|
|
|
'data.property.file_list': 'handleMindMap',
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 初始化player
|
|
|
+ handleCreatPlayer(time) {
|
|
|
+ let _this = this;
|
|
|
+ let options = {
|
|
|
+ autoplay: false, //自动播放
|
|
|
+ height: 500,
|
|
|
+ width: 918,
|
|
|
+ controls: true, //用户可以与之交互的控件
|
|
|
+ loop: true, //视频一结束就重新开始
|
|
|
+ muted: false, //默认情况下将使所有音频静音
|
|
|
+ playsinline: true,
|
|
|
+ webkitPlaysinline: true,
|
|
|
+ // aspectRatio:"16:9",//显示比率
|
|
|
+ playbackRates: [0.5, 1, 1.5, 2],
|
|
|
+ fullscreen: {
|
|
|
+ options: { navigationUI: 'hide' },
|
|
|
+ },
|
|
|
+ sources: [
|
|
|
+ {
|
|
|
+ src: this.data.video_list[0].file_url,
|
|
|
+ type: 'video/mp4',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.player = videojs(this.$refs.videoPlayer, options, function onPlayerReady() {
|
|
|
+ // console.log('onPlayerReady');
|
|
|
+ });
|
|
|
+ // 设置标点
|
|
|
+ _this.handleMarkers();
|
|
|
+ // 获取当前播放时间
|
|
|
+ this.player.on('timeupdate', function (event) {
|
|
|
+ _this.currentTime = this.currentTime().toFixed(3);
|
|
|
+ // console.log(this.currentTime());
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 设置标点
|
|
|
+ handleMarkers() {
|
|
|
+ let markers = [];
|
|
|
+ this.data.file_info_list.forEach((item) => {
|
|
|
+ markers.push({
|
|
|
+ time: item.currentTime,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.player.markers({
|
|
|
+ // 不显示鼠标悬浮标记提示文字
|
|
|
+ markerTip: {
|
|
|
+ display: true,
|
|
|
+ },
|
|
|
+ markerStyle: {
|
|
|
+ width: '4px',
|
|
|
+ 'background-color': 'red',
|
|
|
+ 'border-radius': '50%',
|
|
|
+ },
|
|
|
+ markers: markers,
|
|
|
+ // markers: [
|
|
|
+ // {
|
|
|
+ // time: 0.694313,
|
|
|
+ // class: 'custom-marker-class',
|
|
|
+ // text: '标记1',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // time: 5.694313,
|
|
|
+ // class: 'custom-marker-class',
|
|
|
+ // text: '标记2',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // time: 10.694313,
|
|
|
+ // class: 'custom-marker-class',
|
|
|
+ // text: '标记3',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // time: 15.694313,
|
|
|
+ // class: 'custom-marker-class',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ });
|
|
|
+ },
|
|
|
updateFileList({ file_list, file_id_list, file_info_list }) {
|
|
|
this.data.video_list = file_list;
|
|
|
this.data.video_id_list = file_id_list;
|
|
|
@@ -114,6 +212,8 @@ export default {
|
|
|
this.data.video_info_list = file_info_list;
|
|
|
if (file_list.length === 0) {
|
|
|
this.data.file_info_list = [];
|
|
|
+ } else {
|
|
|
+ this.duration = file_list[0].media_duration;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -142,15 +242,16 @@ export default {
|
|
|
if (file_list.length > 0 && file_list[0].file_id) {
|
|
|
let obj = file_list[0];
|
|
|
obj.currentTime = this.currentTime;
|
|
|
+ obj.position = (this.currentTime / this.duration) * 100;
|
|
|
this.data.file_info_list.push(obj);
|
|
|
this.sourceAddFlag = false;
|
|
|
- document.getElementById('interaction-video').play();
|
|
|
+ this.player.play();
|
|
|
}
|
|
|
},
|
|
|
handleCancle() {
|
|
|
// this.sourceAddFlag = false;
|
|
|
this.exerciseFlag = false;
|
|
|
- document.getElementById('interaction-video').play();
|
|
|
+ this.player.play();
|
|
|
},
|
|
|
// 确定新增资源
|
|
|
submitAdd(id, type, isAdd) {
|
|
|
@@ -159,6 +260,7 @@ export default {
|
|
|
currentTime: this.currentTime,
|
|
|
file_name: type,
|
|
|
id,
|
|
|
+ position: (this.currentTime / this.duration) * 100,
|
|
|
});
|
|
|
this.file_id_list.push(id);
|
|
|
} else {
|
|
|
@@ -167,13 +269,16 @@ export default {
|
|
|
}
|
|
|
|
|
|
this.exerciseFlag = false;
|
|
|
- document.getElementById('interaction-video').play();
|
|
|
+ // document.getElementById('interaction-video').play();
|
|
|
+ this.player.play();
|
|
|
},
|
|
|
// 暂停视频上传资源
|
|
|
handlePause() {
|
|
|
- const video = document.getElementById('interaction-video');
|
|
|
- video.pause();
|
|
|
- this.currentTime = video.currentTime.toFixed(3);
|
|
|
+ // const video = document.getElementById('interaction-video');
|
|
|
+ // video.pause();
|
|
|
+ // this.currentTime = video.currentTime.toFixed(3);
|
|
|
+ this.playTime = JSON.parse(JSON.stringify(this.currentTime));
|
|
|
+ this.player.pause();
|
|
|
this.file_list = [];
|
|
|
this.file_id_list = [];
|
|
|
// this.sourceAddFlag = true;
|
|
|
@@ -223,6 +328,12 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.player) {
|
|
|
+ this.player.dispose();
|
|
|
+ }
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
