网页中加入视频播放组件,并使用ffmpeg对视频转编码

孤街浪徒 提交于 2019-12-04 06:18:11

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

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

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

这里有个问题是h5的video标签只支持三种编码的视频格式:

格式IEFirefoxOperaChromeSafari
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来进行转码 :

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)安装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 --enable-libx264

make

sudo make install

 ffmpeg完整安装请参考:https://www.cnblogs.com/wanghetao/p/3386311.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 1ibx264 -vpre slow -vpre 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 复制视频,不转码

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!