神刀安全网

H5视频播放之m3u8

HLS是什么

HLS,Http Live Streaming 是由Apple公司定义的用于实时流传输的协议,HLS基于HTTP协议实现,传输内容主要包括两部分,一是M3U8描述文件,二是TS媒体文件。我们可以理解其就是一种视频格式,这里对于其原理不做过多分析,如需了解,请查阅HLS相关资料。

基本情况

视频播放的场景主要是手机以及PC机。通过video标签播放.m3u8格式视频需要两个条件:

  1. 支持H5的video标签;
  2. 在条件1的基础上同时需要支持.m3u8类型的视频播放。

由于HLS这种协议是由Apple公司定义的,所以苹果手机能够很好的支持.m3u8视频的播放;android手机浏览器只要支持H5的video标签就基本上支持.m3u8这种类型的视频播放;而PC端浏览器即使支持H5的video标签,也不支持.m3u8视频的播放。

所以当我们项目中使用的是HLS(.m3m8)这种视频文件时,为了实现视频在不同场景下的正常播放,就必须对不能够正常播放视频的场景做相应的适配处理。那么,怎么解决呢?

我的解决方法

思路:对于PC端,由于不支持.m3u8类型视频的播放,所以使用其他的播放器进行播放;对于手机端,优先实现让不支持video标签的浏览器支持该标签,实在不行也采用PC端的解决方案。而解决问题的关键就是找到一个播放器。

引入适配H5插件
<script src="js/html5shiv.min.js"></script>
独立的播放器

播放器主要基于一个js文件以及两个swf文件,首先需要引入swfobject.js的js文件,如下:

<script src="js/swfobject.js"></script>

然后定义调用播放器的接口:

function mShow(hlsData){     var p = navigator.platform;     /*根据是否为PC端,分别定义播放器的样式*/     if(p.indexOf("Win") >= 0)         $("#player").css({"width":"100%","height":"485px"});     else         $("#player").css({"width":"100%","height":"9em"});      var flashvars = {             // M3U8 url, or any other url which compatible with SMP player (flv, mp4, f4m)             // escaped it for urls with ampersands //          src: escape("http://hls.videocc.net/ce0812b122/c/ce0812b1223bb292333a4ce6e092a949_3.m3u8"),             src: escape(hlsData),             // url to OSMF HLS Plugin             plugin_m3u8: "img/HLSProviderOSMF.swf",         };         var params = {             // self-explained parameters             allowFullScreen: true,             allowScriptAccess: "always",             bgcolor: "#000000"         };         var attrs = {             name: "player"         };          swfobject.embedSWF(             // url to SMP player             "img/StrobeMediaPlayback.swf",             // div id where player will be place             "player",             // width, height             "100%", "485",             // minimum flash player version required             "10.2",             // other parameters             null, flashvars, params, attrs         ); }
播放逻辑

有了上述播放器,我们就可以在不同情况下对.m3u8文件进行播放了,以下为实现逻辑。

/*判断是否支持H5的video标签-----begin*/ if(!window.applicationCache){     mShow(article.videoHls);     return; } /*判断是否支持H5的video标签-----end*/ /*判断是否支持.m3u8视频播放-----begin*/ var vidTest=document.createElement("video"); var mpegTestApple = vidTest.canPlayType("application/vnd.apple.mpegurl"); var mpegTest = vidTest.canPlayType("application/x-mpegurl"); if(!mpegTestApple && !mpegTest){     mShow(article.videoHls);     return; } /*判断是否支持.m3u8视频播放-----end*/ /*填充video标签内容-----begin*/ var h5video = '<video width="100%" controls autoplay><source type="application/x-mpegurl" src="'      - article.videoHls + '"><source type="application/vnd.apple.mpegurl" src="'     - article.videoHls + '"></video>'; $('.video').append($(h5video));
视频效果
H5视频播放之m3u8
pc.png

H5视频播放之m3u8
mobile.png

参考资料

m3u8浏览器播放器
m3u8播放器展示
hls之m3m8、ts流格式详解

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » H5视频播放之m3u8

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址