⽹页加⼊视频可以⽤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命令解码视频
pdf转html1.安装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:
发布评论