video视频播放与控制

<style lang="scss" scoped>
.video-area{
  height: 211px; 
  position: relative;
  top: 10px;
}
.full-page{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 2101;
}
.bar{
  z-index: 999;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .2);
  color: #fff;
  &_progress{
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    height: 5px;
    background: rgba(255, 255, 255, .7);
    &_current, &_buffer{
      position: absolute;
      top: 0;
      left: 0;
      height: 5px;
    }
    &_current{
      width: 10px;
      background: orange;
    }
    &_buffer{
      width: 20px;
      background: rgba(255, 255, 255, .8);
    }
  }
  &_btn{
    height: 48px;
    line-height: 48px;
    padding: 0 15px;
    &_play{
      display: inline-block;
      &.play{
        border: solid transparent;
        border-left-color: #fff;
        border-width: 5px 0 5px 9px;
      }
      &.pause{
        width: 3px;
        height: 10px;
        border: solid #fff;
        border-width: 0 3px 0 3px;
        box-sizing: content-box;
      }
    }
    &_time{
      margin-left: 10px;
      font-size: 12px;
      &_duration{
        color: #ccc;
      }
    }
    &_rate{
      position: relative;
      display: inline-block;
      vertical-align: bottom;
      width: 50px;
      text-align: center;
      font-size: 12px;
      &_items{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 48px;
        background: #000;
        border: 1px solid #999;
        border-radius: 2px;
        &_item{
          display: block;
          line-height: 30px;
          &:active{
            color: orange;
          }
          &.focus{
            color: orange;
          }
        }
      }
    }
    &_fullsceen{
      font-size: 12px;
      display: inline-block;
      vertical-align: bottom;
    }
  }
}
</style>

<template>
<div>
  <button id='play' @click="play">播放/暂停</button>   
  <button id="big" @click="speed(2)">快</button>  
  <button id='middle' @click="speed(1)">正常</button>  
  <button id='small' @click="speed(0.5)">慢</button>  
  <button id='small' @click="volume(0)">静音</button>  
  <button id='small' @click="volume(0.5)">50%音量</button>  
  <button id='small' @click="volume(1)">最大音量</button>  
  <button id='small' @click="fullPage">页面全屏</button>  
  <button id='small' @click="fullSceen">全屏</button>  
  <button id='small' @click="jump(300)">300s</button>  
  <button id='small' @click="jump(60)">60s</button>  
  <button id='small' @click="jump(0)">0s</button>  
  <div>{{currentTime}}({{bufferTime}})/{{duration}}</div>
  <div>{{loading ? '加载中...' : '加载结束'}}</div>
  <div>{{end ? '播放结束' : '播放还没结束'}}</div>
  <div>{{error ? '视频加载失败' : '视频加载没失败'}}</div>
  <div>{{playing ? '播放' : '没播放'}}</div>
  <div>倍速：{{playRate}}</div>
  <div>音量：{{volumeRate}}</div>
  
  <div ref="video-area" :class="[fullState && 'full-page', 'video-area']">
    <!-- <video ref="video" :src="src" style="background-color: rgb(0, 0, 0); width: 100%; height: 100%; display: block; position: absolute; top: 0; bottom: 0px; left: 0px;" webkit-playsinline="" x-webkit-airplay="" preload="auto"></video> -->
    <video ref="video" :src="src" style="background-color:#000;width:100%;height:100%; display: block; position: absolute; top: 0; bottom: 0px; left: 0px;" playsinline="isiPhoneShowPlaysinline" webkit-playsinline="isiPhoneShowPlaysinline" x-webkit-airplay="" preload="none" data-role="txp_video_tag"></video>
    <div class="bar">
      <div class="bar_progress">
        <div class="bar_progress_buffer"></div>
        <div class="bar_progress_current"></div>
      </div>
      <div class="bar_btn">
        <span class="bar_btn_play" :class="[playing ? 'pause' : 'play']" @click="play"></span>
        <span class="bar_btn_time">
          <span class="bar_btn_time_current">{{currentTime}}</span><span class="bar_btn_time_duration"> / {{duration}}</span>
        </span>
        <span class="bar_btn_rate">
          <span class="bar_btn_rate_title" @click="showRateClick">倍速</span>
          <div class="bar_btn_rate_items" v-show="showRate">
            <span class="bar_btn_rate_items_item" :class="speedCls == 0.5 && 'focus'" @click="speed(0.5)" @touchstart="empty">0.5</span>
            <span class="bar_btn_rate_items_item" :class="speedCls == 0.75 && 'focus'" @click="speed(0.75)" @touchstart="empty">0.75</span>
            <span class="bar_btn_rate_items_item" :class="speedCls == 1 && 'focus'" @click="speed(1)" @touchstart="empty">1</span>
            <span class="bar_btn_rate_items_item" :class="speedCls == 1.25 && 'focus'" @click="speed(1.25)" @touchstart="empty">1.25</span>
            <span class="bar_btn_rate_items_item" :class="speedCls == 1.5 && 'focus'" @click="speed(1.5)" @touchstart="empty">1.5</span>
            <span class="bar_btn_rate_items_item" :class="speedCls == 1.75 && 'focus'" @click="speed(1.75)" @touchstart="empty">1.75</span>
            <span class="bar_btn_rate_items_item" :class="speedCls == 2 && 'focus'" @click="speed(2)" @touchstart="empty">2</span>
          </div>
        </span>
        <span class="bar_btn_fullsceen" @click="fullSceen(fullWindowState)">{{fullWindowState ? '取消全屏' : '全屏'}}</span>
      </div>
    </div>
  </div>
</div>
</template>

<script>

export default {
  name: 'index',
  data () {
    return {
      src: 'https://ugcws.video.gtimg.com/uwMRJfz-r5hgYaQXGdGnCrsx6mPceGEBseGT7fyNAJM/x0833tbopbf.mp4?sdtfrom=v1010&guid=a0f862b346c454ecab4ef2998c08b398&vkey=6117327D476AA92C8CDE5B43EE965886F3243BEED7A225EEA6AAA22C8343F9B9AF530688315D26BB8EE2475E196FA05EC9FF17FC4AEEE34C1BC8E3635E5DAD2360ED2257BE3E7927237E5A88DB4376B67EDE383A4449B84316AFF778880B2FAFFF5815F40936823EE6BC1710B52F352D62D75F1D853F52AE',
      playRate: 1,
      volumeRate: 1,
      currentTime: 0,
      bufferTime: 0,
      duration: 0,
      speedCls: 1,
      loading: true,
      end: false,
      fullState: false,
      error: false,
      playing: false,
      showRate: false,
      fullWindowState: false,
    }
  },
  methods: {
    empty() {},
    showRateClick() {
      this.showRate = !this.showRate;
    },
    play() {
      if (this.video.paused) {
        this.video.play();
      } else{
        this.video.pause();
      }
    },
    speed(rate) {
      this.video.playbackRate = rate;
      this.speedCls = rate;
      setTimeout(() => {
        this.showRate = false;
      }, 300);
    },
    volume(volume) {
      this.video.volume = volume;
    },
    fullPage() {
      this.fullState = true;
      setTimeout(() => {
        this.exitPage();
      }, 2000);
    },
    fullSceen() {
      this.fullWindowState = !this.fullWindowState;
      if (this.fullWindowState) {
        this.exitSceen();
      } else {
        this.showFullSceen();
      }
    },
    showFullSceen() {
      var docElm = this.$refs['video-area']; 
      //W3C
      if(docElm.requestFullscreen){
        docElm.requestFullscreen();
      }
      //FireFox
      else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      }
      //Chrome等
      else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
      }
      //IE11
      else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      }
    },
    exitSceen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
      else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      }
      else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
      else if (document.msExitFullscreen) {
         document.msExitFullscreen();
      }
    },
    exitPage() {
      this.fullState = false;
    },
    jump(currentTime) {
      this.video.currentTime = currentTime;
    },

  },
  mounted() {
    this.video = this.$refs.video;
    const myVid = this.video;

    // 始播放视频了
    myVid.oncanplay=() => {
      this.error = false;
      this.loading = false;
      this.end = false;
      this.playRate = myVid.playbackRate;
      this.volumeRate = myVid.volume;
      this.currentTime = myVid.currentTime;
      this.duration = myVid.duration;
      this.bufferTime = this.video.buffered.end(this.video.buffered.length - 1);
      console.log(`oncanplay 视频播放器已经可以开始播放视频了，但是只是预期可以正常播放，不保证之后的播放不会出现缓冲等待。 `);
    }
    this.video.onprogress = () => {
      this.bufferTime = this.video.buffered.end(this.video.buffered.length - 1);
      console.log('onprogress');
    }
    myVid.ontimeupdate=() => {
      this.currentTime = Math.round(myVid.currentTime);
      if (this.currentTime > this.bufferTime) {
        this.bufferTime = this.currentTime;
      }
      console.log(`ontimeupdate currentTime属性表示时间已经改变`);
    }
    myVid.onwaiting=() => {
      this.loading = true;
      console.log(`onwaiting 播放由于下一帧数据未获取到导致播放停止，但是播放器没有主动预期其停止，仍然在努力的获取数据，简单的说就是在等待下一帧视频数据，暂时还无法播放。 `);
    }
    myVid.onended=()=>{
      this.end = true;
      console.log(`onended //播放结束 loop 的情况下不会触发  `);
    }
    myVid.onerror=()=>{
      this.error = true;
      console.log(`onerror 请求数据时遇到错误`);
      //1.用户终止 2.网络错误 3.解码错误 4.URL无效
      // alert(myVid.error.code);
    }
    myVid.onplaying=()=>{
      this.playing = true;
      console.log(`onplaying 真正处于播放的状态，这个时候我们才是真正的在观看视频。 `);
    }
    myVid.onpause=()=>{
      this.playing = false;
      console.log(`onpause 暂停播放时触发 `);
    }
    myVid.onratechange=()=>{
      this.playRate = this.video.playbackRate;
      console.log(`onratechange  //播放速率改变  `);
    }
    myVid.onvolumechange=()=>{
      this.volumeRate = this.video.volume;
      console.log(`onvolumechange  //播放音量改变  `);
    }

    

    myVid.onplay=()=>{
      console.log(`onplay 开始播放时触发 `);
    }
    myVid.onabort=()=>{
      console.log(`onabort 客户端主动终止下载（不是因为错误引起）， `);
    }
    myVid.oncanplaythrough=()=>{
      console.log(`oncanplaythrough 可以保持当前的下载速度的情况下不被中断地播放完毕`);
    }
    myVid.ondurationchange=()=>{
      console.log(`durationchange 资源长度改变  `);
    }
    myVid.onemptied=()=>{
      console.log(`onemptied 媒体被清空`);
    }
    myVid.onloadeddata=()=>{
      console.log(`onloadeddata "视频播放器第一次完成了当前播放位置的视频渲染。"`);
    }
    myVid.onloadedmetadata=()=>{
      console.log(`onloadedmetadata 获取视频meta信息完毕，这个时候播放器已经获取到了视频时长和视频资源的文件大小。 `);
    }
    myVid.onloadstart = ()=>{
      console.log(`onloadstart  客户端开始请求数据  `);
    }
    myVid.onmozaudiovailable = ()=>{
      console.log(`onmozaudiovailable  音频数据缓存并交给音频层处理时  `);
    }
    myVid.onseeked=()=>{
      console.log(` //seeked 寻找完毕 `);
    }
    myVid.onseeking=()=>{
      console.log(` //seeking  寻找中 点击一个为（缓存）下载的区域`);
    }
    myVid.onstalled=()=>{
      console.log(`onstalled 尝试获取媒体数据但数据不可用`);
    }
    myVid.onsuspend=()=>{
      console.log(`onsuspend 媒体资源加载终止，下载完成或者其他原因暂停`);
    }
    
  },
}
</script>