web端实现视频播放，视频地址切换，清晰度切换，断点续播

原理：基于原生video标签进行扩展，使用的前端框架为vue2.x。

主要功能：视频地址切换，清晰度切换，断点续播，播放记录统计。

方法一（直接使用video）：

html部分：

    <video
      id="videoPlayer"
      ref="videoPlayer"
      controls
      preload="load"
      autoplay
      :src="currentSrc"
      class="video-js"
    ></video>

绑定的currentSrc为视频播放地址，从后台获取不同清晰度的视频播放url，当点击切换清晰度时，对src属性进行动态切换即可赋值。

进行断点记录和续播:

    1.当点击切换视频时，通过this.player.currentTime读取当前播放进度。

    2.为video新增播放监听事件，监听到canplaythrough（可以播放事件），再对currentTime赋值即可跳到记录的位置。

    mounted(){
       this.player.addEventListener('canplaythrough', this.addListener)
    }

    /**
     * 监听播放事件
     */
    addListener () {
      console.log('可以播放了')
      let timer = setInterval(() => {
        this.player.currentTime = this.process
        if (this.player.currentTime === this.process) {
          clearInterval(timer)
        }
      }, 500)
    }

播放记录统计:

    1.当监听到视频播放时，播放次数+1即可（需要注意的是，切换清晰度时，不应该再把浏览次数统计进去了）

    this.player.addEventListener('play', () => {
      if (this.scanFlag) {
        console.log('浏览记录++++++++++1')
        this.scanFlag = false
      }
    })

方法二（使用第三方库实现，推荐）：

西瓜播放器：https://v2.h5player.bytedance.com/api/#%E5%B1%9E%E6%80%A7

安装：

npm  install video.js

引入：

import vedioPlayer from 'xgplayer'
import 'video.js/dist/video-js.css'

使用：

<template>
  <div>
   <div id="videoPlayer"></div>
  </div>
</template>

// 初始化播放器
this.player = new vedioPlayer({
        id: 'videoPlayer',
        autoplay: true,
        volume: 0.3,
        loop: true,
        url: '',
        // poster: '' ,//视频封面
        playsinline: true,
        height: '100%',
        width: '100%',
      })

// 设置清晰度
this.player.emit('resourceReady', [
   {name: '高清', url: 'xxxxx'},
   {name: '流畅', url: 'xxxxx'},
   {name: '原画', url: 'xxxxx'}
])