水印

src/containers/center/play/components/media.vue

@@ -1,17 +1,11 @@
 <template>
   <div>
     <!--  -->
-    <video-player
-      class="video-player-box"
-      ref="videoPlayer"
-      :playsinline="true"
-      @pause="onPlayerPause($event)"
-      @timeupdate="onPlayerTimeupdate($event)"
-      @play="onPlayerStart($event)"
-      @ready="playerReadied"
-      @ended="onPlayerEnded($event)"
-      :globalOptions="{controls:true}"
-      :options="options">
+
+    <div class="v-wrap-marks"></div>
+    <video-player id="myVideo" class="video-player-box" ref="videoPlayer" :playsinline="true" @pause="onPlayerPause($event)"
+      @timeupdate="onPlayerTimeupdate($event)" @play="onPlayerStart($event)" @ready="playerReadied" @ended="onPlayerEnded($event)"
+      :globalOptions="{controls:true}" :options="options">
     </video-player>
     <div class="dialog-footer pt30">
       <el-row class="media-footer">
@@ -22,14 +16,14 @@
         </el-col>
         <el-col :span="4" class="media-center">
           <el-button class="bicon" v-if="!onPlay" type="primary" @click="doPlay" icon="el-icon-video-play" circle></el-button>
-          <el-button class="bicon" v-else  type="warning" @click="doPause" icon="el-icon-video-pause" circle></el-button>
+          <el-button class="bicon" v-else type="warning" @click="doPause" icon="el-icon-video-pause" circle></el-button>
         </el-col>
         <el-col :span="10" class="media-select">
-          <el-button class="bicon"  type="danger" icon="el-icon-close" @click="onClose" style="float: right;" >
+          <el-button class="bicon" type="danger" icon="el-icon-close" @click="onClose" style="float: right;">
           </el-button>
           <div style="margin-top:0px;float: right;">
-            <el-select  placeholder="流畅" v-model="selectMediaType" class="media-el-select" @change="(val)=>{$emit('changeMedia', val)}">
-              <el-option label="流畅" value="ld" ></el-option>
+            <el-select placeholder="流畅" :value="mediaType" class="media-el-select" @change="(val)=>{$emit('changeMedia', val)}">
+              <el-option label="流畅" value="ld"></el-option>
               <el-option label="标清" value="hls"></el-option>
             </el-select>
           </div>
@@ -41,51 +35,58 @@
 </template>
 
 <script>
-  import {httpServer} from "@/components/httpServer/httpServer.js";
+  import {
+    httpServer
+  } from "@/components/httpServer/httpServer.js";
   import md5 from 'js-md5';
-  import {videoPlayer } from 'vue-video-player';
+  import {
+    videoPlayer
+  } from 'vue-video-player';
   import 'video.js/dist/video-js.css'
-  import { MessageBox } from "element-ui";
+  import {
+    MessageBox
+  } from "element-ui";
   export default {
     name: "Index",
     data() {
       return {
         timer: false,
         tickNum: 0,
-        prevTime:0,
-        isReady:false,
-        selectMediaType:'hls',
-        curTimes:0,
+        prevTime: 0,
+        isReady: false,
+        curTimes: 0,
         onPlay: false
       }
     },
     components: {
       videoPlayer
     },
-    watch:{
-      mediaType( ){
-        this.selectMediaType = this.mediaType;
-        if( !this.mediaType ) return;
+    watch: {
+      mediaType() {
+        if (!this.mediaType) return;
       },
-      dialog( showDilog ){
-        if( !showDilog){
+      dialog(showDilog) {
+        if (!showDilog) {
           this.doPause()
           this.isReady = false
         }
       }
     },
     props: {
-      mediaType:{
+      mediaType: {
         type: String,
         default: ''
       },
-      media:{
+      media: {
         type: Object,
-        default: ()=>{
-          return {id: '', percent:0}
+        default: () => {
+          return {
+            id: '',
+            percent: 0
+          }
         }
       },
-      dialog:{
+      dialog: {
         type: Boolean,
         default: true
       },
@@ -98,19 +99,21 @@
     },
     mounted() {
       setTimeout(() => {
-        this.$emit("updateOption", {muted:false})
+        this.$emit("updateOption", {
+          muted: false
+        })
       }, 3000)
     },
-    filters:{
-      useTime(val){
+    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
+        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() {
@@ -127,75 +130,92 @@
       this.startMonitor()
     },
     methods: {
-      startTick(){
+      setMarks() {
+        console.log("setMarks")
+        if( !this.options.marks ) return;
+        var div = document.getElementById('myVideo')
+        var div1 = div.firstChild
+        var div3 = document.createElement("div");
+        div3.setAttribute("class", "resize-drag");
+        if (this.mediaType == 'ld') {
+          div3.style.cssText =
+            "position:absolute;top:52px;left:10px; background-color: #f4f4f4;width:50px; height:50px;border-radius: 50%;";
+        } else {
+          div3.style.cssText =
+            "position:absolute;top:80px;left:18px; background-color: #f4f4f4;width:50px; height:50px;border-radius: 50%;";
+        }
+        div1.appendChild(div3)
+      },
+      startTick() {
         let tick = this.tryTick;
-        if( this.timer ) clearInterval(this.timer);
+        if (this.timer) clearInterval(this.timer);
         this.timer = setInterval(tick, 5 * 1000);
       },
-      stopTick(){
-        if( this.timer ) clearInterval(this.timer);
+      stopTick() {
+        if (this.timer) clearInterval(this.timer);
       },
-      tryTick(){
+      tryTick() {
         let that = this;
         try {
           that.tick()
-        }catch(err){
-          that.reportErr("play", ''+err.message )
+        } catch (err) {
+          that.reportErr("play", '' + err.message)
         }
       },
       playerReadied(audio) {
         console.log("playerReadied", audio)
         let that = this;
-        if( this.media.position){
-          this.setposition( this.media.position );
+        if (this.media.position) {
+          this.setposition(this.media.position);
         }
         this.isReady = true
+        setTimeout(()=> this.setMarks(), 600);
       },
-      onPlayerTimeupdate( player ){
+      onPlayerTimeupdate(player) {
         let myPlayer = this.$refs.videoPlayer.player;
         let curTimes = player.cache_.currentTime;
-        this.curTimes = curTimes||0
-        if( this.media.isFinish ){
+        this.curTimes = curTimes || 0
+        if (this.media.isFinish) {
           return;
         }
       },
-      setposition( position ) {
-        if( position > this.media.duration) position = this.media.duration;
+      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 )
+        player.currentTime(position);
+        if (this.media.isFinish) return;
+        if (this.media.position >= this.media.duration - 10 && !this.media.isFinish) {
+          this.tick(true)
         }
         // this.onPlay = true
       },
       onPlayerPause(event) {
-        this.reportErr("play", 'pause' );
+        this.reportErr("play", 'pause');
         this.stopTick()
         this.onPlay = false
       },
-      onPlayerEnded( event ){
-        this.reportErr("play", 'end' );
-        this.tick( true )
+      onPlayerEnded(event) {
+        this.reportErr("play", 'end');
+        this.tick(true)
       },
-      onClose(){
+      onClose() {
         this.reportErr("play", 'close')
         this.doPause()
         this.$emit("close")
       },
-      doPause( ){
+      doPause() {
         // console.log("doPause")
         this.stopTick()
         this.onPlay = false
         let myPlayer = this.$refs.videoPlayer.player;
         myPlayer && myPlayer.pause()
       },
-      doPlay(){
+      doPlay() {
         // console.log("doPlay")
         this.onPlay = true
         this.startTick();
-        if( !this.$refs.videoPlayer || !this.$refs.videoPlayer.player ) return;
-        if( !this.dialog ) return this.doPause();
+        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
@@ -210,10 +230,10 @@
         let that = this
         document.addEventListener("visibilitychange", function() {
           // || document.hidden
-          if( document.visibilityState == "hidden"){
+          if (document.visibilityState == "hidden") {
             // that.doPause( )
             that.reportErr("play", 'hidden');
-          }else{
+          } else {
             that.reportErr("play", 'show');
             // that.doPlay()
           }
@@ -228,7 +248,7 @@
       //     that.doPlay()
       //   }
       // },
-      tickWait(){
+      tickWait() {
         this.doPause()
         let that = this
         MessageBox({
@@ -241,20 +261,23 @@
             if (action === "confirm") {
               that.doPlay();
               done();
-            } else{
+            } else {
               done();
             }
           }
         })
       },
-      reportErr( action, msg ){
-        httpServer("course.report", {action, msg})
+      reportErr(action, msg) {
+        httpServer("course.report", {
+          action,
+          msg
+        })
       },
-      tick( force = false) {
+      tick(force = false) {
         let media = this.media;
-        this.tickNum ++
+        this.tickNum++
         // 已经完成
-        if( this.media.isFinish ) {
+        if (this.media.isFinish) {
           console.log("finish")
           return;
         }
@@ -262,36 +285,45 @@
         let myPlayer = this.$refs.videoPlayer.player;
         let curTimes = parseInt(myPlayer.currentTime());
         // 后退无心跳
-        if( this.media.position > curTimes && !force ) return;
-        if( curTimes< 4) {
+        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 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 => {
+        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 ) {
+            let {
+              skip,
+              position,
+              pause,
+              closed
+            } = res.data
+            if (pause || closed) {
               this.doPause();
               this.$emit("close")
-              if( closed ) {
+              if (closed) {
                 this.$message.errorMsg("课程关闭学习", 5);
-              }else if( pause ){
+              } else if (pause) {
                 this.$message.errorMsg("多处同时播放视频", 5);
               }
               return
-             }
-            if( !skip ) this.setposition( position );
-            Object.assign(param, res.data )
-            this.$emit("update", param )
+            }
+            if (!skip) this.setposition(position);
+            Object.assign(param, res.data)
+            this.$emit("update", param)
           }
         })
       }
@@ -300,13 +332,14 @@
 </script>
 
 <style>
-  .video-js{
-    .vjs-control-bar{
+  .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;
@@ -314,39 +347,46 @@
       }
     }
   }
-  .p-process{
+
+  .p-process {
     width: 100%;
-    margin:20px auto;
+    margin: 20px auto;
     height: 30px;
   }
-  .media-footer{
+
+  .media-footer {
     padding: 0px 30px;
     text-align: left;
     line-height: 40px !important;
     bottom: -10px;
   }
-  .media-center{
+
+  .media-center {
     text-align: center;
     padding: 0px;
   }
-  .media-time{
+
+  .media-time {
     font-size: 18px;
     vertical-align: center;
   }
-  .media-select{
-    white-space:nowrap;
+
+  .media-select {
+    white-space: nowrap;
     text-align: right;
     line-height: 40px !important;
     float: right;
     margin: 0px !important;
   }
-  .bicon{
+
+  .bicon {
     font-size: 28px !important;
-    padding: 4px  !important;
+    padding: 4px !important;
   }
+
   .media-el-select {
     font-size: 28px !important;
     width: 80px;
-    padding: -4px auto  !important;
+    padding: -4px auto !important;
   }
 </style>

src/containers/center/play/index.vue

@@ -362,13 +362,14 @@
         this.media.index = index
         httpServer('course.GetMedia', {id:item.id}).then( res => {
           if( res.code != 200) return;
-          let {mediaUrl, id, position} = res.data||{};
+          let {mediaUrl, id, position, marks} = res.data||{};
           this.mediaUrl = res.data.mediaUrl;
           if(  this.mediaUrl.indexOf('/hls/') == -1){
             this.mediaType = 'ld'
           }else{
             this.mediaType = 'hls'
           }
+          this.options.marks = !!marks;
           this.media.position = position;
           this.media.id = id;
           this.options.sources = [{src:this.mediaUrl,type: "application/x-mpegURL"}];