流媒体之播放flv格式的视频


起因

项目之前支持高清预览，但是不支持flv格式的视频。所以，为了让他支持flv格式，我去整理了一些相关资料，发现，有两种方式，一个是采用插件，一个是使用b站开源的flv.js。详情见下：

flv.js简介

Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。

  1. 概览：
    一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。
    flv.js 是使用 ECMAScript 6 编写的，然后通过 Babel Compiler 编译成 ECMAScript 5，使用 Browserify 打包。
  2. 功能：
  • FLV 容器，具有 H.264 + AAC 编解码器播放功能
  • 多部分分段视频播放
  • HTTP FLV 低延迟实时流播放
  • FLV 通过 WebSocket 实时流播放
  • 兼容 Chrome, FireFox, Safari 10, IE11 和 Edge
  • 十分低开销，并且通过你的浏览器进行硬件加速

flv用法

话不多说，直接上demo,
demo1：这个是通过videojs和flv.js结合使用的，可以支持mp4，还有flv等多种格式。demo的核心在于videojs的配置，以及引入了flvjs，在报错后可以进行修改访问

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>video</title>
    <!-- Video.js -->
    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    <script src="//i2.wp.com/unpkg.com/video.js/dist/video.min.js"></script>
    <script src="//i2.wp.com/unpkg.com/flv.js/dist/flv.min.js"></script>
    <script src="//i2.wp.com/unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script>
</head>
 
<body>
    <div>
        <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered"  width="1024" height="768"> </video>
    </div>
</body>
 
</html>
<script>
var flvUrl = "https://mister-ben.github.io/videojs-flvjs/bbb.flv";
 
var player = videojs('videojs-flvjs-player', {<!-- -->
    techOrder: ['html5', 'flvjs'],
    flvjs: {<!-- -->
        mediaDataSource: {<!-- -->
            isLive: false,
            cors: true,
            withCredentials: false,
        },
    },
    sources: [{<!-- -->
        src: flvUrl,
        type: 'video/mp4'
    }],
    controls: true,
    preload: "none"
}, function onPlayerReady() {<!-- -->
    console.log('player ready')
 
    player.on('error', (err) => {<!-- -->
        console.log('first source load fail')
 
        player.src({<!-- -->
            src: flvUrl,
            type: 'video/x-flv'
        });
 
        player.ready(function() {<!-- -->
            console.log('player ready')
            player.load();
            player.play();
        });
    })
});
</script>

demo2 ：纯粹的flvjs，支持mp4和flv格式.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    <script src="//i2.wp.com/unpkg.com/video.js/dist/video.min.js"></script>
    <script src="//i2.wp.com/unpkg.com/flv.js/dist/flv.min.js"></script>
    <script src="//i2.wp.com/unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script>
</head>
<body>

 <video
         id="videoElement"
      class="video-component"
      ref="videoElement"
      controls
      autoplay
    >Your browser is too old which doesn't support HTML5 video.</video>


</body>
</html>
<script>
    if (flvjs.isSupported()) {<!-- -->
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({<!-- -->
            type: 'flv',
            url: 'https://mister-ben.github.io/videojs-flvjs/bbb.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

小结

参考上面两个demo，基本可以让你初步使用flvjs实现flv格式的视频的播放了。但是这有个坑，那就是跨域问题。如果跨域没有配置好，是无法播放视频的。

参考资料

  1. flv中文API文档