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

张云飞Vir

发布于 2021-04-30 14:52:31

8.1K0

文章被收录于专栏：写代码和思考写代码和思考

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

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

github

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度