手机flv播放器（手机能播放m3u8格式的播放器使用方法）

flv（flash video）流媒体格式，是随着 flash mx 的推出发展而来的视频格式。其文件体积小，一般1分钟只占1mb，是普通视频文件大小的1/3，且视频质量良好，广受视频网站欢迎。然而，flv 格式往往利用 flash player 进行解码播放，但如今，主流浏览器都已经放弃支持 flash playe。同时，html5 原生的 video 标签并不支持 flv 格式。如何在 html5 时代，还能发挥 flv 视频格式的优势呢？作为一个蓬勃发展中的视频网站，bilibili 开源了 flv 视频的 html5 播放器，使得 html5 与 flv 得以结合。

flv视频播放器

简介

flv.js，是 bilibili（哔哩哔哩）在 github 上开源的 html5 的 flv 视频播放器，项目位于
https://github.com/bilibili/flv.js，目前版本为 v1.5.0。flv.js 支持 h.264 + aac/mp3 编码的 flv 视频，支持视频分片，支持低延迟的 http/websocket 协议的 flv 格式的直播视频流，兼容 chrome、firefox、safari 10、ie 11 和 edge，具有极低的消耗，支持浏览器硬件加速。原理上，flv.js 把 flv 视频流转码为 iso bmff（切片的mp4），然后把切片放到 html 的 video 元素中进行播放。

flv.js项目

安装

flv.js 可以使用 npm 直接安装，加入到前端项目依赖中：

npm install --save flv.js

也可以使用国内镜像的 cnpm 进行安装：

cnpm install --save flv.js

还可以在本地进行构建：

npm install             # 安装开发依赖
npm install -g gulp  # 安装构建工具 gulp
gulp release           # 构建发布

flv.js 使用 ecmascript 6 编写，使用 babel compiler 转译到 ecmascript5，并使用 browserify 进行打包。

示例

flv.js 的架构设计如下：

flv.js架构设计

核心部分为 flvdemuxer 和 mp4remuxer，分别对 flv 视频进行分离，和封装为 mp4 视频。内部通过多个controller控制器，发送指令，对数据流的操作进行控制。

flv.js 使用简单，通过接口 createplayer 实例化播放器，配置对应的视频源，然后，挂载到 dom 容器上，并调用 load() 进行加载，调用 play() 进行播放：

<script src="flv.min.js"></script>
<video id="videoelement"></video>
<script>
    if (flvjs.issupported()) {
        var videoelement = document.getelementbyid('videoelement');
        var flvplayer = flvjs.createplayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        });
        flvplayer.attachmediaelement(videoelement);
        flvplayer.load();
        flvplayer.play();
    }
</script>

注意到，flv.js 提供了 issupported 接口，可以很方便地判断 flv.js 是否支持当前的浏览器环境。flv.js提供了一个测试用的 demo 页面，可以进行视频播放的测试：

flv.js demo

flv.js 主要提供了3个函数：

• flvjs.createplayer()：接受配置，实例化播放器
• flvjs.issupported()：是否支持当前浏览器
• flvjs.getfeaturelist()：支持的特性的列表

还有3个类：

• flvjs.flvplayer：flv 播放器
• flvjs.nativeplayer：原生 html5 播放器，可以用户单 mp4 文件的播放
• flvjs.loggingcontrol：日志控制

以及3个枚举：

• flvjs.events：播放器事件
• flvjs.errortypes：错误类型
• flvjs.errordetails：错误具体信息

使用时的主要接口是 createplayer，它的函数签名如下：

function createplayer(mediadatasource: mediadatasource, config?: config): player;

其中 mediadatasource 进行视频流配置，常用的参数包括：

• type：视频类型，flv 或 mp4
• islive：是否为直播视频流
• cors：获取视频数据时是否启用 cors
• url：视频流地址
• segments：视频切片配置

而 config 进行 flv.js 播放器内部配置，包括worker、缓存、加载策略等的配置。

对于体积较大的视频，往往在服务器中会进行切片处理。flv.js 支持对于切片视频的加载播放，通过提供 segments 配置。segments 是一个切片配置的列表，每个配置包括了视频长度、文件大小和视频地址：

"segments": [
        {
            "duration": 1234,  // in milliseconds
            "filesize": 5678,  // in bytes
            "url": "http://cdn.flvplayback.com/segments-1.flv"
        },
        {
            "duration": 2345,
            "filesize": 6789,
            "url": "http://cdn.flvplayback.com/segments-2.flv"
        },
        {
            "duration": 4567,
            "filesize": 7890,
            "url": "http://cdn.flvplayback.com/segments-3.flv"
        }
        // more segments...
    ]

flv.js 支持直播视频流的播放，通过 islive 配置实现，支持 http 协议的视频流：

{
    // http flv
    "type": "flv",
    "islive": true,
    "url": "http://127.0.0.1:8080/live/livestream.flv"
}

以及 websocket 协议的视频流：

{
    // flv over websocket
    "type": "flv",
    "islive": true,
    "url": "ws://127.0.0.1:9090/live/livestream.flv"
}

flv.js项目

总结

flv.js 作为一个 html5 视频播放器，实现了通过原生 javascript，在 html5 页面上进行 flv 视频的播放，充分利用了 flv 格式优秀的体积和质量，提供了更为优秀的播放体验，降低了视频服务器和负荷，同时支持切片、直播、懒加载等进阶特性，功能丰富。flv.js 目前已被广泛应用到视频播放网站中，使用者众多，同时代码质量高，值得使用、研究和学习。