web的视频播放器之西瓜视频xgplayer

最近公司需要做视频点播，因为ios和安卓的各种机型出现的各种问题都不一致，为了紧急上线，故用了vue-video-palyer作为插件使用，但是全屏的时候在安卓上又有新的问题（最后躲懒把全屏功能去掉了，把bug封存来了），趁着正在发布，我研究了一下西瓜视频的播放器，发现非常好用。bug最少了，功能丰富（有弹幕，清晰度选择，播放横屏等）。自己写了demo给大家分享一下吧；希望大家试用有什么问题可以一起研究

github地址

xgplayer配置地址

npm install xgplayer --save
组件内引入

import Player from 'xgplayer'

<div id="mse"></div>

methods: {
    // 设置视频配置(注意：initPlayer应放在异步函数里或mounted之后，不可在created里直接加载，否则不生效)
    initPlayer (url) {
      this.$nextTick(res => {
        this.Player = new Player({
          // el、url为必选配置，其它为可选配置
          id: 'mse',
          url: url,
          width: '100%',
          volume: 0.6, // 初始音量
          autoplay: false, // 自动播放
          playbackRate: [0.5, 0.75, 1, 1.5, 2], // 当前播放速度
          poster: 'https://xxx.xxxx.com/file/group1/M00/01/7C/CgYBWmEDxuyASL5NAABO9dSpsUA983.jpg',
          defaultPlaybackRate: 1, // 播放速度设置为1
          playsinline: true,
          // rotate: {
          //   clockwise: true,
          //   innerRotate: true
          // },
          miniplayerConfig: {
            bottom: 200,
            right: 0,
            width: 320,
            height: 180
          },
          'x5-video-player-fullscreen': true,
          'x5-video-orientation': 'landscape'
        })
      })
    },
   }

this.initPlayer('https://xxxx.oss-cn-shanghai.aliyuncs.com/video/promotionalfilm.mp4')