|
|
@@ -0,0 +1,316 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <h2 class="tc">
|
|
|
+ <span>{{curTimes|useTime}}</span>
|
|
|
+ <strong>/</strong>
|
|
|
+ <span>{{media.duration|useTime}}</span>
|
|
|
+ </h2>
|
|
|
+
|
|
|
+ <video-player id="myVideo" class="video-player-box" ref="videoPlayer" :playsinline="true" @pause="onPlayerPause($event)"
|
|
|
+ @play="onPlayerStart($event)" @ready="playerReadied" @timeupdate="onPlayerTimeupdate($event)" @ended="onPlayerEnded($event)"
|
|
|
+ :globalOptions="{controls:true}" :options="options">
|
|
|
+ </video-player>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ httpServer
|
|
|
+ } from "@/components/httpServer/httpServer.js";
|
|
|
+ import md5 from 'js-md5';
|
|
|
+ import {
|
|
|
+ videoPlayer
|
|
|
+ } from 'vue-video-player';
|
|
|
+ import 'video.js/dist/video-js.css'
|
|
|
+ // import html2canvas from "html2canvas";
|
|
|
+ import {
|
|
|
+ MessageBox
|
|
|
+ } from "element-ui";
|
|
|
+ export default {
|
|
|
+ name: "Index",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ timer: false,
|
|
|
+ tickNum: 0,
|
|
|
+ prevTime: 0,
|
|
|
+ isReady: false,
|
|
|
+ curTimes: 0,
|
|
|
+ onPlay: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ videoPlayer
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ mediaType() {
|
|
|
+ if (!this.mediaType) return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ mediaType: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ media: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ percent: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ useTime(val) {
|
|
|
+ let timestr = ""
|
|
|
+ let hour = parseInt(val / 3600);
|
|
|
+ let min = parseInt(val / 60 % 60);
|
|
|
+ let sec = parseInt(val % 60);
|
|
|
+ if (hour < 10) hour = "0" + hour;
|
|
|
+ if (min < 10) min = "0" + min;
|
|
|
+ if (sec < 10) sec = "0" + sec;
|
|
|
+ return hour + ":" + min + ":" + sec
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.stopTick()
|
|
|
+ this.reportErr("play", 'destroy');
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ player() {
|
|
|
+ return this.$refs.videoPlayer.player
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.startTick()
|
|
|
+ this.startMonitor();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ startTick() {
|
|
|
+ let tick = this.tryTick;
|
|
|
+ if (this.timer) clearInterval(this.timer);
|
|
|
+ this.timer = setInterval(tick, 5 * 1000);
|
|
|
+ },
|
|
|
+ stopTick() {
|
|
|
+ if (this.timer) clearInterval(this.timer);
|
|
|
+ },
|
|
|
+ tryTick() {
|
|
|
+ let that = this;
|
|
|
+ try {
|
|
|
+ that.tick()
|
|
|
+ } catch (err) {
|
|
|
+ that.reportErr("play", '' + err.message)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ playerReadied(audio) {
|
|
|
+ console.log("playerReadied", audio)
|
|
|
+ let that = this;
|
|
|
+ let {
|
|
|
+ position,
|
|
|
+ duration
|
|
|
+ } = this.media
|
|
|
+ if (position > 5 && position < duration) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.setposition(position)
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
+ this.isReady = true
|
|
|
+ },
|
|
|
+ onPlayerTimeupdate(player) {
|
|
|
+ let curTimes = player.cache_.currentTime;
|
|
|
+ if (curTimes > 30 && curTimes > this.media.position + 10) {
|
|
|
+ console.log("return", curTimes, this.media.position)
|
|
|
+ player.currentTime(this.media.position);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.curTimes = curTimes
|
|
|
+ },
|
|
|
+ setposition(position) {
|
|
|
+ if (position > this.media.duration) position = this.media.duration;
|
|
|
+ let player = this.$refs.videoPlayer.player;
|
|
|
+ player.currentTime(position);
|
|
|
+ if (this.media.isFinish) return;
|
|
|
+ if (this.media.position >= this.media.duration - 10 && !this.media.isFinish) {
|
|
|
+ this.tick(true)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPlayerPause(event) {
|
|
|
+ this.reportErr("play", 'pause');
|
|
|
+ this.stopTick()
|
|
|
+ this.onPlay = false
|
|
|
+ },
|
|
|
+ onPlayerEnded(event) {
|
|
|
+ this.reportErr("play", 'end');
|
|
|
+ this.tick(true)
|
|
|
+ },
|
|
|
+ onClose() {
|
|
|
+ this.reportErr("play", 'close')
|
|
|
+ this.doPause()
|
|
|
+ this.$emit("close")
|
|
|
+ },
|
|
|
+ doPause() {
|
|
|
+ this.stopTick()
|
|
|
+ this.onPlay = false
|
|
|
+ let myPlayer = this.$refs.videoPlayer.player;
|
|
|
+ myPlayer && myPlayer.pause()
|
|
|
+ },
|
|
|
+ doPlay() {
|
|
|
+ this.onPlay = true
|
|
|
+ this.startTick();
|
|
|
+ if (!this.$refs.videoPlayer || !this.$refs.videoPlayer.player) return;
|
|
|
+ if (!this.dialog) return this.doPause();
|
|
|
+ let myPlayer = this.$refs.videoPlayer.player;
|
|
|
+ myPlayer && myPlayer.play()
|
|
|
+ this.tickNum = 0
|
|
|
+ },
|
|
|
+ onPlayerStart() {
|
|
|
+ // console.log("onPlayerStart")
|
|
|
+ this.reportErr("play", 'start');
|
|
|
+ this.startTick();
|
|
|
+ this.onPlay = true
|
|
|
+ },
|
|
|
+ reportErr(action, msg) {
|
|
|
+ httpServer("course.report", {
|
|
|
+ action,
|
|
|
+ msg
|
|
|
+ })
|
|
|
+ },
|
|
|
+ startMonitor() {
|
|
|
+ let that = this
|
|
|
+ document.addEventListener("visibilitychange", function() {
|
|
|
+ // || document.hidden
|
|
|
+ if (document.visibilityState == "hidden") {
|
|
|
+ // that.doPause( )
|
|
|
+ that.reportErr("play", 'hidden');
|
|
|
+ } else {
|
|
|
+ that.reportErr("play", 'show');
|
|
|
+ // that.doPlay()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ tick(force = false) {
|
|
|
+ let media = this.media;
|
|
|
+ this.tickNum++
|
|
|
+ // 已经完成
|
|
|
+ if (this.media.isFinish) {
|
|
|
+ console.log("finish")
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 主动暂停
|
|
|
+ let myPlayer = this.$refs.videoPlayer.player;
|
|
|
+ let curTimes = parseInt(myPlayer.currentTime());
|
|
|
+ // 后退无心跳
|
|
|
+ if (this.media.position > curTimes && !force) return;
|
|
|
+ if (curTimes < 4) {
|
|
|
+ console.log("curTimes")
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let isFinish = force ? 1 : 0
|
|
|
+ if (curTimes >= media.duration) isFinish = 1;
|
|
|
+ // 拉到后面
|
|
|
+ if (!isFinish) {
|
|
|
+ if (!this.onPlay) return;
|
|
|
+ }
|
|
|
+ // 强制完成
|
|
|
+ let param = {
|
|
|
+ id: media.id,
|
|
|
+ position: curTimes,
|
|
|
+ isFinish
|
|
|
+ };
|
|
|
+ httpServer("course.tick", param, true).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ let {
|
|
|
+ skip,
|
|
|
+ position,
|
|
|
+ pause,
|
|
|
+ closed
|
|
|
+ } = res.data
|
|
|
+ if (pause || closed) {
|
|
|
+ this.doPause();
|
|
|
+ this.$emit("close")
|
|
|
+ if (closed) {
|
|
|
+ this.$message.errorMsg("课程关闭学习", 5);
|
|
|
+ } else if (pause) {
|
|
|
+ this.$message.errorMsg("多处同时播放视频", 5);
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!skip) this.setposition(position);
|
|
|
+ Object.assign(param, res.data)
|
|
|
+ this.$emit("update", param)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .video-js {
|
|
|
+ .vjs-control-bar {
|
|
|
+ .vjs-icon-custombutton {
|
|
|
+ font-family: VideoJS;
|
|
|
+ font-weight: normal;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vjs-icon-custombutton:before {
|
|
|
+ content: "\f108";
|
|
|
+ font-size: 1.8em;
|
|
|
+ line-height: 1.67;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .p-process {
|
|
|
+ width: 100%;
|
|
|
+ margin: 20px auto;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .media-footer {
|
|
|
+ padding: 0px 30px;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 40px !important;
|
|
|
+ bottom: -10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .media-center {
|
|
|
+ text-align: center;
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .media-time {
|
|
|
+ font-size: 18px;
|
|
|
+ vertical-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .media-select {
|
|
|
+ white-space: nowrap;
|
|
|
+ text-align: right;
|
|
|
+ line-height: 40px !important;
|
|
|
+ float: right;
|
|
|
+ margin: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bicon {
|
|
|
+ font-size: 28px !important;
|
|
|
+ padding: 4px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .media-el-select {
|
|
|
+ font-size: 28px !important;
|
|
|
+ width: 80px;
|
|
|
+ padding: -4px auto !important;
|
|
|
+ }
|
|
|
+</style>
|
