当前位置: 首页 > 工具软件 > Flv.js > 使用案例 >

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

洪俊能
2023-12-01

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

 类似资料: