m3u8介绍

m3u8是一种文件格式，它是一个纯文本的文件，其内容是记录一个个视频片段(ts文件)地址，是根据m3u8文件来寻找这些视频片段地址，从而进行播放的。

简单来说，m3u8是HLS（HTTP Live Streaming）协议的部分内容，而HLS又是由苹果公司提出的基于HTTP的流媒体网络传输协议。其实现的基本原理是将一个大的媒体文件进行分片，而分片文件资源的路径记录于m3u8文件，客户端依据m3u8文件便能获取对应的媒体资源，进行播放。所以m3u8文件实质上就是一个播放列表，当获取到m3u8地址时，可以直接用播放器进行在线播放。

通过m3u8文件来进行播放视频，无需全部缓存视频即可播放，可以在减少网络带宽的使用。
我们可以通过 ffmpeg 进行视频切片并生成m3u8文件。

ffmpeg 安装

将视频转为mp4

查看视频文件编码格式

ffprobe input.mkv

Test
2. 如果视频编码格式为 h264 则执行

ffmpeg -i 源文件 -acodec copy -vcodec copy 输出文件.mp4

否则执行

ffmpeg -i 源文件 -acodec libfaac -vcodec libx264 输出文件.mp4

执行后将会生成mp4文件
Test

将mp4文件转为ts文件

ffmpeg -y -i  test.mp4  -vcodec copy -acodec copy -vbsf h264_mp4toannexb test.ts

Test

将ts视频文件切分成一个个ts片段

ffmpeg -i test.ts -c copy -map 0 -f segment -segment_list test/index.m3u8 -segment_time 5 test/test_%03d.ts

test.ts: 源ts文件
test/index.m3u8: 生成的文件，父目录test需要存在
-segment_time 5: 每个片段的时间(单位s)
test/test_%03d.ts: %03d 类似于C语言中的表达式,父目录test需要存在

获取视频的第n秒图片

ffmpeg -i test.mp4 -ss 5 -f image2 -frames:v 1  test/index.jpg

-ss 5: 获取第5秒的图片

通过video.js播放m3u8视频

默认的video标签是无法播放m3u8视频格式的，可以通过video.js库来播放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>videojs视频播放DEMO</title>
</head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<body>
  <h3>视频播放</h3>
  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" poster="./test/index.jpg">
    <source src="./test/index.m3u8" type='application/x-mpegURL'>
  </video>
</body>
</html>
<script>
  var player = videojs('example_video_1', {
    muted: false,
    controls: true,
    height: 600,
    width: 800,
    loop: true,
    // 更多配置.....
  });
</script>

效果截图