网页加入视频可以用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:http://www.xiph.org/downloads/ 
安装方法如下:

(4)libvorbis 

libvorbis-1.3.3.tar.gz 
Url:http://downloads.xiph.org/releases/vorbis/libvorbis-1.3.3.tar.gz

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

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

(5)、faad2 
faad2-2.7.tar.gz 
http://www.audiocoding.com/downloads.html 
安装方法

(6)、faac 
faac-1.28.tar.gz 
http://www.audiocoding.com/downloads.html
安装方法:

(7)、amr-nb 
amrnb-10.0.0.0.tar.bz2 
http://ftp.penguin.cz/pub/users/utx/amr/ ( 从此处下载最新版本 )
安装方法:

(8)、amr-wb 
amrwb-7.0.0.1.tar.bz2 
http://ftp.penguin.cz/pub/users/utx/amr/ ( 从此处下载最新版本 )
安装方法:

1     ./configure 2     make
3     make install  

(9)安装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-ffplaymake 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 复制视频,不转码

3.抛弃转码繁琐直接使用Chimee

后来意外发现一个兼容性更好的播放插件Chimee,兼容多种视频格式,MP4、M3U8、FLV等多种媒体格式,同时它也帮我们解决了大部分的兼容性、差异化问题,包括全屏、自动播放、内联播放、直播解码等常见媒体播放需求,不用再自己去转码,官网有比较详细的使用文档,可自行去研究:

http://chimee.org/docs/index.html

4.在推荐一款不错的视频播放器 flowplayer,官网有demo:

https://flowplayer.com/

视频转码流ffmpeg相关推荐

  1. H265/HEVC视频分层码流分析语义元素解释

    H265/HEVC视频分层码流分析语义元素解释 H265分层结构 H265码流结构 Ffmpge 抽取H264,H265码流的命令 视频参数集VPS 序列参数集SPS(Sequence Paramet ...

  2. 视频转码 via FFmpeg

    视频转码 via FFmpeg FFmpeg 简介 FFmpeg 命令行转码 FFmpeg API 转码 Transcoding 流程图 Transcoding 代码 open_input_file ...

  3. 截获视频网站 ts流 视频 网络嗅探 IPTV OTT 数据流 音视频数据 码流 ts 流

    忽然想把最近的技术总结一下.做ts流 IP数据流也有5年之久了.接触了大大小小的项目.例如网络嗅探 通过sniffer 获取IP包.ts 码流分析等.今天把二者结合起来可以应用到手机终端.或者工程仪表 ...

  4. ffplay flv mp4 转_手动视频转码教程,FFmpeg

    我相信很多人,在学习剪辑的时候都会在很多网站上下载影视素材.下载的素材有很多类型的格式,包括avi.rmvb.mkv.flv等等.得到这些格式的素材是无法直接进行编辑的,需要将其转换成MP4格式.这时 ...

  5. JavaCV音视频开发宝典:使用JavaCV读取海康平台或海康网络摄像头sdk回调视频TS码流并解析预览图像

    <JavaCV音视频开发宝典>专栏目录导航 <JavaCV音视频开发宝典>专栏介绍和目录 ​ 前言 两年前博主写了如何利用JavaCV解析各种h264裸流,<JavaCV ...

  6. JavaCV音视频开发宝典:使用JavaCV读取海康平台或海康网络摄像头sdk回调录像回放视频PS码流并解析预览图像

    <JavaCV音视频开发宝典>专栏目录导航 <JavaCV音视频开发宝典>专栏介绍和目录 ​ 前言 上一章中<JavaCV音视频开发宝典:使用JavaCV读取海康平台或海 ...

  7. android使用Ffmpeg JNI实时播放RTSP、RTMP等视频(主码流,子码流均能流畅播放)

    前言:最近 公司项目需要在电视上 播放摄像头视频,而且可以随时切换流,延时要求在500ms以内,网上试过了 各种开源库 ,都不能达到要求.于是自己找到公司C++开发人员请教,最后终于完成,在此记录,也 ...

  8. 使用FFMPEG类库分离出多媒体文件中的H.264码流

    在使用FFMPEG的类库进行编程的过程中,可以直接输出解复用之后的的视频数据码流.只需要在每次调用av_read_frame()之后将得到的视频的AVPacket存为本地文件即可. 经试验,在分离MP ...

  9. FFmpeg入门详解之12:Elecard Stream Analyzer码流分析工具

    简介 Elecard Stream Analyzer是一款简单小巧的码流分析工具,通过该软件,用户可以快速的分析查看视频序列码流:软件操作简单,使用方便,用户只需将视频文件导入软件内,系统就会自动帮您 ...

  10. 基于ffmpeg实现音视频转码

    一.背景 偶然的机会接触了ffmpeg,当时是从B站下载的视频转移到笔记本上看.使用b站手机客户端下载的视频格式为m4s的两个文件(video.m4s和audio.m4s),需要转成普通播放器支持的m ...

最新文章

  1. Qt实用技巧:使用OpenCV库的视频播放器(支持播放器操作,如暂停、恢复、停止、时间、进度条拽托等...
  2. 详解LINUX 的DHCP服务
  3. python项目部署失败的原因_python项目环境部署(一)
  4. Aasp.net前台调用后台cs变量
  5. Oxite移植到ASP.NET MVC2 BETA 笔记(关于Html.RenderPartialFromSkin)
  6. 关于TCP/IP必须知道的几个基础问题
  7. date对象 java_Java_按照指定的日期创建 Date对象
  8. Shell基础(一):Shell基础应用、简单Shell脚本的设计、使用Shell变量、变量的扩展应用...
  9. 计算机基础(九):C语言基础知识小结
  10. 转载:获取数据库中的所有表 (C#实现)
  11. Demo:第四章:Gateway网关
  12. LPC1788 UART-DMA遇到的问题
  13. 联想V470C 禁用触摸板
  14. RxJava模式与原理-----标准观察者与RxJava观察者
  15. 工作内存与主内存是什么,硬件层面的存储架构是什么样,线程的实现原理是什么
  16. 从PLC ,PAC ,到施耐德的自动化开放系统
  17. css特效(使用伪元素生成随机颜色爱心)
  18. 计算机DDN,DDN_耕者的技术博客_51CTO博客
  19. 曙光I620-g20服务器装WinServer2016
  20. 如何看待 30 岁转行做程序员这件事

热门文章

  1. 爬豆瓣读书Top250
  2. idm由于法律原因无法下载怎么办?
  3. 南通全国计算机等级考试,南通大学2017年3月全国计算机等级考试报名通知
  4. 10.16 Loi队内胡策 贪心+毒瘤输入+DP+数论
  5. python gui测试工具_GitHub - Github-Benjamin/LeChu: Python GUI工具 二次开发
  6. 从Uber和快的、滴滴、易到App对比看人性
  7. python PIL使用记录
  8. 市场调研-全球与中国汽车零部件涂层市场现状及未来发展趋势
  9. 大道至简,CAN 诊断的本质,脱离cdd 和dbc ,纯手造轮子
  10. (已拿offer)腾讯实习生笔试到面试总结(附带华为阿里面试经历)