背景描述：
实现一款视频播放器，同时支持直播和录播功能
功能清单：
支持解析m3u8或flv两种直播流，
支持录播且多段分段视频播放
支持直播流之间互相切换
支持直播与录播之间互相切换
支持播放器工具栏定制化开发
技术选型
video.js + flv.js + videojs-flvjs
videojs
Video.js是专为HTML5世界打造的网络视频播放器。它支持HTML5和Flash视频，以及YouTube和Vimeo（通过插件）。它支持在台式机和移动设备上播放视频。该项目始于2010年年中，现在已在播放器上使用50,000 100,000 200,000 40万个网站。
定位： HTML5 & Flash video player
特点：
支持直播、录播、以及集成第三方插件播放技术，同事支持定制化控制栏开发；
并且在该社区已经建立了数百个您可以安装的皮肤和插件，例如Chromecast，IMA甚至VR
初始化方式：
1.引用库
<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
-
html部分
<video id="my-player" class="video-js"> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank"> supports HTML5 video </a> </p> </video> -
js部分
var player = videojs('my-player', { techOrder: ["html5"], autoplay: "muted", controls: true, controlBar: { volumePanel: false, remainingTimeDisplay: false, progressControl: false, fullscreenToggle: false, audioTrackButton: false, playToggle: false, liveDisplay: false, pictureInPictureToggle: false }, sources: [ { src: "http://localhost:8083/video/video/oceans.mp4", type: "video/mp4" //录播 }, { src: "http://ivi.bupt.edu.cn/hls/hunanhd.m3u8", type: "application/x-mpegURL" //直播 } ] }, function onPlayerReady() { videojs.log('Your player is ready!'); // In this context, `this` is the player that was created by Video.js. this.play(); // How about an event listener? this.on('ended', function() { videojs.log('Awww...over so soon?!'); }); });
代码解释：当录播源oceans.mp4初始化不成功的情况下会采用湖南卫视直播流进行播放（不支持多段分段处理），且定制化了默认组件初始化方式
flvjs
用纯JavaScript编写的HTML5 Flash Video（FLV）播放器，不带Flash，
flv.js的工作原理是将FLV文件流转换为ISO BMFF（分段MP4）段，然后<video>通过Media Source Extensions API 将mp4段馈送到HTML5 元素中。
定位：HTML5 FLV Player
特点：
具有H.264 + AAC / MP3编解码器播放功能的FLV容器
多段分段视频播放
HTTP FLV低延迟实时流播放
通过WebSocket进行FLV实时流播放
与Chrome，FireFox，Safari 10，IE11和Edge兼容
极低的开销，浏览器可以加速硬件
初始化方式：
1.引用库
<script src="flv.min.js"></script>
2.html部分
<video id="videoElement"></video>
3.js部分
//场景1：直播
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: "https://dlhdl-cdn.zhanqi.tv/zqlive/197952_NHycj.flv",
isLive: true
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
//场景2：录播（单段）
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://localhost:8083/video/video/bbb.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
//场景3：录播（多段分段）
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
duration: 73000,
segments: [
{
duration: 33000,
url: "http://localhost:8083/video/video/bbb.flv"
},
{
duration: 40000,
url: "http://localhost:8083/video/video/play.flv"
}
]
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
期中总结：
就目前前面所看到的，videojs满足了直播及录播部分的功能但对于多段处理没有解决办法，而flvjs满足了直播，录播，多段处理，但对于视频格式局限于flv，且不能定制化开发控制栏
videojs与flvjs本质上是两个不相关的库，无论是技术上还是初始化实现上，而我们的需求功能点恰巧分散在这两个库中，如何将其融合呢，接下来登场的是videojs-flv
videojs-flvjs
该库允许Video.js技术使用flv.js通过MSE（而非Flash）播放FLV
定位：让videojs可以使用flvjs的技术去播放FLV格式视频文件
初始化方式：
1.引用库
<!-- Video.js -->
<link href="//path/to/video-js.css" rel="stylesheet">
<script src="//path/to/video.min.js"></script>
<!-- flv.js -->
<script src="//path/to/flv.min.js"></script>
<!-- videojs-flvjs -->
<script src="//path/to/videojs-flvjs.min.js"></script>
2.html部分
<video id="videojs-flvjs-player"></video>
3.js部分
//场景1 录播(单段)
videojs('videojs-flvjs-player', {
techOrder: ['html5', 'flvjs'],
flvjs: {
mediaDataSource: {
isLive: false,
cors: true,
withCredentials: false
}
},
sources: [{ src: "http://localhost:8083/video/video/bbb.flv", type: "video/flv"}]
});
//场景2 录播(多段)
videojs('videojs-flvjs-player', {
techOrder: ['html5', 'flvjs'],
flvjs: {
mediaDataSource: {
isLive: false,
cors: true,
withCredentials: false,
duration: 73000,
segments: [
{
duration: 33000,
url: "http://localhost:8083/video/video/bbb.flv"
},
{
duration: 40000,
url: "http://localhost:8083/video/video/play.flv"
}
]
},
sources: [{ src: "-1", type: "video/flv"}]
}
});
期末总结：
videojs是支持集成第三方插件播放技术，它默认是支持html5和flash两种技术方式，而videojs-flv其实是给videojs注册了一个针对flv格式的解析技术。
接下来我们看一下videojs-flv的源码
首先他从全局环境获取到了videojs的全局函数
所以官网才会说是通过flvjs技术去播放flv格式文件，不过官网只给出了通过videojs初始化单段的案例也就是场景一（单段）的案例，并没有给出结合之后如何初始化多段分段播放的例子，这里着实踩了不少坑。遇到这种情况，首先通过源码能够锁定大方向没错，只要flv能支持的功能，结合之后videojs肯定也是支持的，不需要犹豫，其次官方没有给出详细案例的情况，需要我们大胆的去尝试和验证。其实最后多段的实现案例中，source中对象的src为-1并没有任何意义，但是一定得有内容，不能为空字符串。关键一点，type必须指定video/flv格式，这是和用flvjs去初始化多段分段的案例中不同的地方。
至此，通过videojs-flvjs将videojs和flvjs两个库进行了一个融合，达到了功能清单中所有的功能在一个播放器实现的技术需求。
最终采用的直播方式为：HLS提供 的m3u8视频直播流，及flv格式多段录播文件流。期间定制化了播放器控制栏组件，下一章预备分享，定制化videojs控制栏组件开发。敬请期待。。。
