HTML5播放视频，并使用ffmpeg对视频转编码

网页加入视频可以用h5自带的video标签，这里用一个jquery封装优化好的video视频组件videojs。

videojs官方网站：https://docs.videojs.com/index.html

videojs下载：https://github.com/videojs/video.js/releases

这里有个问题是h5的video标签根据不同的浏览器兼容情况只支持三种编码的视频格式：

格式	ie	firefox	opera	chrome	safari
ogg	no	3.5+	10.5+	5.0+	no
mpeg 4	9.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

wget http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
tar -xzvf yasm-1.3.0.tar.gz
cd yasm-1.3.0
./configure
make
make install

 

(2).x264安装

为了让ffmpeg使用h264编码。

ffmpeg中自带h264的解码，但是没有包含编码，所以再执行avcodec_find_encoder(codec_id_h264)时返回的结果为null，需要额外添加x264支持h264的编码。

下载到这里：

https://code.videolan.org/videolan/x264/tree/stable

选择下载：

wget https://code.videolan.org/videolan/x264/-/archive/stable/x264-stable.tar.gz

编译/部署：

解压压缩包，cd进目录

./configure  --disable-asm

make

sudo make install

（3）、libogg 
libogg-1.3.1.tar.gz 
url：
安装方法如下：

wget http://downloads.xiph.org/releases/ogg/libogg-1.3.4.tar.gz
 ./configure 
    make  
     make install  

（4）、libvorbis 

libvorbis-1.3.3.tar.gz 
url：

(libvorbis依赖于libogg, 所以libogg必须先于libvorbis安装)
安装方法如下：

wget http://downloads.xiph.org/releases/vorbis/libvorbis-1.3.6.tar.xz

 ./configure
     make  
     make install  

 

（5）、faad2 
faad2-2.7.tar.gz 
 
安装方法

1     autoreconf -vif  
2     ./configure  --with-mp4v2 --enable-shared  
3     make  
4     make install  

（6）、faac 
faac-1.28.tar.gz 

安装方法：

1     tar zxvf faac-1.28.tar.gz  
2     cd faac-1.28  
3     ./bootstrap  
4     ./configure 5     make   
6     make install  

（7）、amr-nb 
amrnb-10.0.0.0.tar.bz2 
 ( 从此处下载最新版本 )
安装方法：

1     ./configure 2     make  
3     make install  

（8）、amr-wb 
amrwb-7.0.0.1.tar.bz2 
 ( 从此处下载最新版本 )
安装方法：

1     ./configure 2     make  
3     make install  

 

（3）安装ffmpeg

官网下载：http://ffmpeg.org/download.html

wget https://ffmpeg.org/releases/ffmpeg-4.1.3.tar.bz2

解压：

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 --enable-postproc --enable-ffserver --enable-ffplay
   make 
   make install 

 ffmpeg完整安装请参考：https://www.cnblogs.com/wanghetao/p/3386311.html

各模块介绍：https://wenku.baidu.com/view/94bfc009581b6bd97f19ea53.html

2.用ffmpeg将视频转为html5支持的编码：

      (1)转码成ogv (theora 1 vorbis): .

      ffmpeg -i wte.mp4 -b 1500k -vcodec libtheora -acodec libvorbis -ab 160000 -g 30    output.ogv

      (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

　　参考自：https://www.doc88.com/p-7088891528596.html

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 }}video/output.ogv" 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="http://videojs.com/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 复制视频，不转码