HLS，Http Live Streaming 是由Apple公司定义的用于实时流传输的协议，HLS基于HTTP协议实现，传输内容包括两部分，一是M3U8描述文件，二是TS媒体文件。详解
总之:hls协议可以实现视频的直播功能,也可以实现视频的点.我们可以利用点播这一功能点来实现视频的播放,从而不再暴露我们视频的src地址,并实现分片下载播放的功能.
如何将一个视频分片并得到m3u8文件
利用ffmpeg工具,一个处理视频图片的强大工具,可以通过命令来执行操作.
安装
使用
在命令行输入ffmpeg -i 80s.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 -hls_time 10 output/output.m3u8即可在output目录下得到m3u8文件以及切片后的ts视频文件
- 初始视频地址
80s.mp4可以是http开头的绝对地址 -
hls_time 10表示切片视频的时长,默认为2 -
hls_list_size表示m3u8文件记录切片的数量,默认为5.即只记录最后5条切片,设置为0表示记录所有切片
播放 m3u8文件
利用video.js插件实现播放,用本地服务器打开.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
</head>
<body>
<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<!-- <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source> -->
<source src="../output/output.m3u8" type="application/x-mpegURL"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<script src="./videojs-contrib-hls.js"></script>
<script>
var options = {
html5: {
hls: {
withCredentials: true
}
}
};
var player = videojs('my-player', options, function onPlayerReady() {
videojs.log('Your player is ready!');
// In this context, `this` is the player that was created by Video.js.
this.play();
// How about an event listener?
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});
</script>
</body>
</html>
网友评论