H5视频播放之m3u8

Qter · 发表于 2023-1-11 17:17:33

https://www.jianshu.com/p/d9b64514f8cc

HLS是什么HLS，Http Live Streaming 是由Apple公司定义的用于实时流传输的协议，HLS基于HTTP协议实现，传输内容主要包括两部分，一是M3U8描述文件，二是TS媒体文件。我们可以理解其就是一种视频格式，这里对于其原理不做过多分析，如需了解，请查阅HLS相关资料。
基本情况视频播放的场景主要是手机以及PC机。通过video标签播放.m3u8格式视频需要两个条件：

支持H5的video标签；
在条件1的基础上同时需要支持.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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

		自动登录	找回密码
密码			立即注册