1.背景

传统的播放视频是采用 flash 播放器方式，然而各大浏览器厂商都不再支持flash , 我们不得不寻找其他解决方案。

2.说明

2.1 Flv.js

flv.js 是一个HTML5 Flash视频(FLV)播放器，它通过纯JavaScript编写，没有使用 Flash。它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流，并实时转封装为 fmp4 ，通过 Media Source Extensions 喂给浏览器。

它依赖于媒体源扩展 MSE ( Media Source Extensions ）来工作。它来自 Bilibili 开发和开源。

主站：https://github.com/Bilibili/flv.js/
示例：http://bilibili.github.io/flv.js/demo/

功能：

FLV 容器，具有 H.264 + AAC 编解码器播放功能
多部分分段视频播放
HTTP FLV 低延迟实时流播放
FLV 通过 WebSocket 实时流播放
兼容 Chrome, FireFox, Safari 10, IE11 和 Edge
十分低开销，并且通过你的浏览器进行硬件加速

flv.js依赖的浏览器特性兼容列表

HTML5 Video
Media Source Extensions
WebSocket
HTTP FLV: fetch 或 stream

2.1 reflv

reflv 是对 flv.js 的 react 组件封装。

3. DEMO

3.1 编写一个直接使用flv.js 的 DEMO

步骤如下：

(1) 首先，需要个 flv 源
(2) 引入 flv.js
(3) JS代码播放

(1) 首先，需要个 flv 源
如果有后端提供个最好，如果有个视频比如mp4的，可以下载个 ffmpeg 工具进行转换。

ffmpeg 转换指令

ffmpeg -i demo.mp4 -c:v libx264 -crf 19 demo.flv

(2) 引入 flv.js

通过 NPM 安装

Installation
npm install --save flv.js

那如果想直接在原生js下使用呢？找到上面安装后的文件夹 node_module/flv.js/dest 目录下，把 js 文件复制出来即可。

(3) JS代码播放
先 createPlayer，加载控件，执行 flvPlayer.play() 即可。

<script src="flv.min.js"></script>
<video id="videoElement" controls autoplay muted></video>
<script>if (flvjs.isSupported()) {var videoElement = document.getElementById('videoElement');var flvPlayer = flvjs.createPlayer({type: 'flv',url: 'movie.flv'});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();}
</script>

3.2 编写一个直接使用 Rflv 的 DEMO

reflv 是对 flv.js 的 react 组件封装, 便于在 React 工程下直接使用。

步骤：

(1) 安装 Rflv
(2) 使用 Rflv 标签
(3) 更改视频源地址

(1) 安装 Rflv

(2) 使用 Rflv 标签

    import Reflv from 'reflv';...class VideoPlay extends React.Component {constructor(props) {super(props);this.state = {url: props.url};}componentWillReceiveProps (nextProps) {console.log("nextProps = ",nextProps.url)this.setState({url: nextProps.url});}render() {return (<div><h1>url is:{this.state.url}</h1><Reflv key={this.state.url} url={this.state.url} type="flv"  cors config={{enableWorker: true,enableStashBuffer: false,stashInitialSize: 128,}}></Reflv></div>);}}

注意：在组件中修改 url 属性不会导致 Rflv 重新渲染，需要加上 key={this.state.url} 就可以了

<Reflv key={this.state.url} url={this.state.url} type="flv"

遇到不能自动播放的情况
原因是包含声音，在没有用户产生交互的情况下是不能自动播放的。
解决方法：给video标签加入<video muted></video> 静音即可。

<video muted></video>

4.参考

https://github.com/Bilibili/flv.js/
https://www.oschina.net/p/flv-js?hmsr=aladdin1e1

https://www.jqhtml.com/7847.html

https://www.javaroad.cn/questions/151551

5.我的代码示例

1.先npm下载

npm install flv.js

2.代码引入

muted: 自动播放

loop="true" 循环播放

<template><div><videoautoplaycontrolswidth="100%"height="500"id="myVideo"mutedloop="true"></video></div>
</template><script>
import flvjs from "flv.js";export default {props: {msg: String,},mounted() {this.$nextTick(() => {this.videoPlayer();});},methods: {videoPlayer() {if (flvjs.isSupported()) {var videoElement = document.getElementById("myVideo");var flvPlayer = flvjs.createPlayer({type: "mp4",url: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-720p.mp4", //你的url地址});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();}},},
};
</script>