為什么要用m3u8而不是mp4
隨著客戶的增加，mp4文件播放的弊端也日益凸顯。
mp4缺點
1)：mp4的關(guān)鍵幀元素往往很大，需要加載很長時間才能開始播放。
2)：當(dāng)用戶打開一個視頻播放的時候，瀏覽器會持續(xù)請求下載mp4文件直到下載完成，就算是用戶暫停視頻播放瀏覽器也會持續(xù)這種下載狀態(tài)，給服務(wù)器硬盤和寬帶造成很大浪費和壓力。
選用m3u8
而m3u8視頻流則是吧一個大的視頻文件按照一定大小或時長把一個視頻分為N段播放，這樣打開視頻加載速度快，可以達(dá)到秒播，而且當(dāng)視頻播放第N段的時候，瀏覽器會下載N+1段，N+2則不會下載，大大緩解了服務(wù)器硬盤和寬帶壓力。
什么是m3u8
m3u8是蘋果公司開發(fā)的一項新型播放格式，這種播放格式支持目前市面的windows、androis、ios設(shè)備主流的瀏覽器，同樣的視頻文件既可以在flash環(huán)境播放，又能在無flash的html5環(huán)境播放，它的優(yōu)勢還不止于此，它可以實現(xiàn)多種碼率在不同網(wǎng)速下的自動切換，網(wǎng)速好自動切換高清晰度視頻，網(wǎng)速慢自動播放低清晰度文件，還可以實現(xiàn)流加密（視頻文件本身加密）、分段下載播放、任意時間點拖拽播放、隨機視頻文件廣告插入等等優(yōu)勢，所以最新版的云轉(zhuǎn)碼視頻系統(tǒng)僅把m3u8作為唯一的播放格式而放棄了其他格式的輸出。
將mp4視頻轉(zhuǎn)換為m3u8視頻流
方法/步驟
主流的方式是通過 m3u8格式視頻轉(zhuǎn)碼工具 FFmpeg 來實現(xiàn)的
下載
從我個人百度網(wǎng)盤下載：https://pan.baidu.com/s/17Hkccz4w1qxHd2bPJsslOg?pwd=wpcd
提取碼：wpcd
下載完解壓后可以在bin文件嘉下看到三個可執(zhí)行文件，
配置環(huán)境變量，找到path編輯并添加剛剛bin目錄復(fù)制進(jìn)去
在cmd中輸入ffmpeg 沒有報錯則表示安裝成功
視頻分割命令
ffmpeg -i video1.mp4 -profile:v baseline -level 3.0 -start_number 0 -hls_time 1 -hls_list_size 0 -f hls demo.m3u8
-
-i指定輸入的文件名 -
-profile:v baseline大概意思是檔次轉(zhuǎn)成基本畫質(zhì)，有四種畫質(zhì)級別,分別是baseline, extended, main, high，從低到高 -
-level 3.0大概也是視頻畫質(zhì)級別吧，基本上是從1到5, -
-start_number 0表示從0開始 -
-hls_time 1標(biāo)識每1秒切一個 -
-f hls將視頻轉(zhuǎn)為hls格式 -
-hls_list_size 0設(shè)置播放列表保存的最多條目，設(shè)置為 0 會保存有所片信息，默認(rèn)值為5。
成功后可以得到下面的文件
注意：
ts文件的切割還與兩個幀之間的時間間隔有關(guān)，任何一個ts分片的第一幀必須是1幀，否則無法進(jìn)行播放。因此有時候并不會按照指定的時間進(jìn)行分割
解決
既然知道要1秒產(chǎn)生一個ts分片，那就必須產(chǎn)生切片的過程中，強制一秒中產(chǎn)生一個關(guān)鍵幀。設(shè)置關(guān)鍵幀間隔，設(shè)置間隔為 2 秒的參數(shù)如下：-force_key_frames "expr:gte(t,n_forced*2)"
ffmpeg -i video1.mp4 -force_key_frames "expr:gte(t,n_forced*2)" -profile:v baseline -level 3.0 -start_number 0 -hls_time 1 -hls_list_size 0 -f hls demo.m3u8
視頻合并
將視頻合并成一個完整的mp4可以執(zhí)行以下命令
ffmpeg -i demo.m3u8 -c copy abc.mp4
注意：demo.m3u8里必須完整記錄的這個視頻的信息
例如：
前端播放m3u8視頻流（vue3示例）
安裝依賴
npm install --save video.js
npm install --save videojs-contrib-hls
在需要的組件中引入
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
import 'videojs-contrib-hls';
使用demo
// html部分
<video controls autoplay preload="auto" :fluid="true" ref="videoPlayer" class="video-js video" />
// js部分
const videoPlayer = ref(null) // video標(biāo)簽
const myPlayer = ref<any>(null)
const setVideoUrl = (url: string)=>{
nextTick(() => {
myPlayer.value = videojs(videoPlayer.value, {
sources: [
{
src: url,//視頻地址
type: 'application/x-mpegURL'
}
],
controlBar: {
timeDivider: false,//當(dāng)前時間和持續(xù)時間的分隔符
durationDisplay: false,//顯示持續(xù)時間
remainingTimeDisplay: true,//是否顯示剩余時間功能
currentTimeDisplay: false,//當(dāng)前時間
volumeControl: false,//音量控制鍵
playToggle: true,//播放按鈕
progressControl: true,//進(jìn)度條
fullscreenToggle: true,//全屏按鈕
},
})
})
}
問題文章來源：http://www.zghlxwxcb.cn/news/detail-783186.html
服務(wù)器上的m3u8視頻在播放時會有跨域錯誤，詳細(xì)可以查我的m3u8解決跨域這片文章，針對IIS和Nginx都有相關(guān)解決方案。文章來源地址http://www.zghlxwxcb.cn/news/detail-783186.html
到了這里，關(guān)于m3u8視頻流，視頻切片處理的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
