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

  • RTMP（Real Time Messaging Protocol）
  • HLS（HTTP Live Streaming） 其中RTMP是Adobe开发的协议，无法在iPhone中兼容，故目前兼容最好的就是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

注意看切片索引文件：

  1. #EXTM3U
  2. #EXT-X-TARGETDURATION:11
  3. #EXT-X-VERSION:3
  4. #EXT-X-MEDIA-SEQUENCE:0
  5. #EXT-X-PLAYLIST-TYPE:VOD
  6. #EXTINF:10.133333,
  7. fileSequence0.ts
  8. #EXTINF:10.000666,
  9. fileSequence1.ts
  10. #EXTINF:10.667334,
  11. fileSequence2.ts
  12. #EXTINF:9.686001,
  13. fileSequence3.ts
  14. #EXTINF:9.768665,
  15. fileSequence4.ts
  16. #EXTINF:10.000000,
  17. fileSequence5.ts
  18. #EXT-X-ENDLIST

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

前端代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>player</title>
  5. <link rel="stylesheet" href="./player/mediaelementplayer.css" />
  6. <style>
  7. /** 隐藏控制条 **/
  8. .mejs-controls {
  9.     display: none !important;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <video width="640" height="360" id="player1">
  15.     <source type="application/x-mpegURL" src="/m3u8/index.m3u8">
  16. </video>
  17. <script src="http://7.url.cn/edu/jslib/jquery/1.9.1/jquery.min.js"></script>
  18. <script src="./player/mediaelement-and-player.js"></script>
  19. <script>
  20. var player = new MediaElementPlayer('#player1', {
  21.     // 禁止点击暂停
  22.     clickToPlayPause: false,
  23.     success: function (media, ele, player) {
  24.         // 初始化后立刻播放
  25.         player.play();
  26.     }
  27. });
  28. </script>
  29. </body>
  30. </html>

效果

例子源码

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

HLS视频点播&直播初探的更多相关文章

  1. 【转】HLS视频点播&直播初探

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  2. hls&flv直播请求过程

    hls&flv直播请求过程 直播类产品层出不穷,从各方面塑造了我们的生活方式.直播产品中,延时是决定用户体验的关键因素,它也将间接决定直播产品的成败.这其间,对延时影响较大的就是直播架构中选择 ...

  3. HLS视频直播

    HTTP Live Streaming (HLS) 苹果官方对于视频直播服务提出了 HLS 解决方案,该方案主要适用范围在于: 使用 iPhone .iPod touch. iPad 以及 Apple ...

  4. HTTP-FLV直播初探

    目前几种视频流的简单对比: 协议 httpflv rtmp hls dash 传输方式 http流 tcp流 http http 视频封装格式 flv flv tag Ts文件 Mp4 3gp web ...

  5. RTMP HLS HTTP 直播协议一次看个够

    直播从2016年一路火到了2017年,如今要在自己的App里加入直播功能,只要找一个现成的SDK就行了,什么拍摄.美颜.推流,一条龙服务.不过作为直播身后最重要的部分:推流协议,很多人并不是很清楚.如 ...

  6. 流媒体技术学习笔记之（十）HLS协议直播延时优化(35s到10S)

    1.首先要了解HLS延时的机制,也就是为什么会延时,延时主要发生在什么地方. HTTP Live Streaming 并不是一个真正实时的流媒体系统,这是因为对应于媒体分段的大小和持续时间有一定潜在的 ...

  7. EasyNVR无插件H5/HLS/m3u8直播解决方案中Windows系统服务启动错误问题的修复：EasyNVR_Service 服务因 函数不正确。 服务特定错误而停止。

    最近在做某地市移动公司景观直播的项目时,遇到一个问题,当我们部署EasyNVR为系统服务后,居然出现了无法启动服务的现象,表面上看,提示是系统服务启动失败,实际通过查看windows 系统日志: 查找 ...

  8. EasyDSS流媒体解决方案实现的RTMP/HLS视频直播、直播鉴权（如何完美将EasyDSS过渡到新版）

    上一篇博文介绍了EasyDSS点播功能,然后作为RTMP流媒体服务器,接受RTMP推流.进行实时的直播流分发又是自身一大核心功能. 需求背景: 写本篇博文的一个目的是向大家介绍一下EasyDSS新版的 ...

  9. rtsp转rtmp、hls网页直播服务器EasyNVR前端兼容性调试：ie下的 pointer-events- none

    发现问题: 之前在做EasyNVR 的web页面开发过程中,力求的都是一个播放效果的.功能的展示.对于兼容性也有注意,但有些细节还是难免有所疏忽. 内部测试发现:由于我们是流媒体的实时视频直播,在we ...

随机推荐

  1. linux里添加locate命令

    在linux里使用和find一样的功能 例如 find -name xx 可以yum install mlocate 然后 updatedb 再使用locate xx  来查找xx文件

  2. 【半平面交】bzoj1038 [ZJOI2008]瞭望塔

    http://m.blog.csdn.net/blog/qpswwww/44105605 #include<cstdio> #include<cmath> #include&l ...

  3. java经典50编程题

    菲波拉契数列:有一对兔子,从出生后第 3 个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? package com.day2; public ...

  4. ceph placement group状态总结

    一.归置组状态 1. Creating 创建存储池时,它会创建指定数量的归置组.ceph 在创建一或多个归置组时会显示 creating;创建完后,在其归置组的 Acting Set 里的 OSD 将 ...

  5. Spring MVC 3 深入总结

      一.前言: 大家好,Spring3 MVC是非常优秀的MVC框架,由其是在3.0版本发布后,现在有越来越多的团队选择了Spring3 MVC了.Spring3 MVC结构简单,应了那句话简单就是美 ...

  6. Caffe学习系列(20)：用训练好的caffemodel来进行分类

    caffe程序自带有一张小猫图片,存放路径为caffe根目录下的 examples/images/cat.jpg, 如果我们想用一个训练好的caffemodel来对这张图片进行分类,那该怎么办呢? 如 ...

  7. 如何使不同主机上的docker容器互相通信

    docker启动时,会在宿主主机上创建一个名为docker0的虚拟网络接口,默认选择172.17.42.1/16,一个16位的子网掩码给容器提供了65534个IP地址.docker0只是一个在绑定到这 ...

  8. 盘点国内网站常用的一些 CDN 公共库加速服务

    CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将JS库存放在服务器单机上相比,CDN公共库更加稳定.高速.一 般的CDN公共库都会包含全球所有最流行的开源JavaScri ...

  9. [转]编译VC++程序warning C4819快速解决

    文章来自:http://www.cppblog.com/API/archive/2012/11/12/195056.aspx 编译VC++程序的时候出现如下提示警告: warning C4819: T ...

  10. 【Leetcode】【Hard】Merge Intervals

    Given a collection of intervals, merge all overlapping intervals. For example,Given [1,3],[2,6],[8,1 ...