FFmpeg視訊切片.m3u8檔案的流程與播放
一、安裝配置ffmpeg
1、下載ffmpeg
http://www.ffmpeg.org/download.html
下載後解壓即可
1、環境配置
找到解壓路徑下的bin目錄
2、找到系統變數Path
3、新建，將上面ffmpeg的bin資料夾路徑新增進去即可
4、Cmd 執行ffmpeg命令，出現以下的即配置成功
二、視訊的切片【這裡以MP4檔案為例】
1、執行切片命令：
fmpeg.exe -i C:\Users\Administrator\Videos\fuDaSchool\fuda.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 C:\Users\Administrator\Videos\fuDaSchool\fuda2.m3u8
備註：上面的命令不能切片成每個固定大小的切片，如果要切成固定大小的切片可以採用以下參考以下：
1、命令：ffmpeg -i fuda.mp4 -f segment -segment_time 30 -segment_format mpegts -segment_list xxx/video_name.m3u8 -c copy -bsf:v h264_mp4toannexb -map 0 xxx/course-%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 segment -segment_list D:\home\999\index.m3u8 -segment_time 30 D:\home\999\nxb-%04d.ts
注：30 是30秒的意思
上面已經全部完成啦 效果達到
其他：當然如果是MP4 可以一步到位
命令：ffmpeg -i xxx.mp4 -f segment -segment_time 60 -segment_format mpegts -segment_list /home/higherlevel/video-folder/video_name.m3u8 -c copy -bsf:v h264_mp4toannexb -map 0 /home/higherlevel/video-folder/course-%04d.ts
這個是把xxx.mp4視訊切成功每60秒一個小的ts視訊的m3u8 檔案
2、切片完成如圖：
3、這些切片必須放在伺服器的目錄下【例：福大校史館週年慶視訊】
4、H5頁面採用video.js外掛播放.m3u8，程式碼如下：
<!doctype html> <html> <head> <meta charset="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-setup="{}"> <source src="http://fzu.whlyw.net/video/fuda2.m3u8" type="application/x-mpegURL"> <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="js/video.min.js"></script> <script type="text/javascript"> //設定中文 videojs.addLanguage('zh-CN', { "Play": "播放", "Pause": "暫停", "Current Time": "當前時間", "Duration": "時長", "Remaining Time": "剩餘時間", "Stream Type": "媒體流型別", "LIVE": "直播", "Loaded": "載入完畢", "Progress": "進度", "Fullscreen": "全屏", "Non-Fullscreen": "退出全屏", "Mute": "靜音", "Unmute": "取消靜音", "Playback Rate": "播放速度", "Subtitles": "字幕", "subtitles off": "關閉字幕", "Captions": "內嵌字幕", "captions off": "關閉內嵌字幕", "Chapters": "節目段落", "Close Modal Dialog": "關閉彈窗", "Descriptions": "描述", "descriptions off": "關閉描述", "Audio Track": "音軌", "You aborted the media playback": "視訊播放被終止", "A network error caused the media download to fail part-way.": "網路錯誤導致視訊下載中途失敗。", "The media could not be loaded, either because the server or network failed or because the format is not supported.": "視訊因格式不支援或者伺服器或網路的問題無法載入。", "The media playback was aborted due to a corruption problem or because the media used features your browser 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": "播放視訊", "Close": "關閉", "Modal Window": "彈窗", "This is a modal window": "這是一個彈窗", "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按鍵或啟用關閉按鈕來關閉此彈窗。", ", opens captions settings dialog": ", 開啟標題設定彈窗", ", opens subtitles settings dialog": ", 開啟字幕設定彈窗", ", opens descriptions settings dialog": ", 開啟描述設定彈窗", ", selected": ", 選擇", "captions settings": "字幕設定", "Audio Player": "音訊播放器", "Video Player": "視訊播放器", "Replay": "重播", "Progress Bar": "進度小節", "Volume Level": "音量", "subtitles settings": "字幕設定", "descriptions settings": "描述設定", "Text": "文字", "White": "白", "Black": "黑", "Red": "紅", "Green": "綠", "Blue": "藍", "Yellow": "黃", "Magenta": "紫紅", "Cyan": "青", "Background": "背景", "Window": "視窗", "Transparent": "透明", "Semi-Transparent": "半透明", "Opaque": "不透明", "Font Size": "字型尺寸", "Text Edge Style": "字型邊緣樣式", "None": "無", "Raised": "浮雕", "Depressed": "壓低", "Uniform": "均勻", "Dropshadow": "下陰影", "Font Family": "字型庫", "Proportional Sans-Serif": "比例無細體", "Monospace Sans-Serif": "單間隔無細體", "Proportional Serif": "比例細體", "Monospace Serif": "單間隔細體", "Casual": "舒適", "Script": "手寫體", "Small Caps": "小型大寫字型", "Reset": "重啟", "restore all settings to the default values": "恢復全部設定至預設值", "Done": "完成", "Caption Settings Dialog": "字幕設定視窗", "Beginning of dialog window. Escape will cancel and close 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外掛下載地址