vue 视频播放器 xgplayer 实践

简介

• xgplayer 西瓜播放器
• 西瓜播放器是一个基于HTML5播放器，它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。支持自定义ui，在功能上也做了大胆的尝试：摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力，让本不支持流式播放的 mp4 能做到分段加载，这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时，它也集成了对 flv、hls、dash 的点播和直播支持。

支持播放格式

• MP4
• HLS
• FLV
• MPEG-DASH

起步

安装

# 最新稳定版
$ npm install xgplayer

• 对于已有项目也可以通过 CDN 引入，代码如下：

<script src="//cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js" type="text/javascript"></script>

注意: 生产环境使用时请在CDN地址中锁定版本，CDN使用方法参考 jsdelivr

使用

• 在页面提供占位 DOM

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

• 实例化

let player = new Player({
  id: 'mse',
  url: '//abc.com/**/*.mp4'
});

• 上边其实就已经完成了最简单的MP4播放，但是原生video就能搞定的东西谁会用它呢？

实践,在vue中播放flv视频流

安装

• 首先依然是下载稳定版的xgplayer

# 最新稳定版
$ npm install xgplayer

然后安装flv插件 文档插件地址,提供两种插件

xgplayer-flv 示例地址

• xgplayer-flv 对于flv协议的点播(直播)可以使用该插件完成，这个插件没依赖任何第三方代码完全自主实现。优点是代码结构清晰、比flv.js轻量很多、官方维护。
• 执行 npm i xgplayer-flv安装

import 'xgplayer';
import FlvPlayer from 'xgplayer-flv';

let player = new FlvPlayer({
  id: 'xg',
  url: './xgplayer-demo.flv',
  poster: './poster.png',
  isLive: false,
  preloadTime: 30,
  minCachedTime: 5,
  cors: true
})

• xgplayer-flv插件在xgplayer播放器基础配置的基础上还具有一些可选的特殊配置项。

配置项	含义	默认值
isLive	是否直播	false
preloadTime	预加载时长(秒)	false
minCachedTime	当前播放时间距离已缓存资源片段结束点剩多长时间时开始请求新片段(秒)	false
cors	请求是否跨域	true

xgplayer-flv.js示例地址

• 对于flv协议的点播(直播)可以使用该插件完成，这个插件依赖flv.js。

import 'xgplayer';
import FlvJsPlayer from 'xgplayer-flv.js';

let player = new FlvJsPlayer({
  id: 'xg',
  url: '//abc.com/**/*.flv',
  hasVideo: true,
  hasAudio: true,
  flvOptionalConfig: {
    enableWorker: true
  } //flv.js可选配置项 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config)
})

• xgplayer-flv.js插件在xgplayer播放器基础配置的基础上还具有一些flv.js专属配置项，请参考 flv.js配置

注意 xgplayer-flv和xgplayer-flv.js插件在请求跨域视频源时需要视频源端带range服务。

完整vue内示例

• 例子包含视频截图，监听截图事件(官网未标出)，获取截图后转base64 直接img贴图，base64转文件。

<template>
  <div>
    // 播放器
    <div id="mse"></div>

    // 截图图片展示
    <img :src="imgurl" alt="">
  </div>
</template>

<script>
  import 'xgplayer';
  import FlvPlayer from 'xgplayer-flv';

  export default {
    name: "xgplayer",
    data() {
      return {
        imgurl: ''
      }
    },
    mounted() {
      this.initVideo()
    },
    methods: {
      initVideo() {
        let player = new FlvPlayer({
          id: 'mse',
          url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv',
          videoInit: true, // 显示首帧
          lang: 'zh-cn',
          // fluid: true,
          autoplay: false,
          screenShot: true,
          isLive: true,
          preloadTime: 30,
          minCachedTime: 5,
          cors: true
        })

        // 监听播放器截图事件
        player.on('screenShot', screenShotImg=> {
          // 替换type类型
          let base64Data = screenShotImg.replace('data:application/octet-stream;base64', 'data:image/png;base64')

          // 转文件
          // this.imgurl = this.getBaseImage(base64Data, '1.png')

          // base64直接赋值img标签展示
          this.imgurl = base64Data
          console.log(screenShotImg, this.imgurl)
        })
      },

      // base64转文件
      getBaseImage(dataUrl, fileName) {
        let arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)
        while(n--){
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], fileName, {type:mime})
      },
    }
  }
</script>

<style scoped>

</style>

官方文档地址

最后

• 播放器不支持 rtmp，如果需要建议使用 vue-video-player 其播放rtmp依赖 videojs-flash