flv.js 是一个使用纯JavaScript编写的FLV(HTML5 Flash Video)播放器

1、script引入

引入方式

<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.1/flv.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.1/flv.min.js"></script>

2、官方网站与文档

官方文档

示例网站

源码

码云源码

3、MuiPlayer

官网与相关文档

4、源码处理

使用说明

1、功能

FLV 容器，具有 H.264 + AAC 编解码器播放功能
多部分分段视频播放
HTTP FLV 低延迟实时流播放
FLV 通过 WebSocket 实时流播放
兼容 Chrome, FireFox, Safari 10, IE11 和 Edge
十分低开销，并且通过你的浏览器进行硬件加速
以上是官方的介绍，重点是开源让我们用了，谢谢B站的大神们

5、vue中使用

简书使用方法

第一步 先下载flv.js

npm install --save flv.js

第二步 引入

import flv from '/public/static/js/flv.min.js'

下面这个文件在百度网盘

第三步 准备一个容器

   <video
      id="videoElementByFlv"
      class="flvplayer-app"
      controls
      autoplay
      muted
    ></video>

第四步 逻辑部分

created() {
    this.init()
  },
  computed: {
  },
  methods: {
    init() {
      var that = this;
      // 在js中flv改为flvjs即可,flvjs是默认的参数
      if (flv.isSupported()) {
        setTimeout(function () {
          // 这里加了个200ms的定时器,原因是因为抓取元素之后vue无法瞬间响应
          var videoElement = document.getElementById('videoElementByFlv')
          that.flvPlayer = flv.createPlayer({
            url: "http://1011.hlsplay.aodianyun.com/demo/game.flv",
            type: 'flv',
          })
          that.flvPlayer.attachMediaElement(videoElement)
          that.flvPlayer.load()
        }, 200)
      }

    }

第五步、页面中展示

6、vue中使用Plupload分片上传

如果是单纯的图片不需要分片上传
比较大的视频需要分片上传

vue中使用Plupload分片上传