H5标签video，如何播放流视频

web视频播放器，我们都知道flash插件，这是个很牛逼又无奈的插件，都是标准不统一导致的结果，作为一名程序猿，我必须使用h5来实现，哪些ie老版本我们就忽略。

下面来说下如何实现：

• 视频格式

一般浏览器支持ogg、mpeg4、webM这几种格式，但是也是看浏览器以及版本的，这里我们不多说了，大家想了解可以百度下很多资料；

大家有没有想过，为什么存在视频是这几类格式，但播放不了的情况，其实是因为视频的编码导致的，一般h5只支持ogg（theorg视频编解码）、webM（vp8视频编解码）、MP4（h264视频编解码）。对应其他编码的视频，h5是无法支持的。

• 视频编码器转化

我们拿mp4视频格式来做个例子，编码转化的工具其实很多，本人比较常用的是ffmpeg，主要使用方便，而且很给力，加上一定简单的转化代码，具体用法就不说了，不是本文重点，

ffmpeg -i input.mp4 -vcodec h264 output.mp4

-i           ---------指定源视频地址
-vcodec---------指定视频编码格式

• h5的video标签加管道

我们要实现的是流水似的视频播放器，好处当然是体验更好了，如果一个1G的视频给你，是会怎么做，直接放到video播放吗？那可以想象需要加载很长时间的，用户体验肯定好不了。这时候我们就需要给video加上管道，让他一边加载一边播放，想象一下是不是很美好；

废话不多说，我们就好简单介绍下如何实现吧!

1、视频分段

最开始我们肯定是需要将大视频进行分段，使用ffmpeg就能将视频分成n份小视频。具体百度，这里不介绍。

2、muxjs

这个是一个视频格式的封装，他是用javascript来实现的，使用方法也很简单

// 创建muxjs的transmuxer对象
let transmuxer = new muxjs.mp4.Transmuxer();
transmuxer.on('data', (segment) => {
		let data = new Uint8Array(segment.initSegment.byteLength + segment.data.byteLength);
		data.set(segment.initSegment, 0);
		data.set(segment.data, segment.initSegment.byteLength);
		console.log(muxjs.mp4.tools.inspect(data));
		sourceBuffer.appendBuffer(data);
	})
	// 取第一个视频的数据，推入transmuxer对象时会处罚data事件。
	fetch(url).then((response) => {
		return response.arrayBuffer();
	}).then((response) => {
		transmuxer.push(new Uint8Array(response));
		transmuxer.flush();
	})

3、MSE

全名叫media Source Extensions，就是视频流的对象，使用这个我们就能给水库接上管子

let mediaSource = new MediaSource();
// 创建muxjs的transmuxer对象
let transmuxer = new muxjs.mp4.Transmuxer();
// 获取video标签对象，并赋值src
video = document.querySelector('video');
video.src = URL.createObjectURL(mediaSource);
//添加mediaSource流载体的sourceopen事件
mediaSource.addEventListener("sourceopen", appendFirstSegment);

mediaSource的sourceopen事件，就是打开流管道的开关，具体的api可以百度，很多

总结：如上所述就能实现一个流h5视频播放器。

主要用到的插件：

ffmpeg---视频编码转化，视频分段等

muxjs--小段视频的封装，主要是让视频能完全支持MSE,其实就是转化成支持流视频

MES--h5的video标签的升级加固