转换并播放视频文件
使用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=)