video.js的坑点和自定义video的播放、全屏、快进操作

一、使用插件video.js
遇到问题：点击背景视频无法触发播放和暂停的操作
问题原因：在移动端使用video.js与fastclick 冲突
解决方式：修改fastclick的源码

FastClick.prototype.needsClick = function(target) {
		switch (target.nodeName.toLowerCase()) {

		// Don't send a synthetic click to disabled inputs (issue #62)
		case 'button':
		case 'select':
		case 'textarea':
			if (target.disabled) {
				return true;
			}

			break;
		case 'input':
			// File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
			if ((deviceIsIOS && target.type === 'file') || target.disabled) {
				return true;
			}

			break;
		case 'label':
		case 'iframe': // iOS8 homescreen apps can prevent events bubbling into frames
		case 'video':
			return true;
		}
		// 修改源码的地方
        return ((/\bneedsclick\b/).test(target.className) || (/\bvjs/).test(target.className));

		// return (/\bneedsclick\b/).test(target.className);
	};

二、 使用自定义video满足ui设计的需求
解决方案：自定义进度条、全屏操作
实际代码：

<template>
  <div id="lkk">
    <div id="title">
      <span class="tit-span" @click="back"></span>
      <span class="tit-text">{{ title }}</span>
    </div>
    <div id="aa">
      <div class="progress">
        <div class="progress_bg" @touchstart.prevent="handleTap($event)">
          <div class="progress_bar" ref="progressBar"></div>
        </div>
        <div
          class="progress_btn"
          ref="progressBtn"
          @touchstart.prevent="handleStart($event)"
          @touchmove="handleMove($event)"
          @touchend="handleEnd($event)"
        ></div>
      </div>
      <div @click.stop="enableMute" class="mymuted needsclick">
        <img v-if="showVoi" src="../assets/muted.png" width="100%" height="100%" alt="" />
        <img v-else src="../assets/voice.png" width="100%" height="100%" alt="" />
      </div>
      <div id="full" class="needsclick" @click.stop="changeFull"></div>
    </div>
    <img
      id="videoPalse"
      ref="videoPalse"
      :class="{ active: isFullScreen }"
      :src="videoImg"
      @click="play"
      alt
    />
    <video
      :src="videoUrl"
      height="100%"
      width="100%"
      preload="auto"
      autoplay
      :poster="poster"
      webkit-playsinline="true"
      playsinline="true"
      x-webkit-airplay="allow"
      x5-video-player-type="h5"
      x5-video-orientation="landscape"
      id="vid"
      ref="vids"
      class="needsclick"
      @click="play"
    ></video>
  </div>
</template>
<script>
import "../lib/flexible";
// import { Indicator } from "mint-ui";
export default {
  data() {
    return {
      videoUrl: this.$route.query.url,
      poster: this.$route.query.poster,
      portraint: "portraint",
      title: "",
      isFullScreen: false,
      videoImg: "",
      showVoi: true,
      isTit: false, //是否显示头部
      videoBox: "",
      nowAudioTime: "", // 当前播放进度
      x1: 0,
      y1: 0,
      oldTime: 0,
      newTime: 0,
      olfLeft: 0,
      newLeft: 0,
      nowLeft: 0,
      progressWidth: 0,
      current_time: 0,
      vids:'',
      progressBar:"",
      progressBtn:"",
      progress:''
    };
  },

  async mounted() {
    const that = this;
    that.vids = document.getElementById("vid");
    that.progressBar = document.querySelector(".progress_bar");
    that.progressBtn = document.querySelector(".progress_btn");
    that.progress = document.querySelector(".progress");
    let vids = that.vids
    that.progressWidth = that.progress.offsetWidth;
    vids.addEventListener("timeupdate", that.videoTime);
    // vids.addEventListener("seeking", function(e) {
    //   console.log("开始移动进度条");
    //   vids.pause();
    // });
    // // 11、seeked：查找结束。当用户已经移动/跳跃到视频中新的位置时触发
    // vids.addEventListener("seeked", function(e) {
    //   console.log("进度条已经移动到了新的位置");
    //   vids.play();
    // });
    vids.muted = true;
    vids.play();
  },
  created() {},
  methods: {
    videoTime(){
        const that = this;
        let percent = this.vids.currentTime / this.vids.duration;
        that.progressBar.style.width = percent * 100 + "%";
        that.progressBtn.style.left = percent * 100 + "%";
    },
    handleTap(e) {
      e.preventDefault();
      const that = this;
      let progressWidth = that.progressWidth;
      let touches = e.changedTouches;
      that.x1 = that.isFullScreen ? touches[0].pageY : touches[0].pageX;
      let per = that.x1 / progressWidth;
      that.nowAudioTime = that.vids.duration * per;
      that.vids.currentTime = that.nowAudioTime;
    },
    handleStart(e) {
      const that = this;
      e.preventDefault();
      var touches = e.changedTouches;
      that.x1 = that.isFullScreen ? touches[0].pageY : touches[0].pageX;
      that.olfLeft = that.progressBtn.offsetLeft;
      that.vids.pause();
      that.pause = true;
    },
    handleMove(e) {
      const that = this;
      e.preventDefault();
      let progressWidth = that.progressWidth;
      let vids = that.vids;
      let x2 = that.isFullScreen ? e.changedTouches[0].pageY : e.changedTouches[0].pageX;
      that.newLeft = x2 - that.x1;
      that.nowLeft = that.olfLeft + that.newLeft;
      if (that.nowLeft < 0) {
        that.nowLeft = 0;
      }
      if (that.nowLeft > progressWidth) {
        that.nowLeft = progressWidth;
      }
      that.progressBar.style.width = (that.nowLeft / progressWidth) * 100 + "%";
      that.progressBtn.style.left =
        ((that.nowLeft - (that.nowLeft > progressWidth - 10 ? 10 : 5)) / progressWidth) * 100 + "%";
      let per = that.nowLeft / progressWidth;
      that.nowAudioTime = vids.duration * per; //音频应该显示的时间
      that.current_time = that.nowAudioTime;
      vids.currentTime = that.nowAudioTime;
    },
    handleEnd(e) {
      const that = this;
      // touch.removeEventListener("touchmove", handleEnd, false);
      that.vids.currentTime = that.nowAudioTime;
       this.vids.play();
      that.pause = false;
    },
    resetWidth() {
      this.$nextTick(function() {
        this.progressWidth = this.progress.offsetWidth;
      });
    },
    enableMute() {
      this.vids.muted = !this.vids.muted;
      this.showVoi = !this.showVoi;
    },
    changeFull() {
      if (this.isFullScreen) {
        this.changeSet()
      } else {
        this.changeSet('width')
      }
    },
    back() {
      if (this.isFullScreen) {
         this.changeSet()
      } else {
        window.appAction("goBack");
      }
    },
    changeSet(width){
      this.resetWidth();
      let myVideo = this.vids;
      let aa = document.getElementById("aa");
      let title = document.getElementById("title");
      let w = document.documentElement.clientWidth || document.body.clientWidth;
      let h = document.documentElement.clientHeight || document.body.clientHeigth;
      let cha = width?Math.abs(h - w) / 2:0;
      let data = width?(w - 25) / 2 + cha:0;
      let dataY = width?(h - 46) / 2:0;
      let dataY2 = width?(h -40) /2:0
      let titleData = width?`${((h + 40) / 2 - w)>0?'-':''}${Math.abs((h + 40) / 2 - w)}`:0;
      myVideo.width = width?h:w;
      myVideo.height = width?w:h;
      myVideo.style.zIndex = 2000;
      myVideo.style.transform = `translate(-${cha}px,${cha}px) rotate(${width?90:0}deg)`;
      this.isFullScreen = width?true:false;
      aa.style.width = `100${width?'vh':'vw'}`;
      aa.style.transform = `translate(-${data}px,-${dataY}px) rotate(${width?90:0}deg)`;
      title.style.width = `100${width?'vh':'vw'}`;
      title.style.transform =`translate(${titleData}px,${dataY2}px) rotate(${width?90:0}deg)`;
    },
    play() {
      let myVideo = this.vids;
      if (myVideo.paused) {
        myVideo.play();
        this.videoImg = "";
        this.$refs.videoPalse.style.display = "none";
        this.isTit = false;
      } else {
        myVideo.pause();
        this.videoImg = require("../assets/mm02.png");
        this.$refs.videoPalse.style.display = "block";
        this.isTit = true;
      }
    }
  },
  beforeDestroy() {
      this.vids.removeEventListener('timeupdate',this.videoTime,false)
  },
  
};
</script>
<style lang="less" scoped>
* {
  touch-action: none;
}
#lkk {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
}
#aa {
  width: 100%;
  height: 24px;
  z-index: 2000001;
  position: fixed;
  left: 0;
  bottom: 10px;
  /* background: #666; */
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
  /* justify-content: center; */
}
.progress {
  position: relative;
  flex: 1;
}

.progress_bg {
  overflow: hidden;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.progress_bar {
  height: 2px;
  background: #5493db;
  width: 0;
}

.progress_btn {
  width: 11px;
  height: 11px;
  background: #5493db;
  border-radius: 50%;
  position: absolute;
  left: 0px;
  margin-left: -4px;
  top: -5px;
  cursor: pointer;
  box-sizing: border-box;
}

.aa {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
}
#bb {
  width: 0;
  height: 4px;
  border-radius: 4px;
  background: #5493db;
  display: inline-block;
}

#full {
  color: #fff;
  width: 0.48rem;
  height: 0.4rem;
  background: url(../assets/full.png) no-repeat center;
  background-size: 100% 100%;
  margin-left: 0.2rem;
}

.mymuted {
  display: flex;
  width: 0.48rem;
  height: 0.4rem;
  margin-left: 0.43rem;
  img {
    width: 0.48rem;
    height: 0.4rem;
    max-width: 100%;
  }
}
#vid {
  position: absolute;
  left: 0;
  top: 0;
}
#title {
  height: 40px;
  line-height: 40px;
  width: 100%;
  color: #fff;
  position: relative;
  z-index: 300000;
  /* box-sizing: border-box; */
  /* background: red; */
  display: flex;
  align-items: center;
}
#title .tit-span {
  background: url(../assets/mm07.png) no-repeat center center;
  height: 0.8rem;
  width: 0.6rem;
  background-size: 0.586rem;
  border: 0;
}
#title .tit-span {
  color: #000;
}
#videoPalse {
  position: absolute;
  z-index: 9999;
  width: 1.28rem;
  height: 1.28rem;
  top: 50%;
  left: 50%;
  margin-top: -0.64rem;
  margin-left: -0.64rem;
  display: none;
}
.active {
  transform: rotate(90deg);
}
.video-desc {
  position: absolute;
  bottom: 1rem;
  color: #fff;
  padding: 0 0.3rem;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  > p {
    font-size: 0.37rem;
    line-height: 0.6rem;
  }
  > span {
    color: #9b9da9;
    font-size: 0.293rem;
    margin-top: 0.1rem;
    line-height: 0.5rem;
  }
}
</style>