HTML5播放视频，并使⽤ffmpeg对视频转编码
⽹页加⼊视频可以⽤h5⾃带的video标签，这⾥⽤⼀个jQuery封装优化好的video视频组件videojs。
这⾥有个问题是h5的video标签根据不同的浏览器兼容情况只⽀持三种编码的视频格式：
格式IE Firefox Opera Chrome Safari
Ogg No 3.5+10.5+5.0+No
MPEG 49.0+No No 5.0+ 3.0+
WebM No 4.0+10.6+6.0+No
通常我们使⽤MP4格式，但是MP4⼜分为“1.MPEG4(DivX)”、“2.MPEG4(Xvid)”、“3.AVC(H264)”三种类型。要想在h5播放成功，必须转换视频格式为H264才可以，好多做法是
⽤格式⼯⼚来转换，这样⼯作量⼤，⽐较⿇烦，这⾥选择直接⽤ffmpeg在代码中进⾏转码：
直接傻⽠命令安装，亲测可⾏：
sudo add-apt-repository ppa:mc3man/trusty-media
sudo apt-get update
sudo apt-get install ffmpeg
ffmpeg -version
这样也是基本安装了FFmpeg完整版：
安装完成可跳过下⾯的1中的编译安装步骤，直接到第2步使⽤FFmpeg命令解码视频
1.安装ffmpeg需要安装下⾯三个包：
1. yasm：是⼀个汇编器，⽤于ffmpeg编译。
2. X264：x264是采⽤GPL授权的视频编码⾃由软件。x264的主要功能在于进⾏H.264/MPEG-4 AVC的视频编码，⽽不是作为解码器（decoder）之⽤
3. ffmpeg主要⽤于⾳视频转码，以及增删⽔印等处理，是⼀款简单实⽤且强⼤的⾳视频处理⼯具。
（1）.安装yasm
(2).x264安装
为了让ffmpeg使⽤h264编码。
ffmpeg中⾃带h264的解码，但是没有包含编码，所以再执⾏avcodec_find_encoder(CODEC_ID_H264)时返回的结果为NULL，需要额外添加x264⽀持h264的编码。
下载到这⾥：
选择下载：格式工厂在线转换
编译/部署：
解压压缩包，cd进⽬录
./configure --disable-asm
make
sudo make install
wget /releases/ogg/libogg-1.3.
./configure
make
make install
（4）、libvorbis
(libvorbis依赖于libogg, 所以libogg必须先于libvorbis安装)
安装⽅法如下：
wget /releases/vorbis/libvorbis-1.3.
./configure
make
make install
1 autoreconf -vif
2 ./configure --with-mp4v2 --enable-shared
3 make
4 make install
1 tar zxvf faac-1.
2 cd faac-1.28
3 ./bootstrap
4 ./configure
5 make
6 make install
1 ./configure
2 make
3 make install
1 ./configure
2 make
3 make install
（9）安装ffmpeg
解压：
bzip2 -d ffmpeg-4.1.3.tar.bz2
tar -xvf ffmpeg-4.1.3.tar
./configure --prefix=/usr/local/ffmpeg2 --enable-libmp3lame --enable-libvorbis --enable-gpl --enable-version3 --enable-nonfree --enable-pthreads --enable-libfaac --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libx264 --enable-libxvid make
make install
2.⽤ffmpeg将视频转为html5⽀持的编码：
(1)转码成ogv (Theora 1 Vorbis): .
ffmpeg -i WTE.mp4 -b 1500k -vcodec libtheora -acodec libvorbis -ab 160000 -g 30 v
(2)转码成webm (VP8 / Vorbis):
ffmpeg -i WTE.mp4 -b 1500k -vcodec libvpx -acodec libvorbis -ab 160000 -f webm -g 30 output.webm
(3)转码mp4 (H.264 / ACC):
ffmpeg -i WTE.mp4 -b 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 output.mp4 #有点问题，可⽤下⾯的命令代替
ffmpeg -i WTE.mp4 -b 1500k -vcodec h264 -preset slow -profile:v baseline -g 30 output.mp4
HTML中⼀次加⼊三种格式：
<video id="my-video" loop ='true' class="video-js" controls preload="auto" width="500" height="400"
poster="{% static 'images/m.jpg' %}" data-setup="{}" autoplay="autoplay">
<source src="{{ MEDIA_URL }}video/output.mp4" type="video/mp4">
<source src="{{ MEDIA_URL }}video/output.webm" type="video/webm">
<source src="{{ MEDIA_URL }}v" type="video/ogg">
<p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="videojs/html5-video-support/" target="_blank">supports HTML5 video</a></p> </video>
这样就可以兼容⼤部分浏览器，⾄此就可以在h5中畅通⽆阻地播放视频了
以下简单总结下ffmpeg命令参数：
-i 指定要转换视频的源⽂件
-s 视频转换后视频的分辨率
-vcodec 视频转换时使⽤的编解码器（-codecs）
-r 视频转换换的桢率(默认25桢每秒)
-b 视频转换换的bit率
-ab ⾳频转换后的bit率(默认64k)
-acodec 制度⾳频使⽤的编码器（-codecs）
-ac 制定转换后⾳频的声道
-ar ⾳频转换后的采样率
-an 禁⽤⾳频
-vn 禁⽤视频
-acodec copy 复制⾳频，不转码
-vcodec copy 复制视频，不转码
3.抛弃转码繁琐直接使⽤Chimee
后来意外发现⼀个兼容性更好的播放插件Chimee，兼容多种视频格式，MP4、M3U8、FLV等多种媒体格式，同时它也帮我们解决了⼤部分的兼容性、差异化问题，包括全屏、
⾃动播放、内联播放、直播解码等常见媒体播放需求，不⽤再⾃⼰去转码，官⽹有⽐较详细的使⽤⽂档，可⾃⾏去研究：
4.在推荐⼀款不错的视频播放器 flowplayer，官⽹有demo：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论