HLS 流媒体技术笔记

来源：互联网发布：淘宝服饰店铺简介编辑：程序博客网时间：2024/05/21 22:29

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

可使用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>

0 0

HLS 流媒体技术 笔记

前端代码

HLS 流媒体技术笔记