前言:
此刻大家对“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视频播放器技术