HLS视频点播&直播初探

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

  • 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

注意看切片索引文件:

#EXTM3U
#EXT-X-TARGETDURATION:11
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:10.133333,
fileSequence0.ts
#EXTINF:10.000666,
fileSequence1.ts
#EXTINF:10.667334,
fileSequence2.ts
#EXTINF:9.686001,
fileSequence3.ts
#EXTINF:9.768665,
fileSequence4.ts
#EXTINF:10.000000,
fileSequence5.ts
#EXT-X-ENDLIST

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

前端代码

<!DOCTYPE html>
<html>
<head>
<title>player</title>
<link rel="stylesheet" href="./player/mediaelementplayer.css" />
<style>
/** 隐藏控制条 **/
.mejs-controls {
    display: none !important;
}
</style>
</head>
<body>
<video width="640" height="360" id="player1">
    <source type="application/x-mpegURL" src="/m3u8/index.m3u8">
</video>
<script src="http://7.url.cn/edu/jslib/jquery/1.9.1/jquery.min.js"></script> 
<script src="./player/mediaelement-and-player.js"></script>
<script>
var player = new MediaElementPlayer('#player1', {
    // 禁止点击暂停
    clickToPlayPause: false,
    success: function (media, ele, player) {
        // 初始化后立刻播放
        player.play();
    }
});
</script>
</body>
</html>

效果

例子源码

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏歪先生_自留地

Python test2

863
来自专栏ionic3+

被Telerik的一个Cordova插件摆了一道

说起Telerik这名字,可能有些人比较陌生,不过对于做过.Net的开发人员来说,应该会有印象,或多或少用过它家的控件,对于常规前端,可能有听说过Kendo框架...

653
来自专栏何俊林

HLS 架构简介及播放加密的HLS

HLS 概述 HLS 全称是 HTTP Live Streaming, 是一个由 Apple 公司实现的基于 HTTP 的媒体流传输协议. 他跟 DASH 协议...

8216
来自专栏烙馅饼喽的技术分享

本人有生以来的第一篇博客,嘿嘿,就发这个吧, 怎样在虚拟主机上使用Castle框架的ActiveRecord

        我在某个私人项目中使用了Castle 的 ActiveRecord.用起来那是真叫个爽,整个项目里楞是一句SQL语句都没有,嘿嘿。超级喜欢上了这...

2555
来自专栏施炯的IoT开发专栏

Windows 10 IoT Serials 5 - 如何为树莓派应用程序添加语音识别与交互功能

    都说语音是人机交互的重要手段,虽然个人觉得在大庭广众之下,对着手机发号施令会显得有些尴尬。但是在资源受限的物联网应用场景下(无法外接鼠标键盘显示器),如...

18910
来自专栏向治洪

android PakageManagerService启动流程分析

PakageManagerService的启动流程图 ? 1.PakageManagerService概述 PakageManagerService是andro...

38010
来自专栏dotnet core相关

WCF入门(10)

公司是做乙方的,工资还凑合,主要是项目基本都已完成,进去就是干维护,体会不到那种从头彻尾的成就感。项目中具体用了EF+Ado.net+WCF+WPF+(VB.n...

492
来自专栏腾讯Bugly的专栏

小程序组件化框架 WePY 在性能调优上做出的探究

导语 性能调优是一个亘古不变的话题,无论是在传统H5上还是小程序中。因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用。因此必须另开辟蹊径找出...

4784
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(72)-微信公众平台开发-消息处理

前言 Senparc.Weixin.MP SDK提供了MessageHandler消息处理类 在作者的Wiki中也详细说明了如何定义这个类,下面我们来演示,...

1939
来自专栏bboysoul

使用devstack安装openstack

早就想用devstack去安装openstack了,但是自己的电脑内存才4g真的太小了,最近上了8g内存,果断开虚拟机装devstack。 devstack的...

1073

扫码关注云+社区