修改视频

src/components/course/pica-video.vue

@@ -9,7 +9,9 @@
       preload
       webkit-playsinline
       playsinline
+      x-webkit-airplay="allow"
       x5-video-player-type="h5"
+      x5-video-player-fullscreen="true"
       mtt-playsinline="true"
       @loadedmetadata="loadedMetaData"
       @timeupdate="onTimeUpdate"
@@ -26,9 +28,26 @@
           <div class="progress-inner">
             <div class="progress-bar" :style="progressBar"></div>
           </div>
+          <div
+            class="progress-ball"
+            :style="{left: `${progressBall}%`}"
+            @touchstart.stop="onBallStart"
+            @touchmove.stop="onBallMove"
+            @touchend.stop="onBallEnd">
+          </div>
         </div>
         <div class="time-box">{{ playTime }}/{{ totalTime }}</div>
-        <div class="bar-empty"></div>
+        <div class="rate-box" @click="showRate=true">
+          倍速
+          <div class="rate-list" v-show="showRate">
+            <div
+              class="rate-item"
+              :class="{'rate-active': rate === curtRate}"
+              v-for="rate in rates"
+              :key="rate"
+              @click.stop="selectRate(rate)">{{ rate }}</div>
+          </div>
+        </div>
         <div class="btn-screen" :class="{'btn-screen-mini': isFullScreen}" @click="onFullscreen"></div>
       </div>
     </div>
@@ -86,9 +105,13 @@ export default {
       vid: '', // 唯一id
       playTime: '00:00', // 播放时长
       totalTime: '00:00', // 总时长
-      isPaused: false, // 是否暂停
+      isPaused: true, // 是否暂停
       isFullScreen: false, // 是否全屏
       progressBar: {}, // 进度条
+      progressBall: 0, // 进度球
+      rates: [2, 1.5, 1, 0.5],
+      curtRate: 1,
+      showRate: false,
       showProved: false, // 试看提示文字
       showError: false, // 播放错误
       showResume: false, // 继续播放
@@ -105,6 +128,7 @@ export default {
   mounted() {
     const player = document.getElementById(this.vid);
     player.addEventListener("timeupdate", this.onTimeUpdate, false);
+    this.player = player;
   },
   beforeDestroy() {
     this.timer && clearTimeout(this.timer);
@@ -117,34 +141,31 @@ export default {
   },
   methods: {
     togglePlay() {
-      if (!this.logged) {
-        this.$store.dispatch('goLogin');
-        return;
-      }
-      if (!this.url  || !this.loaded || !this.enable) {
+      // if (!this.logged) {
+      //   this.$store.dispatch('goLogin');
+      //   return;
+      // }
+      if (!this.url || !this.enable) {
         return;
       }
       let isPaused = this.isPaused;
-      const player = document.getElementById(this.vid);
       // 试看，且超过时间
-      if (this.proved && player.currentTime >= this.proved) {
+      if (this.proved && this.player.currentTime >= this.proved) {
         return;
       }
       if (isPaused) {
-        this.commonBuriedData(`984#984001`);
-        player.play();
+        this.player.play();
       } else {
-        player.pause();
+        this.player.pause();
       }
-      this.reportOnOff(isPaused ? 1 : 2);
+      // this.reportOnOff(isPaused ? 1 : 2);
       this.isPaused = !isPaused;
     },
     // 切换视频
     switchUrl(opts = {}) {
       const { url = '', poster = '', proved = 0, history = 0, enable = true } = opts;
-      const player = document.getElementById(this.vid);
       this.loaded = false;
-      player.src = url;
+      this.player.src = url;
       this.url = url;
       this.poster = poster;
       this.proved = proved;
@@ -157,7 +178,6 @@ export default {
       this.currentTime = null;
       this.duration = null;
       if (this.showError) this.showError = false;
-      return player;
     },
     // 切换并播放
     switchUrlAndPlay(opts = {}) {
@@ -165,13 +185,13 @@ export default {
         this.reportOnOff(2);
       }
       this.reportLeave();
-      const player = this.switchUrl(opts);
+      this.switchUrl(opts);
       if (!this.enable) {
         return;
       }
       const loop = () => {
         if (this.loaded) {
-          player.play();
+          this.player.play();
           this.isPaused = false;
           this.reportOnOff(1);
           return null;
@@ -183,18 +203,20 @@ export default {
       }
       this.timer = loop();
     },
-    // 加载完毕，获取总时长和音量
-    loadedMetaData(e) {
-      let { duration } = e.target;
+    // 加载完毕，获取总时长和音量。问题：移动端点击播放才会触发，且不一定会获取时长
+    loadedMetaData() {
+      let duration = this.player.duration;
+      if (duration) {
         this.totalTime = this.formatTime(duration);
         this.loaded = true;
         if (this.history) {
-        e.target.currentTime = this.history;
+          this.player.currentTime = this.history;
           this.showResume = true;
           setTimeout(() => {
             this.showResume = false;
           }, 2000);
         }
+      }
     },
     // 播放中
     onTimeUpdate(e) {
@@ -210,6 +232,9 @@ export default {
         this.currentTime = currentTime;
         this.duration = duration;
       }
+      if (currentTime < 0.1 && !this.loaded) {
+        this.loadedMetaData();
+      }
       // 试看，且超过时间
       if (this.proved && currentTime >= this.proved) {
         this.provedEnd();
@@ -223,27 +248,70 @@ export default {
         '-moz-transform': `-moz-translateX(${percent}%)`,
         '-ms-transform': `-ms-translateX(${percent}%)`,
       }
+      if (target === 'progressBar' && !this.isMoveingBall) {
+        this.progressBall = percent
+      }
     },
-    // 设置进度
+    // 点击设置进度
     setProgress(e) {
-      if (!this.url || !this.loaded) {
+      if (!this.url) {
         return;
       }
       const { offsetX } = e;
       const { width } = e.target.getBoundingClientRect();
-      const player = document.getElementById(this.vid);
-      const duration = player.duration;
+      this.setProgressPosition(offsetX * 100 / width);
+    },
+    // 设置进度最终位置
+    setProgressPosition(percent) {
+      const duration = this.player.duration;
       // 试看，且超过时间
-      if (this.proved && offsetX / width >= this.proved / duration) {
+      if (this.proved && percent >= this.proved * 100 / duration) {
         return;
       }
-      this.setBarPosition(offsetX * 100 / width, 'progressBar');
-      player.currentTime = offsetX * duration / width;
+      this.setBarPosition(percent, 'progressBar');
+      this.player.currentTime = percent * duration / 100;
       if (this.isPaused) {
-        player.play();
+        this.player.play();
         this.isPaused = false;
-        this.reportOnOff(1);
+        // this.reportOnOff(1);
+      }
+    },
+    // 拖动进度条
+    onBallStart(e) {
+      this.isMoveingBall = true;
+      const { width } = this.$el.querySelector('.progress-inner').getBoundingClientRect();
+      const { pageX } = e.changedTouches[0];
+      this.ballPageX = pageX;
+      this.progressW = width;
+      this.oldBallPercent = this.progressBall;
+    },
+    onBallMove(e) {
+      const { pageX } = e.changedTouches[0];
+      this.progressBall = this.getNewPercent(pageX);
+    },
+    onBallEnd(e) {
+      this.isMoveingBall = false;
+      const { pageX } = e.changedTouches[0];
+      const newPercent = this.getNewPercent(pageX);
+      this.setProgressPosition(newPercent);
+    },
+    // 获取拖动百分比
+    getNewPercent(pageX) {
+      let newPercent = (pageX - this.ballPageX) * 100 / this.progressW + this.oldBallPercent;
+      if (newPercent <= 0) {
+        newPercent = 0
+      } else if (newPercent >= 100) {
+        newPercent = 100
+      }
+      return newPercent;
+    },
+    selectRate(rate) {
+      if (!this.url) {
+        return;
       }
+      this.player.playbackRate = rate;
+      this.curtRate = rate;
+      this.showRate = false;
     },
     formatTime(t) {
       const time = formatLeftTimeObj(t);
@@ -254,8 +322,7 @@ export default {
     provedEnd() {
       this.provedOver = true;
       this.showProved = false;
-      const player = document.getElementById(this.vid);
-      player.pause();
+      this.player.pause();
       this.$emit('onVideoEnd', { type: 2 });
       this.finish = true;
       this.reportOnOff(2);
@@ -344,81 +411,115 @@ export default {
     left: 0;
     bottom: 0;
     width: 100%;
-    height: px2rem(44px);
+    height: 44px;
   }
   .control-bar{
     position: absolute;
     display: flex;
     align-items: center;
+    justify-content: center;
     left: 0;
     top: 0;
     width: 100%;
-    height: px2rem(44px);
+    height: 44px;
     // transform: translate3d(0, 60px, 0);
     // transition: transform 0.2s;
     background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
   }
   .btn-play{
-    width: px2rem(44px);
-    height: px2rem(44px);
+    width: 44px;
+    height: 44px;
     background-image: url('~@/images/video/play.png');
     background-repeat: no-repeat;
     background-position: 50% 50%;
-    background-size: px2rem(26px) auto;
+    background-size: 24px auto;
   }
   .btn-pause{
     background-image: url('~@/images/video/pause.png');
-    background-position: 50% 50%;
-    background-size: px2rem(24px) auto;
+  }
+  .progress-box{
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    width: 50px;
+    height: 44px;
+    margin-left: 5px;
+  }
+  .progress-inner{
+    position: relative;
+    width: 50px;
+    flex: 1;
+    height: 2px;
+    background: rgba(255, 255, 255, 0.4);
+    overflow: hidden;
+  }
+  .progress-bar{
+    position: absolute;
+    left: -100%;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #449284;
+    transform: translateX(0);
+    pointer-events: none;
+  }
+  .progress-ball{
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 7px;
+    height: 14px;
+    transform: translate3d(-3px, -7px, 0);
+    background-color: #fff;
+    border-radius: 2px;
   }
   .time-box{
     color: #fff;
-    font-size: 14px;
+    font-size: 12px;
     line-height: 14px;
-    letter-spacing: 1px;
-    margin-left: 12px;
-  }
-  .bar-empty{
-    flex: 1;
-    width: 1px;
+    width: 100px;
+    text-align: right;
   }
   .btn-screen{
-    width: px2rem(44px);
-    height: px2rem(44px);
+    width: 44px;
+    height: 44px;
     background-image: url('~@/images/video/screen_full.png');
     background-repeat: no-repeat;
     background-position: 50% 50%;
-    background-size: px2rem(20px) auto;
+    background-size: 20px auto;
   }
   .btn-screen-mini{
     background-image: url('~@/images/video/screen_mini.png');
   }
-  .progress-box{
+  .rate-box{
+    position: relative;
+    color: #fff;
+    width: 40px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 12px;
+    text-align: center;
+  }
+  .rate-list{
     position: absolute;
     left: 0;
-    top: 0;
+    bottom: 44px;
     width: 100%;
-    padding: 3px 0;
+    background: rgba(0, 0, 0, .7);
+    border-radius: 2px;
   }
-  .progress-inner{
-    position: relative;
-    height: 4px;
-    background: rgba(255, 255, 255, 0.4);
+  .rate-item{
+    height: 30px;
+    line-height: 30px;
   }
-  .progress-bar{
-    position: absolute;
-    left: -100%;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: #449284;
-    transform: translateX(0);
-    pointer-events: none;
+  .rate-active{
+    color: #00a1d6;
   }
   .proved-box{
     position: absolute;
     color: #fff;
-    font-size: 14px;
+    font-size: 12px;
     left: 20px;
     bottom: 70px;
     height: 30px;
@@ -440,7 +541,7 @@ export default {
   }
   .cover-play{
     background: url('~@/images/video/cover_play.png') no-repeat center center;
-    background-size: px2rem(50px) auto;
+    background-size: 50px auto;
   }
   .cover-error, .cover-resume{
     p{
@@ -449,7 +550,7 @@ export default {
       top: 50%;
       width: 100%;
       color: #fff;
-      font-size: 18px;
+      font-size: 15px;
       text-align: center;
       transform: translate3d(0, -50%, 0);
     }

src/style/common.scss

@@ -28,6 +28,26 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
     }
 }
 
+img,
+a,
+div {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+}
+
+::selection {
+  background: none;
+}
+
+::-moz-selection {
+  background: none;
+}
+
+::-webkit-selection {
+  background: none;
+}
+
 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar
 {