網(wǎng)站播放視頻較慢盗痒,利用mp4轉(zhuǎn)m3u8解決

項目最近需要在網(wǎng)站播放mp4視頻蚂蕴,第一印象自讓是使用h5的video標簽。這個比較方便俯邓,生成視頻地址作為video標簽的src值即可骡楼。

在本地播放還好,但是上傳到服務器上比較慢稽鞭,更何況服務器在國外君编,加載時特別慢,好幾分鐘川慌。

解決辦法由2各種:

1. 將mp4切分為多個小mp4文件吃嘿,src作為動態(tài)傳值祠乃,循環(huán)小mp4的列表。

主要是監(jiān)聽end事件兑燥,回調(diào)里面把video的src改成列表的下一個亮瓷。

但是在保證視頻質(zhì)量的前提下,總的視頻大小還是跟源視頻文件相差不大降瞳。

參考:[循環(huán)多個小mp4地址列表](https://yq.aliyun.com/ask/358906)

2.將mp4轉(zhuǎn)換成m3u8格式

Apple 為了提高流播效率開發(fā)的技術(shù)嘱支,特點是將流媒體切分為若干 TS 片段(比如每10秒一段),然后通過一個擴展的 m3u 列表文件將這些 TS 片段集中起來供客戶端播放器接收挣饥。參考M3U8介紹

m3u8由2部分組成除师,分別是m3u8和ts文件。切分后有n個ts文件(取決于切分時設置每片時長)扔枫,m3u8文件就是多個ts文件組成的序列汛聚,其實就是一個文本。(我這里源視頻文件為220M短荐,切分后多個ts文件總和才23M倚舀,并且視頻質(zhì)量不變。)

如何使用

1.安裝ffmpeg工具

下載:http://www.ffmpeg.org/download.html

安裝:不管時windows還是linux安裝都很簡單忍宋。但是在linux安裝需要注意的是需要一個插件痕貌。需要指定libx264
這里貼出我重新安裝的步驟:(參考

#yum安裝必要包
yum install autoconf automake cmake freetype-devel gcc gcc-c++ git libtool make mercurial nasm pkgconfig zlib-devel
#安裝x264
git clone --depth 1 git://git.videolan.org/x264
ls
cd x264
PKG_CONFIG_PATH="/usr/local/lib/pkgconfig" ./configure --enable-static
報錯,需要安裝nasm 至少2.14糠排,不能用yum install nasm舵稠,yum安裝是last版本
wget http://www.nasm.us/pub/nasm/releasebuilds/2.14/nasm-2.14.tar.xz
ls
tar Jxvf nasm-2.14.tar.xz 
ls
cd nasm-2.14
ls
./configure 
make && make install
cd ../x264
ls
# 指定PKG_CONFIG_PATH,不指定則在安裝ffmpeg就算加--enable-libx264入宦,也會提示找不到哺徊。不加,則在轉(zhuǎn)換時提示unknow encoder libx264
PKG_CONFIG_PATH="/usr/local/lib/pkgconfig" ./configure --enable-static
make && make install
cd ..
# 檢查是否安裝成功
ffmpeg -version
# 安裝時默認時加入環(huán)境變量云石,所以在任何地方執(zhí)行就可以唉工。提示如下,重點是有l(wèi)ibx264字樣
[java@iZt4n36uo36nxgg8z2hb2kZ ffmpeg]$ ffmpeg -version
ffmpeg version 4.1 Copyright (c) 2000-2018 the FFmpeg developers
built with gcc 4.8.5 (GCC) 20150623 (Red Hat 4.8.5-28)
configuration: --enable-gpl --enable-nonfree --enable-libfreetype --enable-libx264
libavutil      56. 22.100 / 56. 22.100
libavcodec     58. 35.100 / 58. 35.100
libavformat    58. 20.100 / 58. 20.100
libavdevice    58.  5.100 / 58.  5.100
libavfilter     7. 40.101 /  7. 40.101
libswscale      5.  3.100 /  5.  3.100
libswresample   3.  3.100 /  3.  3.100
libpostproc    55.  3.100 / 55.  3.100

  1. 測試汹忠,安裝成功后淋硝,執(zhí)行轉(zhuǎn)換命令:
ffmpeg -i video2.mp4 -c:v libx264 -hls_time 60 -hls_list_size 0 -c:a aac -strict -2 -f hls t/video2.m3u8

以下就是正在轉(zhuǎn)換

...略...
com.skyjilygao.util.VideoThread          : frame=    3 fps=0.0 q=0.0 size=N/A time=00:00:01.08 bitrate=N/A speed=2.09x    
com.skyjilygao.util.VideoThread          : frame=   20 fps= 19 q=0.0 size=N/A time=00:00:01.36 bitrate=N/A speed=1.32x    
com.skyjilygao.util.VideoThread          : frame=   29 fps= 17 q=0.0 size=N/A time=00:00:01.49 bitrate=N/A speed=0.85x    
com.skyjilygao.util.VideoThread          : frame=   38 fps= 15 q=0.0 size=N/A time=00:00:01.64 bitrate=N/A speed=0.667x    
com.skyjilygao.util.VideoThread          : frame=   40 fps= 13 q=0.0 size=N/A time=00:00:01.70 bitrate=N/A speed=0.54x    
com.skyjilygao.util.VideoThread          : frame=   48 fps= 13 q=0.0 size=N/A time=00:00:01.83 bitrate=N/A speed=0.485x    
...略...

命令簡單解釋下:
-hls_time 60: 設置每片的長度,我這里是60秒宽菜,為一個片段谣膳。
-hls_list_size 0:設置播放列表保存的最多條目,我這里設置為0會保存有所片信息铅乡,默認值為5
更多命令可以百度或Google
3.在內(nèi)嵌到代碼里(java)

/**
     * 拼接ffmpeg命令:ffmpeg -i test.mp4 -c:v libx264 -hls_time 60 -hls_list_size 0 -c:a aac -strict -2 -f hls output.m3u8
     * @param source
     * @return
     */
    private boolean processM3U8(String source, String target) {
        File targetFile = new File(target);
        File parentDir  = targetFile.getParentFile();
        if (!parentDir.exists()) {
            parentDir.mkdirs();
        }
        List<String> commend = new ArrayList<String>();
        commend.add(ffmpeg);
        commend.add("-i");
        commend.add(source);
        commend.add("-c:v");
        commend.add("libx264");
        commend.add("-hls_time");
        commend.add("60");
        commend.add("-hls_list_size");
        commend.add("0");
        commend.add("-c:a");
        commend.add("aac");
        commend.add("-strict");
        commend.add("-2");
        commend.add("-f");
        commend.add("hls");
        commend.add(target);
        this.cmdList = commend;
        // 通過ProcessBuilder創(chuàng)建
//        processBuilder(commend);

        // 通過runtime創(chuàng)建
        runtimeBuilder(getCommand());
        return true;
    }

注意:命令通過list傳入继谚,所以遇到空格,下一個參數(shù)就是一個list的元素阵幸。不能寫成 commend.add("-hls_time 60");這樣執(zhí)行會變成ffmpeg -i test.mp4 -c:v libx264 "-hls_time 60" -hls_list_size 0 -c:a aac -strict -2 -f hls output.m3u8導致執(zhí)行失敗
這里是關(guān)鍵代碼花履。
demo源碼可以參考demo-m3u8
相關(guān)關(guān)鍵代碼我已經(jīng)封裝好可以直接依賴和添加jitpack.io倉庫地址(參考demo-m3u8如何依賴)

<!-- 依賴視頻轉(zhuǎn)換工具類芽世,需要加入jitpack.io的repositories -->
<dependencies>
  ...
  <dependency>
    <groupId>com.github.skyjilygao</groupId>
    <artifactId>sky-util</artifactId>
    <version>1.0.1</version>
  </dependency>
</dependencies>
<repositories>
    <repository>
        <id>jitpack.io</id>
        <url>https://jitpack.io</url>
    </repository>
</repositories>

工具類地址:sky-util

轉(zhuǎn)換后如果想要播放可以直接使用video.js播放,直接一個index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>MP4ToM3U8</title>
  <link  rel="stylesheet">
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<h1>播放</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto"
       data-setup='{}'>
  <source src="http://localhost:8080/t/video2.m3u8" type="application/x-mpegURL">
  <!-- video.js給的示例 -->
  <!--<source src="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">-->
</video>
<script>
</script>
</body>
</html>

轉(zhuǎn)換成功后把m3u8和ts文件放在可訪問路徑下,播放時注意視頻路徑诡壁。我這里時放在項目static/t下济瓢。
訪問http://localhost:8080/t/video2.m3u8時提示下載或是直接顯示文件內(nèi)容表示可以訪問。
github地址:
demo-m3u8示例地址:https://github.com/skyjilygao/demo-m3u8.git
sky-util工具類:https://github.com/skyjilygao/sky-util.git

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末妹卿,一起剝皮案震驚了整個濱河市旺矾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌夺克,老刑警劉巖箕宙,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異铺纽,居然都是意外死亡柬帕,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門室囊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來雕崩,“玉大人魁索,你說我怎么就攤上這事融撞。” “怎么了粗蔚?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵尝偎,是天一觀的道長。 經(jīng)常有香客問我鹏控,道長致扯,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任当辐,我火速辦了婚禮抖僵,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘缘揪。我一直安慰自己耍群,他們只是感情好,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布找筝。 她就那樣靜靜地躺著蹈垢,像睡著了一般。 火紅的嫁衣襯著肌膚如雪袖裕。 梳的紋絲不亂的頭發(fā)上曹抬,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天,我揣著相機與錄音急鳄,去河邊找鬼谤民。 笑死堰酿,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的张足。 我是一名探鬼主播胞锰,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼兢榨!你這毒婦竟也來了嗅榕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤吵聪,失蹤者是張志新(化名)和其女友劉穎凌那,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吟逝,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡帽蝶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了块攒。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片励稳。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖囱井,靈堂內(nèi)的尸體忽然破棺而出驹尼,到底是詐尸還是另有隱情,我是刑警寧澤庞呕,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布新翎,位于F島的核電站,受9級特大地震影響住练,放射性物質(zhì)發(fā)生泄漏地啰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一讲逛、第九天 我趴在偏房一處隱蔽的房頂上張望亏吝。 院中可真熱鬧,春花似錦盏混、人聲如沸蔚鸥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽部逮。三九已至架诞,卻和暖如春罐呼,著一層夾襖步出監(jiān)牢的瞬間盐碱,已是汗流浹背姊氓。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工葛家, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人僵闯。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓卧抗,卻偏偏與公主長得像,于是被迫代替她去往敵國和親鳖粟。 傳聞我的和親對象是個殘疾皇子社裆,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內(nèi)容