侧边栏壁纸
博主头像
实习两年半

基础不牢,地动山摇。

  • 累计撰写 43 篇文章
  • 累计创建 40 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

视频切片、m3u8格式

实习两年半
2022-06-11 / 0 评论 / 0 点赞 / 918 阅读 / 731 字
温馨提示:
本文最后更新于 2022-06-12,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

m3u8介绍

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

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

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

ffmpeg 安装

将视频转为mp4

  1. 查看视频文件编码格式
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
  1. test.ts: 源ts文件
  2. test/index.m3u8: 生成的文件,父目录test需要存在
  3. -segment_time 5: 每个片段的时间(单位s)
  4. test/test_%03d.ts: %03d 类似于C语言中的表达式,父目录test需要存在
    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>

效果截图

Test

0

评论区