轉換并播放視訊檔案
使用ffmpeg進行視訊拆分
[為什要進行拆分]
如果直接将MP4檔案放放到網站目錄當中，必須下載下傳整個視訊才可以播放,解決辦法是将視訊分成一小片來傳輸，比如将MP4轉碼為M3U8格式.比較主流的方式是使用ffmpeg拆分
下載下傳ffmpeg鏡像
docker pull jrottenberg/ffmpeg
查詢ffmpeg指令幫助
docker run --rm jrottenberg/ffmpeg
查詢ffmpeg支援的協定
docker run --rm jrottenberg/ffmpeg -protocols
使用ffmpeg進行轉換
docker run --rm -v $PWD/video:/root/download jrottenberg/ffmpeg -i /root/download/智慧城市大腦.mp4 \
-hls_time 10 -hls_list_size 0 -f hls /root/download/智慧城市大腦.m3u8
轉換名将講解
-i 指定輸入檔案
-hls_time 10 每10秒輸出一個TS檔案
-hls_list_size 0 則是在m3u8檔案中記錄所有ts檔案(預設是記錄最後五個TS檔案)
-f hls 指定輸出格式編碼
轉換後的檔案,一個輸入了13個檔案,檔案的大小并不一樣
# du -sh *
5.9M 智慧城市大腦0.ts
3.9M 智慧城市大腦1.ts
3.7M 智慧城市大腦2.ts
3.5M 智慧城市大腦3.ts
2.0M 智慧城市大腦4.ts
488K 智慧城市大腦5.ts
1.9M 智慧城市大腦6.ts
2.2M 智慧城市大腦7.ts
4.9M 智慧城市大腦8.ts
4.1M 智慧城市大腦9.ts
2.7M 智慧城市大腦10.ts
3.5M 智慧城市大腦11.ts
1.5M 智慧城市大腦12.ts
4.0K 智慧城市大腦.m3u8
165M 智慧城市大腦.mp4
播放轉換後的檔案
轉換前效果
http://47.112.150.90/ffmpeg-video/index.html
轉換後效果
http://47.112.150.90/ffmpeg-video/index_video_m3u8.html
使用voide.js播放,voide.js的使用方法不在贅述
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>前端播放m3u8格式視訊</title>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" target="_blank" rel="external nofollow" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
<!-- videojs-contrib-hls 用于在電腦端播放 如果隻需手機播放可以不引入 -->
</head>
<body>
<style>
.video-js .vjs-tech {
position: relative !important;
}
</style>
<div>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
<source id="source" src="video/智慧城市大腦.m3u8" type="application/x-mpegURL"></source>
</video>
</div>
<div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切換視訊</div>
</body>
<script>
// videojs 簡單使用
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
})
myVideo.play()
var changeVideo = function(vdoSrc) {
if(/\.m3u8$/.test(vdoSrc)) { //判斷視訊源是否是m3u8的格式
myVideo.src({
src: vdoSrc,
type: 'application/x-mpegURL' //在重新添加視訊源的時候需要給新的type的值
})
} else {
myVideo.src(vdoSrc)
}
myVideo.load();
myVideo.play();
}
var src = 'http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8';
document.querySelector('.qiehuan').addEventListener('click', function() {
changeVideo(src);
})
</script>
ffmpeg其他資訊
ffmpeg指令幫助
執行指令docker run --rm jrottenberg/ffmpeg,傳回如下
ffmpeg version 4.1 Copyright (c) 2000-2018 the FFmpeg developers
built with gcc 5.4.0 (Ubuntu 5.4.0-6ubuntu1~16.04.11) 20160609
configuration: --disable-debug --disable-doc --disable-ffplay --enable-shared --enable-avresample --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-gpl --enable-libass --enable-libfreetype --enable-libvidstab --enable-libmp3lame --enable-libopenjpeg --enable-libopus --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx265 --enable-libxvid --enable-libx264 --enable-nonfree --enable-openssl --enable-libfdk_aac --enable-libkvazaar --enable-libaom --extra-libs=-lpthread --enable-postproc --enable-small --enable-version3 --extra-cflags=-I/opt/ffmpeg/include --extra-ldflags=-L/opt/ffmpeg/lib --extra-libs=-ldl --prefix=/opt/ffmpeg
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
libavresample 4. 0. 0 / 4. 0. 0
libswscale 5. 3.100 / 5. 3.100
libswresample 3. 3.100 / 3. 3.100
libpostproc 55. 3.100 / 55. 3.100
Hyper fast Audio and Video encoder
usage: ffmpeg [options] [[infile options] -i infile]... {[outfile options] outfile}...
Getting help:
-h -- print basic options
-h long -- print more options
-h full -- print all options (including all format and codec specific options, very long)
-h type=name -- print all options for the named decoder/encoder/demuxer/muxer/filter/bsf
See man ffmpeg for detailed description of the options.
Print help / information / capabilities:
-L show license
-h topic show help
-? topic show help
-help topic show help
--help topic show help
-version show version
-buildconf show build configuration
-formats show available formats
-muxers show available muxers
-demuxers show available demuxers
-devices show available devices
-codecs show available codecs
-decoders show available decoders
-encoders show available encoders
-bsfs show available bit stream filters
-protocols show available protocols
-filters show available filters
-pix_fmts show available pixel formats
-layouts show standard channel layouts
-sample_fmts show available audio sample formats
-colors show available color names
-sources device list sources of the input device
-sinks device list sinks of the output device
-hwaccels show available HW acceleration methods
Global options (affect whole program instead of just one file:
-loglevel loglevel set logging level
-v loglevel set logging level
-report generate a report
-max_alloc bytes set maximum size of a single allocated block
-y overwrite output files
-n never overwrite output files
-ignore_unknown Ignore unknown stream types
-filter_threads number of non-complex filter threads
-filter_complex_threads number of threads for -filter_complex
-stats print progress report during encoding
-max_error_rate maximum error rate ratio of errors (0.0: no errors, 1.0: 100% errors) above which ffmpeg returns an error instead of success.
-bits_per_raw_sample number set the number of bits per raw sample
-vol volume change audio volume (256=normal)
Per-file main options:
-f fmt force format
-c codec codec name
-codec codec codec name
-pre preset preset name
-map_metadata outfile[,metadata]:infile[,metadata] set metadata information of outfile from infile
-t duration record or transcode "duration" seconds of audio/video
-to time_stop record or transcode stop time
-fs limit_size set the limit file size in bytes
-ss time_off set the start time offset
-sseof time_off set the start time offset relative to EOF
-seek_timestamp enable/disable seeking by timestamp with -ss
-timestamp time set the recording timestamp ('now' to set the current time)
-metadata string=string add metadata
-program title=string:st=number... add program with specified streams
-target type specify target file type ("vcd", "svcd", "dvd", "dv" or "dv50" with optional prefixes "pal-", "ntsc-" or "film-")
-apad audio pad
-frames number set the number of frames to output
-filter filter_graph set stream filtergraph
-filter_script filename read stream filtergraph description from a file
-reinit_filter reinit filtergraph on input parameter changes
-discard discard
-disposition disposition
Video options:
-vframes number set the number of video frames to output
-r rate set frame rate (Hz value, fraction or abbreviation)
-s size set frame size (WxH or abbreviation)
-aspect aspect set aspect ratio (4:3, 16:9 or 1.3333, 1.7777)
-bits_per_raw_sample number set the number of bits per raw sample
-vn disable video
-vcodec codec force video codec ('copy' to copy stream)
-timecode hh:mm:ss[:;.]ff set initial TimeCode value.
-pass n select the pass number (1 to 3)
-vf filter_graph set video filters
-ab bitrate audio bitrate (please use -b:a)
-b bitrate video bitrate (please use -b:v)
-dn disable data
Audio options:
-aframes number set the number of audio frames to output
-aq quality set audio quality (codec-specific)
-ar rate set audio sampling rate (in Hz)
-ac channels set number of audio channels
-an disable audio
-acodec codec force audio codec ('copy' to copy stream)
-vol volume change audio volume (256=normal)
-af filter_graph set audio filters
Subtitle options:
-s size set frame size (WxH or abbreviation)
-sn disable subtitle
-scodec codec force subtitle codec ('copy' to copy stream)
-stag fourcc/tag force subtitle tag/fourcc
-fix_sub_duration fix subtitles duration
-canvas_size size set canvas size (WxH or abbreviation)
-spre preset set the subtitle options to the indicated preset
ffmpeg支援的協定
執行指令docker run --rm jrottenberg/ffmpeg -protocols
ffmpeg version 4.1 Copyright (c) 2000-2018 the FFmpeg developers
built with gcc 5.4.0 (Ubuntu 5.4.0-6ubuntu1~16.04.11) 20160609
configuration: --disable-debug --disable-doc --disable-ffplay --enable-shared --enable-avresample --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-gpl --enable-libass --enable-libfreetype --enable-libvidstab --enable-libmp3lame --enable-libopenjpeg --enable-libopus --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx265 --enable-libxvid --enable-libx264 --enable-nonfree --enable-openssl --enable-libfdk_aac --enable-libkvazaar --enable-libaom --extra-libs=-lpthread --enable-postproc --enable-small --enable-version3 --extra-cflags=-I/opt/ffmpeg/include --extra-ldflags=-L/opt/ffmpeg/lib --extra-libs=-ldl --prefix=/opt/ffmpeg
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
libavresample 4. 0. 0 / 4. 0. 0
libswscale 5. 3.100 / 5. 3.100
libswresample 3. 3.100 / 3. 3.100
libpostproc 55. 3.100 / 55. 3.100
Supported file protocols:
Input:
async
cache
concat
crypto
data
ffrtmpcrypt
ffrtmphttp
file
ftp
gopher
hls
http
httpproxy
https
mmsh
mmst
pipe
rtmp
rtmpe
rtmps
rtmpt
rtmpte
rtmpts
rtp
srtp
subfile
tcp
tls
udp
udplite
unix
Output:
crypto
ffrtmpcrypt
ffrtmphttp
file
ftp
gopher
http
httpproxy
https
icecast
md5
pipe
prompeg
rtmp
rtmpe
rtmps
rtmpt
rtmpte
rtmpts
rtp
srtp
tee
tcp
tls
udp
udplite
unix
ffmpeg轉換過程
執行指令
docker run --rm -v $PWD/video:/root/download jrottenberg/ffmpeg -i /root/download/智慧城市大腦.mp4 \
-hls_time 10 -hls_list_size 0 -f hls /root/download/智慧城市大腦.m3u8
輸出内容如下
ffmpeg version 4.1 Copyright (c) 2000-2018 the FFmpeg developers
built with gcc 5.4.0 (Ubuntu 5.4.0-6ubuntu1~16.04.11) 20160609
configuration: --disable-debug --disable-doc --disable-ffplay --enable-shared --enable-avresample --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-gpl --enable-libass --enable-libfreetype --enable-libvidstab --enable-libmp3lame --enable-libopenjpeg --enable-libopus --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx265 --enable-libxvid --enable-libx264 --enable-nonfree --enable-openssl --enable-libfdk_aac --enable-libkvazaar --enable-libaom --extra-libs=-lpthread --enable-postproc --enable-small --enable-version3 --extra-cflags=-I/opt/ffmpeg/include --extra-ldflags=-L/opt/ffmpeg/lib --extra-libs=-ldl --prefix=/opt/ffmpeg
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
libavresample 4. 0. 0 / 4. 0. 0
libswscale 5. 3.100 / 5. 3.100
libswresample 3. 3.100 / 3. 3.100
libpostproc 55. 3.100 / 55. 3.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '/root/download/智慧城市大腦.mp4':
Metadata:
major_brand : mp42
minor_version : 0
compatible_brands: mp42mp41
creation_time : 2017-10-20T06:49:22.000000Z
Duration: 00:02:11.29, start: 0.000000, bitrate: 10516 kb/s
Stream #0:0(eng): Video: h264 (avc1 / 0x31637661), yuv420p(tv, bt709), 1920x1080, 10190 kb/s, 25 fps, 25 tbr, 25k tbn, 50 tbc (default)
Metadata:
creation_time : 2017-10-20T06:49:22.000000Z
handler_name : ?Mainconcept Video Media Handler
encoder : AVC Coding
Stream #0:1(eng): Audio: aac (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 317 kb/s (default)
Metadata:
creation_time : 2017-10-20T06:49:22.000000Z
handler_name : #Mainconcept MP4 Sound Media Handler
Stream mapping:
Stream #0:0 -> #0:0 (h264 (native) -> h264 (libx264))
Stream #0:1 -> #0:1 (aac (native) -> aac (native))
Press [q] to stop, [?] for help
[libx264 @ 0x69b2c0] using cpu capabilities: MMX2 SSE2Fast SSSE3 SSE4.2 AVX FMA3 AVX2 LZCNT BMI2
[libx264 @ 0x69b2c0] profile High, level 4.0
[libx264 @ 0x69b2c0] 264 - core 148 - H.264/MPEG-4 AVC codec - Copyleft 2003-2016 - http://www.videolan.org/x264.html - options: cabac=1 ref=3 deblock=1:0:0 analyse=0x3:0x113 me=hex subme=7 psy=1 psy_rd=1.00:0.00 mixed_ref=1 me_range=16 chroma_me=1 trellis=1 8x8dct=1 cqm=0 deadzone=21,11 fast_pskip=1 chroma_qp_offset=-2 threads=6 lookahead_threads=1 sliced_threads=0 nr=0 decimate=1 interlaced=0 bluray_compat=0 constrained_intra=0 bframes=3 b_pyramid=2 b_adapt=1 b_bias=0 direct=1 weightb=1 open_gop=0 weightp=2 keyint=250 keyint_min=25 scenecut=40 intra_refresh=0 rc_lookahead=40 rc=crf mbtree=1 crf=23.0 qcomp=0.60 qpmin=0 qpmax=69 qpstep=4 ip_ratio=1.40 aq=1:1.00
[hls @ 0x69a0c0] Opening '/root/download/智慧城市大腦0.ts' for writing
Output #0, hls, to '/root/download/智慧城市大腦.m3u8':
Metadata:
major_brand : mp42
minor_version : 0
compatible_brands: mp42mp41
encoder : Lavf58.20.100
Stream #0:0(eng): Video: h264 (libx264), yuv420p(progressive), 1920x1080, q=-1--1, 25 fps, 90k tbn, 25 tbc (default)
Metadata:
creation_time : 2017-10-20T06:49:22.000000Z
handler_name : ?Mainconcept Video Media Handler
encoder : Lavc58.35.100 libx264
Side data:
cpb: bitrate max/min/avg: 0/0/0 buffer size: 0 vbv_delay: -1
Stream #0:1(eng): Audio: aac, 48000 Hz, stereo, fltp, 128 kb/s (default)
Metadata:
creation_time : 2017-10-20T06:49:22.000000Z
handler_name : #Mainconcept MP4 Sound Media Handler
encoder : Lavc58.35.100 aac
[hls @ 0x69a0c0] Opening '/root/download/智慧城市大腦1.ts' for writing=0.753x
[hls @ 0x69a0c0] Cannot use rename on non file protocol, this may lead to races and temporary partial files
[hls @ 0x69a0c0] Opening '/root/download/智慧城市大腦2.ts' for writing= 1x
[hls @ 0x69a0c0] Opening '/root/download/智慧城市大腦3.ts' for writing=0.943x
[hls @ 0x69a0c0] Opening '/root/download/智慧城市大腦4.ts' for writing=0.941x
[hls @ 0x69a0c0] Opening '/root/download/智慧城市大腦5.ts' for writing=0.975x
[hls @ 0x69a0c0] Opening '/root/download/智慧城市大腦6.ts' for writing=0.994x
[hls @ 0x69a0c0] Opening '/root/download/智慧城市大腦7.ts' for writing=1.02x
[hls @ 0x69a0c0] Opening '/root/download/智慧城市大腦8.ts' for writing=1.03x
[hls @ 0x69a0c0] Opening '/root/download/智慧城市大腦9.ts' for writing=1.06x
[hls @ 0x69a0c0] Opening '/root/download/智慧城市大腦10.ts' for writing1.06x
[hls @ 0x69a0c0] Opening '/root/download/智慧城市大腦11.ts' for writing1.05x
[hls @ 0x69a0c0] Opening '/root/download/智慧城市大腦12.ts' for writing1.03x
frame= 3281 fps= 26 q=-1.0 Lsize=N/A time=00:02:11.24 bitrate=N/A speed=1.02x
video:37253kB audio:2064kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: unknown
[libx264 @ 0x69b2c0] frame I:18 Avg QP:16.90 size: 72740
[libx264 @ 0x69b2c0] frame P:1017 Avg QP:21.89 size: 21641
[libx264 @ 0x69b2c0] frame B:2246 Avg QP:26.23 size: 6602
[libx264 @ 0x69b2c0] consecutive B-frames: 5.5% 8.0% 5.3% 81.2%
[libx264 @ 0x69b2c0] mb I I16..4: 30.9% 46.8% 22.3%
[libx264 @ 0x69b2c0] mb P I16..4: 4.2% 5.6% 2.0% P16..4: 15.3% 6.8% 3.6% 0.0% 0.0% skip:62.5%
[libx264 @ 0x69b2c0] mb B I16..4: 0.8% 0.5% 0.2% B16..8: 19.1% 3.5% 0.8% direct: 1.3% skip:73.8% L0:45.4% L1:47.4% BI: 7.1%
[libx264 @ 0x69b2c0] 8x8 transform intra:44.5% inter:49.8%
[libx264 @ 0x69b2c0] coded y,uvDC,uvAC intra: 19.2% 38.5% 21.3% inter: 3.6% 5.4% 0.7%
[libx264 @ 0x69b2c0] i16 v,h,dc,p: 54% 40% 5% 2%
[libx264 @ 0x69b2c0] i8 v,h,dc,ddl,ddr,vr,hd,vl,hu: 32% 14% 49% 1% 1% 1% 1% 1% 1%
[libx264 @ 0x69b2c0] i4 v,h,dc,ddl,ddr,vr,hd,vl,hu: 33% 26% 19% 4% 3% 3% 4% 4% 4%
[libx264 @ 0x69b2c0] i8c dc,h,v,p: 49% 28% 22% 2%
[libx264 @ 0x69b2c0] Weighted P-Frames: Y:4.4% UV:4.3%
[libx264 @ 0x69b2c0] ref P L0: 65.6% 7.1% 17.9% 9.4% 0.0%
[libx264 @ 0x69b2c0] ref B L0: 84.8% 12.6% 2.6%
[libx264 @ 0x69b2c0] ref B L1: 94.3% 5.7%
[libx264 @ 0x69b2c0] kb/s:2325.26
[aac @ 0x69c640] Qavg: 384.623
參考連結
[使用PHP結合Ffmpeg快速搭建流媒體服務實踐]
https://segmentfault.com/a/1190000016826820?utm_source=tag-newest
[前端video标簽播放m3u8格式視訊]
https://blog.csdn.net/qq_30282133/article/details/81566273
[video.js使用]
https://www.awaimai.com/2053.html
![FFmpeg視訊解碼為YUV像素資料檔案[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)