12月10, 2018

html5 video那些事

最近做宝马项目中研究了很多跟video有关事,然后也被这个东西的复杂度给整懵逼了!!!特别是在各个端的适配上,简直让人相当蛋疼。

video其实是早于web存在的一个东西,它非常的丰富多样。早前web端引入video一般都是使用flash,但随着html5的发起,以及flash技术的落幕,视频在web端的播放变成了一个VideoHTMLElement元素。同时RTC技术的诞生,mediaRecord也随着诞生了。但是这项技术它还是一个正在成长中的孩子,它经常给各种开发宝宝们带来各种麻烦。

1、目前我们常遇见的视频格式:

  • rm/ rmvb/ mkv
  • avi(Audio Video Interleave)
  • flv(Flash Video)
  • mp4(MPEG-4 Part 14)
  • ogv
  • webm

2、最基本的video使用

H5中视频播放,像我们以前使用IMG标签插入图片到网页里一样方便,写一个video设置一个src属性指定媒体源地址就可以实现媒体播放了,针对低版本浏览器video的HTML结构也提供了友好的兼容方案,只需要在video标签内写上不兼容时要展示的HTML内容即可。 <video src="..." controls>你当前浏览器不支持播放该视频</video>

当然videoHtmlElement的属性还有很多很多,包括autoplay\duration\currenttime....等等,具体参考https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement

这些参数很好地帮助我们对视频播放进行了控制。

3、兼容性

那么什么浏览器可以使用video标签来播放视频呢?当然首先就是需要该浏览器支持html5,同时支持HTML5 video标签。通过can i use,咱们很容易的知,目前video在各个浏览器的支持情况还是不错,

alt

无论是pc端还是手机端,除了一些低端的浏览器或者过旧版本的浏览器,基本上都已经对video有了很好的兼容。但是即使是这样,video依然困惑着大家,为什么呢?因为在各个浏览器下,video的表现形式是不一样,在不同设备上,video支持播放的视频格式也是不一样的,这就很让人头疼。比如同样是webm格式视频,在pc端浏览器的支持就非常好,但是在手机端,支持程度就很不一,在安卓手机浏览器上,遇到webm格式时,浏览器会自动调用flash播放器来播放,但是在除了mac以外的ios系统中(pad和iphone)就不是这么友好了,遇到webm格式或者其他格式的视频,直接就不让播放,只支持播放MP4格式的视频,可以说非常强势了!

那么各个浏览器的视频播放格式又如何呢?

4、各个浏览器支持的视频播放格式

由于一开始不知道除了mac以外的其他ios系统仅支持播放MP4格式的视频,所以在这方面尝试了很多很多方法来解决webm格式视频在ios上无法播放的问题。一直没解决,后来看了各个端浏览器对视频格式的支持才知道这一点。

MP4:

alt

可以看出mp4格式非常受各个浏览器的欢迎,它的支持率几乎跟video的支持率一样,各个浏览器各个设备上都非常友好。那就没什么好说的了,既然它这么好。大家一般都不爱太深入了解合群的人,都喜欢研究不合群的东西。因为不合群的东西更神秘!

WEBM:

alt

相对MP4来说,webm就没有那么受待见了,除了chrome和firefox外,其他浏览器以及设备基本上都是小部分支持或者不支持,那么为什么我对webm这么较真呢,因为我使用了pc端进行了视频录制,而pc端录制出来的视频格式必须是webm格式,但是在回放的时候这种webm格式并不被广泛支持,所以这无疑对开发者来说是一项艰巨的任务,那么webm到底是什么编码格式?以及要如何解决各个端对它的兼容呢?这将会在下面给予解释。

OGG:

alt

ogg的被支持率跟webm差不多,也是一个不被广泛支持的对象。

M3u8:

alt

M3U8又是个什么东西呢?从can i use 的解释上可以大概猜出来了吧?这是一个直播流,从图上也很好看到了这个直播流的被支持率还是比较好的,比较突出的表现在移动端的支持上,相对来说是比较优秀的了!但是本文对此不着重介绍。有兴趣的同学可以自己私下去了解!

以上的几种格式基本上就是咱们在做视频时常见的几种了,那么回到webm那一段咱们抛出了两个问题。到底什么是webm,以及如何解决webm的支持性问题。

什么是webm?

webM是有GOOGLE提出的一个开放、免费的媒体文件格式。WEBM影片格式其实是以Matroska容器格式为基础开发的新容器格式,包括VP8影片轨和Ogg vorbis音轨,其中GOOGLE将拥有VP8视频编码技术授权开源。讲了这么多,到底它是什么?其实就是google自己开发的一种视频播放格式,所以chrome对webM的支持非常友好。

那么如果我们拥有一个webm格式的视频如何在移动端或者其他非chrome浏览器上播放呢?想了很久,只有一个下策,就是转码,既然它不被支持,那就转成一个被广泛支持的,比如转成MP4。用什么转?后端可以转,前端也可以转,阿里云服务器也能转,以上三种方案,最靠谱的就是后端转,方便,快捷!前端当然也能转,有一个叫ffmpeg.js的包,1.8M,加载速度非常慢,同时转换速度也很慢,如果你愿意你的前端界面加载慢,转码速度慢,可以尝试用前端来转。还有一种更方便的方案就是视频存阿里云上开通转码视频服务就可以,如果你是一名人民币玩家,这都不是事!

播放样式统一

统一播放器是如何选择当前设备应该用什么内核的播放器呢? 统一播放器判断流程如下图:

alt

video在不同浏览器上的展示形式是不一样的,这样会导致样式不统一,体验不统一。各浏览器展现样式如下如下:

alt alt alt alt alt alt alt

同一段视频在不同浏览器上,展现的形式是多种多样的,所以一般在web端会借助一些插件来统一页面格式,很多国内的大型视频网站也是自定义视频播放界面,比如腾讯视频网等都是,同时他们的视频都是统一的mp4格式。一些比较成熟的视频播放插件有video.js、还有两个一个是360的一个是其他产家的,我都给忘了名字了!!唉,记性好差。所以为了更好地兼容,一般都这么写video标签:

<video
  src="video.mp4" 
  controls
  poster="images.jpg"
  preload="auto" 
  webkit-playsinline="true"  // 解决移动端webkit内核的脱频问题
  playsinline="true"      //解决移动端脱频问题
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"   // 浏览器调起什么播放器问题
  x5-video-player-fullscreen="true"  // 是否全屏播放
  x5-video-orientation="portraint"
  style="object-fit:fill">
</video>

这真是棒棒的!同时一开始需要添加一些判断当前浏览器支持播放哪种格式的视频,js有一个api,叫canplaytype,这个函数可以判断当前浏览器是否支持播放你要播放的视频格式,使用如下:

let videoEl = document.createElement("video");

// 是否支持 MP4
videoEl.canPlayType('video/mp4') !== '';

// 是否支持 MP4 & 特定编码的
videoEl.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"') !== '';
// 是否支持 webm & 特定编码的
videoEl.canPlayType('video/webm; codecs="vp8, vorbis"') !== '';
// 是否支持 ogg & 特定编码的
videoEl.canPlayType('video/ogg; codecs="theora, vorbis"') !== '';

// 是否支持 HLS 的 m3u8
videoEl.canPlayType('application/vnd.apple.mpegURL') !== '';
// 是否支持 HLS 的 TS 切片
videoEl.canPlayType('video/mp2t; codecs="avc1.42E01E,mp4a.40.2"') !== '';

可以说很完美了,嘻嘻

关于视频录制和获取本地视频流的内容等下次再更新,下次见!

本文链接:https://luodao.me/post/video.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。