龙空技术网

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

科技之洞察 423

前言:

此刻大家对“h5视频播放器播放不了”大概比较重视,大家都想要了解一些“h5视频播放器播放不了”的相关内容。那么小编在网摘上搜集了一些对于“h5视频播放器播放不了””的相关知识,希望你们能喜欢,朋友们一起来学习一下吧!

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标签对象,并赋值srcvideo = document.querySelector('video');video.src = URL.createObjectURL(mediaSource);//添加mediaSource流载体的sourceopen事件mediaSource.addEventListener("sourceopen", appendFirstSegment);

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

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

主要用到的插件:

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

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

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

标签: #h5视频播放器播放不了 #h5视频播放器技术