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'

下面这个文件在百度网盘

第三步 准备一个容器

<videoid="videoElementByFlv"class="flvplayer-app"controlsautoplaymuted></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分片上传