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')
複製代碼