FFmpeg视频切⽚.m3u8⽂件的流程与播放
⼀、安装配置ffmpeg
1、下载ffmpeg
下载后解压即可
1、环境配置
找到解压路径下的bin⽬录
2、找到系统变量Path
3、新建，将上⾯ffmpeg的bin⽂件夹路径添加进去即可
4、Cmd 执⾏ffmpeg命令，出现以下的即配置成功
⼆、视频的切⽚【这⾥以MP4⽂件为例】
1、执⾏切⽚命令：
< -i C:\Urs\Administrator\Videos\fuDaSchool\fuda.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 C:\Urs\Administrator\Videos\fuDaSchool\fuda2.m3u8
备注：上⾯的命令不能切⽚成每个固定⼤⼩的切⽚，如果要切成固定⼤⼩的切⽚可以采⽤以下参考以下：
1、命令：ffmpeg -i fuda.mp4 -f gment -gment_time 30 -gment_format mpegts -gment_list xxx/video_name.m3u8 -c copy -bsf:v h264_mp4toannexb -map 0 xxx/cour-%04d.ts
-- 30代表30秒⼀个⽚段
2、原视频是不是MP4啦如果不是就需要转成MP4⼀下咯
命令：ffmpeg -i 原⽂件 -y -c:v libx264 -strict -2 D:\home\lsh.mp4
第四步：把MP4转成ts⽂件
命令：ffmpeg -y -i D:\home\999.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb D:\home\999.ts
第五：再把ts 切成好多个⼩的ts
命令：ffmpeg -i D:\home\999.ts -c copy -map 0 -f gment -gment_list D:\home\999\index.m3u8 -gment_time 30 D:\home\999\nxb-%04d.ts
注：30 是30秒的意思
上⾯已经全部完成啦效果达到
其他：当然如果是MP4 可以⼀步到位
命令：ffmpeg -i xxx.mp4 -f gment -gment_time 60 -gment_format mpegts -gment_list /home/higherlevel/video-folder/video_name.m3u8 -c copy -bsf:v
h264_mp4toannexb -map 0 /home/higherlevel/video-folder/cour-%04d.ts
这个是把xxx.mp4视频切成功每60秒⼀个⼩的ts视频的m3u8 ⽂件
2、切⽚完成如图：
3、这些切⽚必须放在服务器的⽬录下【例：福⼤校史馆周年庆视频】
4、H5页⾯采⽤video.js插件播放.m3u8，代码如下：
<!doctype html>
<html>
<head>
<meta chart="utf-8">
<title>Video.js 7.4.1 play hls-m3u8 video</title>
<link href="css/video-js.min.css" rel="stylesheet">
<style>
body {
text-indent: 0pt; padding: 0pt; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;">} .m {
width: 960px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="m">
<video id="my-video" class="video-js" controls preload="auto" width="960" height="400"
poster="m.jpg" data-tup="{}">
<source src="/video/fuda2.m3u8" type="application/x-mpegURL">
<p class="vjs-no-js"> To view this video plea enable JavaScript, and consider upgrading to a web browr that <a href="/html5-video-support/" target="_blank">supports HTML5 video</a> </p> </video>
<script src="js/video.min.js"></script>
<script type="text/javascript">
//设置中⽂
videojs.addLanguage('zh-CN', {
"Play": "播放",
"Pau": "暂停",
"Current Time": "当前时间",
"Duration": "时长",
"Remaining Time": "剩余时间",
"Stream Type": "媒体流类型",
"LIVE": "直播",
"Loaded": "加载完毕",
"Progress": "进度",
"Fullscreen": "全屏",
"Non-Fullscreen": "退出全屏",
"Mute": "静⾳",
"Unmute": "取消静⾳",
"Playback Rate": "播放速度",
"Subtitles": "字幕",
"subtitles off": "关闭字幕",
"Captions": "内嵌字幕",
"captions off": "关闭内嵌字幕",
"Chapters": "节⽬段落",
"Clo Modal Dialog": "关闭弹窗",
"Descriptions": "描述",
"descriptions off": "关闭描述",
"Audio Track": "⾳轨",
"You aborted the media playback": "视频播放被终⽌",
"A network error caud the media download to fail part-way.": "⽹络错误导致视频下载中途失败。",
"The media could not be loaded, either becau the rver or network failed or becau the format is not supported.": "视频因格式不⽀持或者服务器或⽹络的问题⽆法加载。",
"The media playback was aborted due to a corruption problem or becau the media ud features your browr did not support.": "由于视频⽂件损坏或是该视频使⽤了你的浏览器不⽀持的功能，播放终⽌。", "No compatible source was found for this media.": "⽆法找到此视频兼容的源。",
"The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，⽆法解密。",
"Play Video": "播放视频",
"Clo": "关闭",
"Modal Window": "弹窗",
"This is a modal window": "这是⼀个弹窗",
"This modal can be clod by pressing the Escape key or activating the clo button.": "可以按ESC按键或启⽤关闭按钮来关闭此弹窗。",
", opens captions ttings dialog": ", 开启标题设置弹窗",
", opens subtitles ttings dialog": ", 开启字幕设置弹窗",
", opens descriptions ttings dialog": ", 开启描述设置弹窗",
", lected": ", 选择",
"captions ttings": "字幕设定",
"Audio Player": "⾳频播放器",
"Video Player": "视频播放器",
"Replay": "重播",
"Progress Bar": "进度⼩节",
"Volume Level": "⾳量",
"subtitles ttings": "字幕设定",
"descriptions ttings": "描述设定",
"Text": "⽂字",
"White": "⽩",
"Black": "⿊",
"Red": "红",
"Green": "绿",
"Blue": "蓝",
"Yellow": "黄",
"Magenta": "紫红",
"Cyan": "青",
"Background": "背景",
"Window": "视窗",
"Transparent": "透明",
"Semi-Transparent": "半透明",
"Opaque": "不透明",
"Font Size": "字体尺⼨",
"Text Edge Style": "字体边缘样式",
"None": "⽆",
"Raid": "浮雕",
"Depresd": "压低",
"Uniform": "均匀",
"Dropshadow": "下阴影",
"Font Family": "字体库",
"Proportional Sans-Serif": "⽐例⽆细体",
"Monospace Sans-Serif": "单间隔⽆细体",
"Proportional Serif": "⽐例细体",
"Monospace Serif": "单间隔细体",
"Casual": "舒适",
"Script": "⼿写体",
"Small Caps": "⼩型⼤写字体",
"Ret": "重启",
"restore all ttings to the default values": "恢复全部设定⾄预设值",
"Done": "完成",
"Caption Settings Dialog": "字幕设定视窗",
"Beginning of dialog window. Escape will cancel and clo the window.": "开始对话视窗。离开会取消及关闭视窗", "End of dialog window.": "结束对话视窗"
});
var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){
var myPlayer = this;
myPlayer.play();
});
</script>
</div>
</body>
</html>
video.js插件下载地址
