HLS视频点播&直播初探

  • 时间:
  • 浏览:1
  • 来源:5分时时彩官网_去哪玩5分时时彩_哪里可以玩5分时时彩

HLS视频点播&直播初探

2015-04-26 16:42  Justany_WhiteSnow  阅读(...)  评论()  编辑  收藏

前端可选的视频直播协议大致只有有四种 :

  • RTMP(Real Time Messaging Protocol)
  • HLS(HTTP Live Streaming) 其中RTMP是Adobe开发的协议,无法在苹果中兼容,故目前兼容最好的也不HLS协议了。

HTTP Live Streaming(HLS)是苹果公司实现的基于HTTP的流媒体传输协议,可实现流媒体的直播和点播。原理上是将视频流分片成一系列HTTP下载文件。很多,HLS比RTMP有较高的延迟。

前端播放HLS

  • Native支持
    1. Android 3.0+
    2. iOS 3.0+
  • flash支持
    1. Flowplayer(GPL ×
    2. GrindPlayer(MIT)
    3. video-js-swf(Apache License 2.0)
    4. MediaElement.js(MIT)
    5. clappr(BSD IE10+ ×

最后,将会MediaElement将会纳入WordPress的核心视音频库,以及其良好的兼容性(见下图),很多最后挑选使用MediaElement.js来实现。

切片准备

可使用m3u8downloader下载另另三个 HLS源,将会使用node-m3u生成m3u8索引和MPEG-TS切片,下面是亲戚亲戚朋友 准备切片:

https://github.com/miniflycn/HLS-demo/tree/master/m3u8

注意看切片索引文件:

其中#EXT-X-ENDLIST为切片终止标记,将会没人该标记,浏览器会在文件读取过后再请求索引文件,将会有更新则继续下载新文件,以此达到直播效果。

前端代码

<!DOCTYPE html>
<html>
<head>
<title>player</title>
<link rel="stylesheet" href="./player/mediaelementplayer.css" />
<style>

效果

例子源码

https://github.com/miniflycn/HLS-demo

  • 分类 Javascript
  •