Videojs-H5播放器(video标签播放文件流)

Web player，我们都知道flash插件，这是一个很强大很无奈的插件，是标准不统一的结果。作为一个程徐苑，我必须使用h5来实现它，我们将忽略旧版本的ie。
下面是实现它的方法：
视频格式一般浏览器都支持ogg、mpeg4、webM格式，但也要看浏览器和版本。这里就不说了。你想了解的信息很多，可以百度下载。
你有没有想过为什么视频是这些格式，却无法播放？其实是因为视频的编码。一般h5只支持ogg(theorg视频编解码器)、webM(vp8视频编解码器)和MP4(p64视频编解码器)。H5不支持其他代码的视频。
视频编码器转换我们以mp4视频格式为例。编码转换其实有很多工具。我常用的ffmpeg，简单易用，功能强大。用一些简单的转换代码，具体用法就不提了，不是本文的重点。
MPEG-I input . MP4-VCODEC p 64 output . MP4-I-指定源视频地址-VCODEC-指定视频编码格式h5的视频标签和管道。我们想要实现的是一个流式视频播放器。好处当然是体验更好。如果给你一个1G的视频，你会直接做什么？可想而知，加载时间长，用户体验肯定不好。这时候我们就需要给video加一个管道，让它边加载边播放。想象一下如果很美；
事不宜迟，简单介绍一下如何实现吧！
1.视频分割
首先，我们肯定需要对大视频进行分段。使用ffmpeg，我们可以把视频分成N个小视频。具体百度，这里就不介绍了。
2、muxjs
这是一个视频格式包，用javascript实现，使用方法也很简单。
//创建一个transmixer对象let trans mixer=newmuxjs . MP4 . trans mixer()；transmuxer.on(‘data ‘，(segment)={ let data=new uint 8 array(segment . init segment . byte length segment . data . byte length)；data.set(segment.initSegment，0)；data.set(segment.data，segment . init segment . byte length)；console . log(muxjs . MP4 . tools . inspect(data))；sourceBuffer.appendBuffer(数据)；})//取第一个视频的数据，数据事件在你推送到transmuxer对象的时候会被惩罚。获取(url)。然后((response)={ return response . array buffer()；}).然后((response)={ trans muxer . push(new uint 8 array(response))；trans muxer . flush()；})3、MSE
全称是媒体源扩展，是视频流的对象。利用这个，我们可以用管道连接蓄水池。
let media source=new media source()；//创建一个transmixer对象let trans mixer=new muxjs . MP4 . trans mixer()；//获取视频标签对象，赋值src video=document . query selector(‘ video ‘)；video . src=URL . createobjecturl(media source)；//添加mediaSource流载体的sourceopen事件media source . addevent listener(‘ source open ‘，appendfirstsgment)；MediaSource的sourceopen事件是打开流管道的开关。具体api可以百度，很多。
总结：如上所述，可以实现流式h5视频播放器。
使用的主要插件：
Ffmpeg -视频编码转换，视频分割等。
muxjs——小视频的封装主要是为了让视频完全支持MSE，其实就是转换成流视频。
MES – h5视频标签的升级和强化