• 首页
  • html5
  • m3u8 跨平台 全兼容 移动 web在线视频 播放器

m3u8 跨平台 全兼容 移动 web在线视频 播放器

m3u.png

什么是m3u

m3u是一个纯文本文件,虽然我们平时看到播放器首先加载了此文件,但是它并不是一个音频文件。 播放器并不是播放它,而是根据它的记录找到网络地址进行在线播放

什么是m3u8

m3u8 是在 m3u 格式下扩展出来的,

可以播流或者点播形式,目的是实现时实性及保密性它会不让你获取它的视频所在地址

浏览器使用的是 m3u8 文件。 m3u8 跟音频列表格式 m3u 很像,可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。 播放器按顺序逐个播放,全部放完再请求一下 m3u8 文件,获得包含最新 ts 文件的播放列表继续播,周而复始。 整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成,m3u8 必须动态更新,ts 可以走 CDN。 一个典型的 m3u8 文件格式如下:


#EXTINF:16.733333,
http://7xnvrg.com2.z0.glb.qiniucdn.com/fsqi-twUwP5L64eOnL5sDHJ53WY=/lj2MkoEUw42abi-e_qr8Ibk03uhi/000000.ts
#EXTINF:8.333333,
http://7xnvrg.com2.z0.glb.qiniucdn.com/fsqi-twUwP5L64eOnL5sDHJ53WY=/lj2MkoEUw42abi-e_qr8Ibk03uhi/000001.ts
#EXTINF:8.333333,
http://7xnvrg.com2.z0.glb.qiniucdn.com/fsqi-twUwP5L64eOnL5sDHJ53WY=/lj2MkoEUw42abi-e_qr8Ibk03uhi/000002.ts

我们看到一个标准的 m3u8 是有若干个 ts 视频文件组成.这些 ts 视频文件可以走 cdn 播放器通过 m3u8 文件获取到多个 ts 视频文件,然后按顺序加载播放

目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前就只有 HLS 能用, 所以我们重点看下 HLS 方案

什么是HLS

HTTP Live Streaming(简称 HLS)是一个基于 HTTP 的视频流协议,由 Apple 公司实现,Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS,高版本 Android 也增加了对 HLS 的支持。

提供 HLS 协议的服务器要做下面2件事情: 1.编码:以 H.263 格式对图像进行编码,以 MP3 或者 HE-AAC 对声音进行编码,最终打包到 MPEG-2 TS(Transport Stream)容器之中 2.分割:把编码好的 TS 文件等长切分成后缀为 ts 的小文件,并生成一个 .m3u8 的纯文本索引文件

HLS 协议本质还是一个个的 HTTP 请求 / 响应,所以适应性很好,不会受到防火墙影响。

HLS协议的支持

由于是 apple 公司开发,所以在 safari 浏览器原生支持

对于直接支持 hls 协议的浏览器,我们可以直接用 Html5 的 video 元素来播放,省时,省力,省心

<video src="http://v.youku.com/player/getRealM3U8/vid/XMjUzMzUxNzQ4/type//video.m3u8"
height="200" width="350"></video>

对于其他浏览器,或者非 ios 平台就只能依靠 flash 了. 现成的解决方案有 FlowPlayer ,JWPlayer ,videoJS ,这些开源包都比较大,平平常常几十K,上百K .

所以今天和大家分享一个非常小,非常Q 的一个播放器 HLSPlayer javascript 文件区区7k , 是移动平台视频解决方案首选.

HLSPlayer


    ├── HLS.swf
    ├── HLSPlayer.swf
    ├── demo.html
    ├── images
    │   ├── common.css
    │   ├── mini.css
    │   └── vico.png
    └── js
        └── hls.min.js
        

javascript 主文件 hls.min.js 7K HLS.swf 和 HLSPlayer.swf 是本地的2个 flash 播放器 images 文件夹下2个 css 文件, mini.css 文件是移动专用样式


如何使用


<div class="video" id="HLSPlayer" style="width:100%;height:300px;">
    <script>
        var vID = "";
        var vWidth = "100%";
        var vHeight = "300";
        var vPlayer = "/HLSplayer.swf?v=1.5";
        var vHLSset = "/HLS.swf";
        var vPic = "/images/start.jpg";
        var vCssurl = "/images/mini.css";
        var vHLSurl = "http://v.youku.com/player/getRealM3U8/vid/XMjUzMzUxNzQ4/type//video.m3u8";
    </script>
    <script type="text/javascript" src="/js/hls.min.js" ></script>
</div>

上面这段 javascript 文件是嵌入在 div 元素中,是不是和以前使用过的 编辑器非常相似. 这段 javascript 会通过 document.write 输出节点,然后浏览器渲染出视频播放器


上面的定义的所有 参数,都为了下面的渲染播放器初始化使用


HLSPlayer 缺点

因为上面说到了HLSPlayer 所依赖的 javascript 文件是嵌入到 div 中,而这段 javascript 中涉及到 document.write 输出dom 节点.

所以此视频播放器的渲染要求 dom 从上到下顺序渲染,所以当视频浏览器渲染的时候, var vHLSurl=’…m3u8’ 参数必须是拿到的.那么问题来了.

如果你后台读取数据库,拿到 m3u8 播放地址,然后在服务器端拼接 上面的 html,输出到前端,经过浏览器渲染,完全是没有问题的. 如果你的页面是先加载,然后异步拿到 m3u8 播放地址,然后动态插入播放器节点,这样是不行的…为什么?

上面也提到了.浏览器如果已经渲染页面结束,然后你 异步拿到数据后通过 document.write 来插入dom节点是不可以的.因为刚才渲染 html 页面的线程已经结束

有什么办法可以异步拿到数据后再渲染视频播放器 ,使用 iframe ,拿到播放地址后再去请求 iframe ,渲染播放器.

此 demo 地址: https://github.com/zzhi191/HLSPlayerDemo

出自:m3u8 跨平台 全兼容 移动 web在线视频 播放器



回到顶部