firemail

标题: H5视频播放之m3u8 [打印本页]

作者: Qter    时间: 2023-1-11 17:17
标题: H5视频播放之m3u8
https://www.jianshu.com/p/d9b64514f8cc


HLS是什么HLS,Http Live Streaming 是由Apple公司定义的用于实时流传输的协议,HLS基于HTTP协议实现,传输内容主要包括两部分,一是M3U8描述文件,二是TS媒体文件。我们可以理解其就是一种视频格式,这里对于其原理不做过多分析,如需了解,请查阅HLS相关资料。
基本情况视频播放的场景主要是手机以及PC机。通过video标签播放.m3u8格式视频需要两个条件:
由于HLS这种协议是由Apple公司定义的,所以苹果手机能够很好的支持.m3u8视频的播放;android手机浏览器只要支持H5的video标签就基本上支持.m3u8这种类型的视频播放;而PC端浏览器即使支持H5的video标签,也不支持.m3u8视频的播放。
所以当我们项目中使用的是HLS(.m3m8)这种视频文件时,为了实现视频在不同场景下的正常播放,就必须对不能够正常播放视频的场景做相应的适配处理。那么,怎么解决呢?
我的解决方法思路:对于PC端,由于不支持.m3u8类型视频的播放,所以基于基于flash进行播放;而对于苹果的ios以及mac os系统都支持改类型是视频的播放,android4.0以上版本应该也没啥问题。而解决问题的关键就是找到一个播放器。
引入适配H5插件<script src="js/html5shiv.min.js"></script>
html页面如下:
<!DOCTYPE html><html lang="zh-cn"><head>    <title></title>    <meta charset="utf-8">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta name="description" content="">    <meta name="author" content=""></head><body><article>    <div class="video"></div></article><script src="js/swfobject.js"></script><script src="js/html5media.min.js"></script></body></html>
准备一个flash播放器flash播放器主要基于一个js文件以及两个swf文件,首先需要引入swfobject.js的js文件,如下:
<script src="js/swfobject.js"></script>
然后定义调用播放器的接口:
function showFlashPlayer(hlsData){        $('.video').append($('<div id="player"></div>'));        $("#player").css({"width": "100%"});        var bHeight = $("#player").width() * 9 / 16;        $("#player").css("height", bHeight);            //判断是否已安装flash播放插件        if (req.hasFlash().f == 0) {            $("#player").css("background", "#000");            $("#player").html("<div style='margin:auto;width: 100%;padding-top:3em;font-size:0.8em;height:50px;text-align:center;color: #888;'>您的浏览器不支持该播放器,请您下载Flash播放器插件或者改换其他浏览器进行播放</div>");            return;        }        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视频文件进行播放了,以下为实现逻辑。
if (/iphone|ipad|ipod|mac os x/.test(ua)) {//如果为苹果手机         var h5video = '<video width="100%" controls autoplay playsinline webkit-playsinline poster=' + posterUrl + '><source type="application/vnd.apple.mpegurl" src="'                        + videoHls + '">浏览器不支持HTML5视频<br>you browser DO NOT support HTML5 video<br></video>';          $('.video').append($(h5video)); }else if (/android/.test(ua)) {//如果为安卓手机          var h5video = '<video width="100%" controls autoplay playsinline webkit-playsinline poster=' + posterUrl + '><source type="application/x-mpegURL" src="'                        + videoHls + '">浏览器不支持HTML5视频<br>you browser DO NOT support HTML5 video<br></video>';          $('.video').append($(h5video)); } else {          showFlashPlayer(article.videoHls); }
相关文件可以到这里去下载:http://download.csdn.net/detail/fasily/9639955



作者:富士里
链接:https://www.jianshu.com/p/d9b64514f8cc
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。






欢迎光临 firemail (http://firemail.wang:8088/) Powered by Discuz! X3