示例：使用 Flv.js 和 Reflv 播放视频

1.背景

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

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 (
            <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>

    注意： 在组件中修改 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>