m3u8的浏览器播放器

最新推荐文章于 2024-08-22 06:34:27 发布

weixin_33979363

最新推荐文章于 2024-08-22 06:34:27 发布

阅读量2.9k

点赞数

文章标签： python

原文链接：http://www.cnblogs.com/qingsong/p/5284911.html

版权

前几天花了点时间研究了下怎么在浏览器中播放m3u8的视频地址，最后终于找到了两个开源的东西可以正常播放，稍稍整理下方便后来人。

m3u8是什么就不介绍了，现在所有视频网站基本都是通过m3u8的方式来播放视频的。

在浏览器上播放m3u8的视频地址有两种方式：

html的video标签的方式，这种方式播放很简单:

<!DOCTYPE hmtl>
<html>
<head>
<title>the5fire m3u8 test</title> </head> <body> <video controls autoplay > <source src="http://stream.gravlab.net/003119/sparse/v1d30/posts/2014/barcelona/barcelona.m3u8"> </video> </body> </html>

上面的代码，你直接贴到一个index.html中，用safari浏览器打开就可以直接播了。

但是, 目前只能只有Safari支持，通用性并不好。因此还得采用flash来播放，也就下面的第二种方法。

通过开源的swfobject.js以及两个flash组件：OSMF和HLSProvider来播放，上代码:

<!DOCTYPE html>
<html>
<head>
<title>the5fire m3u8 test</title> <script src="http://the5fireblog.b0.upaiyun.com/staticfile/swfobject.js"></script> </head> <body> <div id="player"> </div> <script> 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://www.the5fire.com/static/demos/diaosi.m3u8"), // url to OSMF HLS Plugin plugin_m3u8: "http://www.the5fire.com/static/demos/swf/HLSProviderOSMF.swf", }; var params = { // self-explained parameters allowFullScreen: true, allowScriptAccess: "always", bgcolor: "#000000" }; var attrs = { name: "player" }; swfobject.embedSWF( // url to SMP player "http://www.the5fire.com/static/demos/swf/StrobeMediaPlayback.swf", // div id where player will be place "player", // width, height "800", "485", // minimum flash player version required "10.2", // other parameters null, flashvars, params, attrs ); </script> </body> </html>