HLS视频点播&直播初探

时间：2022-08-27 15:46:14

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

  • 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来实现。

HLS视频点播&直播初探

切片准备

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

效果

HLS视频点播&直播初探

例子源码

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

相关文章