ffmpeg:mp4轉m3u8並用video.js在web頁面播放
阿新 • • 發佈：2021-03-25
一，ffmpeg的安裝:
參見:
https://www.cnblogs.com/architectforest/p/12807683.html
說明：劉巨集締的架構森林是一個專注架構的部落格，地址：https://www.cnblogs.com/architectforest
對應的原始碼可以訪問這裡獲取： https://github.com/liuhongdi/
說明：作者:劉巨集締 郵箱: [email protected]
二，關於video.js
1,官網:
https://videojs.com/
2,可以通過cdn引用它的js和css:
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" /> <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
三，mp4轉m3u8
1, 第一步:把mp4轉為ts格式
#vcodec copy: 把視訊的位元流複製到輸出,不進行轉碼
#acodec copy: 把音訊的位元流複製到輸出,不進行轉碼
#vbsf: 指定bitstream filter的轉碼格式
[root@blog testjs]# ffmpeg -y -i music23.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb music23.ts
2，第二步：對生成的ts視訊做切分,生成m3u8
#-segment_list music23.m3u8 ： 指定輸出的m3u8列表檔案
#-segment_time 5 按5秒一個檔案進行切分
[root@blog testjs]# ffmpeg -i music23.ts -c copy -map 0 -f segment -segment_list music23.m3u8 -segment_time 5 music23_%5d.ts
檢視結果:
[root@blog testjs]# ls music23_00000.ts music23_00004.ts music23_00008.ts music23_00012.ts music23_00016.ts music23_00020.ts music23_00024.ts music23_00028.ts music23.ts music23_00001.ts music23_00005.ts music23_00009.ts music23_00013.ts music23_00017.ts music23_00021.ts music23_00025.ts music23_00029.ts v2.html music23_00002.ts music23_00006.ts music23_00010.ts music23_00014.ts music23_00018.ts music23_00022.ts music23_00026.ts music23.m3u8 v.html music23_00003.ts music23_00007.ts music23_00011.ts music23_00015.ts music23_00019.ts music23_00023.ts music23_00027.ts music23.mp4
檢視m3u8的內容:
[root@blog testjs]# more music23.m3u8 #EXTM3U #EXT-X-VERSION:3 #EXT-X-MEDIA-SEQUENCE:0 #EXT-X-ALLOW-CACHE:YES #EXT-X-TARGETDURATION:7 #EXTINF:6.041667, music23_00000.ts #EXTINF:4.000000, music23_00001.ts #EXTINF:6.000000, music23_00002.ts #EXTINF:4.291667, music23_00003.ts #EXTINF:5.375000, music23_00004.ts #EXTINF:6.000000, music23_00005.ts #EXTINF:5.041667, music23_00006.ts #EXTINF:3.583333, ....
四，用video.js播放
v.html
<head>
<meta name="viewport" charset="utf-8" content="width=device-width,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0">
<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="100%"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
style="width:100%;"
>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
<script type="text/javascript">
var player = videojs('my-video',{});
player.src("/testjs/music23.m3u8");
player.on('ready', function() {
//alert('ready');
player.play();
});
</script>
</body>
五，測試效果
六，幾點說明：
1，切分後的視訊檔案，應該用指令碼進行改名，(需要同時修改m3u8中記錄的檔名)避免被用程式輕易拉取
2, 視訊的player.play(); 會報錯，因為google規定需要與瀏覽器互動才能開始播放
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
3,video在頁面上的src會顯示為blob:http: 地址，不會直接顯示ts檔案的路徑，
但並不能有效的防止下載
七，檢視ffmpeg的版本:
[root@blog testjs]# ffmpeg -version ffmpeg version 4.2.2 Copyright (c) 2000-2019 the FFmpeg developers built with gcc 8 (GCC) configuration: --prefix=/usr --bindir=/usr/bin --datadir=/usr/share/ffmpeg --docdir=/usr/share/doc/ffmpeg
--incdir=/usr/include/ffmpeg --libdir=/usr/lib64 --mandir=/usr/share/man --arch=x86_64
--optflags='-O2 -g -pipe -Wall -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -Wp,-D_GLIBCXX_ASSERTIONS -fexceptions -fstack-protector-strong
-grecord-gcc-switches -specs=/usr/lib/rpm/redhat/redhat-hardened-cc1 -specs=/usr/lib/rpm/redhat/redhat-annobin-cc1 -m64
-mtune=generic -fasynchronous-unwind-tables -fstack-clash-protection -fcf-protection'
--extra-ldflags='-Wl,-z,relro -Wl,-z,now -specs=/usr/lib/rpm/redhat/redhat-hardened-ld '
--extra-cflags=' ' --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libvo-amrwbenc --enable-version3
--enable-bzlib --disable-crystalhd --enable-fontconfig --enable-frei0r --enable-gcrypt --enable-gnutls --enable-ladspa
--enable-libaom --enable-libdav1d --enable-libass --enable-libbluray --enable-libcdio --enable-libdrm --enable-libjack
--enable-libfreetype --enable-libfribidi --enable-libgsm --enable-libmp3lame --enable-nvenc --enable-openal
--enable-opencl --enable-opengl --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-librsvg --enable-libsrt
--enable-libsoxr --enable-libspeex --enable-libssh --enable-libtheora --enable-libvorbis --enable-libv4l2 --enable-libvidstab
--enable-libvmaf --enable-libvpx --enable-libx264 --enable-libx265 --enable-libxvid --enable-libzimg --enable-libzvbi
--enable-avfilter --enable-avresample --enable-postproc --enable-pthreads --disable-static --enable-shared --enable-gpl
--disable-debug --disable-stripping --shlibdir=/usr/lib64 --enable-libmfx --enable-runtime-cpudetect libavutil 56. 31.100 / 56. 31.100 libavcodec 58. 54.100 / 58. 54.100 libavformat 58. 29.100 / 58. 29.100 libavdevice 58. 8.100 / 58. 8.100 libavfilter 7. 57.100 / 7. 57.100 libavresample 4. 0. 0 / 4. 0. 0 libswscale 5. 5.100 / 5. 5.100 libswresample 3. 5.100 / 3. 5.100 libpostproc 55. 5.100 / 55. 5.100
&n