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

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

github地址

xgplayer配置地址

1. npm install xgplayer --save

2. 组件内引入

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')
复制代码