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 组件封装。
地址:https://github.com/gwuhaolin/reflv
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>
我的代码示例
见:https://github.com/vir56k/demo/blob/master/video_flv_js_demo/web/index.html
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"
我的代码示例
见:https://github.com/vir56k/demo/blob/master/video_reflv_demo/web/src/App.js
遇到不能自动播放的情况
原因是包含声音,在没有用户产生交互的情况下是不能自动播放的。
解决方法:给video标签加入<video muted></video> 静音即可。
<video muted></video>
4.参考
https://github.com/Bilibili/flv.js/https://www.oschina.net/p/flv-js?hmsr=aladdin1e1