兼容各个浏览器的H.264播放: H.264+HTML5+FLOWPLAYER+WOWZA+RMTP

Posted phlsheji

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了兼容各个浏览器的H.264播放: H.264+HTML5+FLOWPLAYER+WOWZA+RMTP相关的知识,希望对你有一定的参考价值。

一、方案确定

计划做视频播放,要求可以播放H264编码的mp4文件,各个浏览器,各种终端都能播放。

首先查找可行性方案,

http://www.cnblogs.com/sink_cup/archive/2011/04/21/html5_video_ipad_firefox_chrome_ie9876_flash.html。这个方法将视频播放分为两部分。一是html5播放,二是flash播放。假设浏览器支持用html5video标签播放h264mp4文件,如ie9,chromesafari採用html5播放,假设不支持。降级採用flowplayerp(下面简称fp)播放mp4文件。

不足是firefoxopera眼下不支持h264编码。不管是html5还是fp在这两种浏览器上无法播放(经过后来实验,ff下是仅仅有音频没有视频)。

 

 

 

另一个方案是 http://hi.baidu.com/alimyself/item/7f5c003f3397968bb611db07 使用很easy。仅仅要链接一个js文件就能够了。

所以,仅仅要您的页面上(头部或底部)有这么段代码:

<scriptsrc="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script> 

就能够了。

这个封装太严密,无法灵活控制状态条和播放器属性。

http://www.zhangxinxu.com/study/201003/html5-video-mp4.html 

决定採用此方案。

首先使用方案中的代码搭建总体框架。

在使用该方案过程中,有一些修改。后附代码。

其它的一些降级方案:

可行的跨浏览器 HTML5 音频和视频:

http://msdn.microsoft.com/zh-cn/magazine/hh781023.aspx

优雅降级:http://www.iefans.net/html5-qianru-shipin/

没怎么看明确的一篇文章,貌似也是引用外部的一个js就可以:

http://camendesign.com/code/video_for_everybody

Flowplayer提供的降级方案:http://flowplayer.blacktrash.org/graceful.html

 

 

 

二、业务说明

基本框架增加后,就须要增加实际业务逻辑。

逻辑是全部人能够观看视频播放。

角色A满足某条件时,观看视频时不能控制播放进度,不能快进和后退,而且须要记录本次有效观看时间。播放開始时,须要从上次观看结束的时间点自己主动開始播放。

 

 

 

三、html5播放

首先是html5部分,在用video标签实现了基本播放后。须要控制角色A的播放控制条。禁用进度条。

搜索到一个用jquerycss实现的html5自己定义控件:

http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/

 能够灵活控制button是否可见。及button事件。

下个问题是html5播放怎样计时。在上边的控件中,有文件video.js中。定义有播放器的timeupdate事件,在此方法中,调用自己定义的timeupdate方法。在自己定义方法中。获取当前播放视频的进度currenttime。进行计时。

下个问题是html5怎样在播放開始时设置播放器从哪里開始播放。

html5videocurrenttime属性。

chromesafari下能够设置后,效果非常好。可是ie9下,若设置開始播放时间较长,currenttime会没有效果,直接从0開始播放。因此做了一些特殊处理。

相关參考:

检測当前浏览器是否支持html5video标签:

http://www.w3school.com.cn/html5/html_5_video.asp

Html5全局属性:http://www.w3school.com.cn/html5/html5_ref_globalattributes.asp

Html5 全局事件属性:http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp

针对html5video标签的具体解释:http://www.aspxhome.com/design/css/20106/1415123_3.htm

http://wiki.whatwg.org/wiki/Video_type_parameters

各个浏览器对html5支持程度測试:www.html5test.com

各个浏览器对html5支持程度的图文说明:http://html5readiness.com/

Html5视频播放是否能用wowzaserver,

http://www.wowza.com/forums/showthread.php?7532-HTML5-Support-for-video-playback

眼下没有測试成功,直接使用http播放。

 

 

四、 flowplayer 播放

Html5播放搞定后,整个播放才完毕了一小部分,继续fp播放。首先是fp的播放button控制,fp有提供一个控制条插件:在页面jsp中增加flowplayer.controls-3.2.8.js,flowplayer.controls-3.2.8.min.js

而且在播放器初始代码中初始化就可以。可自己定义控制条各个button是否显现及播放条样式。

工具条插件:

http://flowplayer.org/plugins/flash/controlbar.html

http://flowplayer.org/documentation/configuration/clips.html

//菜单插件

http://flowplayer.org/plugins/flash/menu.html

 

 

 

下边是播放怎样计时。因为fp没有类似于html5timeupdate事件,因此须要自己定义js计时器,在播放器開始播放时,開始计时:

clearIntervalFun=setInterval(fpTimeUpdate,1000);

timeupdate中用getttime方法获取fp的当前时间并计时。

Flowerplayer事件及属性

http://blog.sina.com.cn/s/blog_6cabf4070100wry7.html 

http://flowplayer.org/demos/skinning/tooltips.html

http://flowplayer.org/documentation/events/ 

http://releases.flowplayer.org/apidoc-latest/org/flowplayer/model/Clip.html

最难的是fp怎样设置视频的開始播放时间,在fp官网看到一个关于伪流的东西,http://flowplayer.org/plugins/streaming/pseudostreaming.html

上边有一句话非常是让人开心:Random seeking to any part of the timeline at any time.。能够载入到视频的不论什么地方进行播放。

须要flowplayer.pseudostreaming-3.2.9.swf 插件。看还有说要用到一个名为lighttpdweb server

 

于是尝试在linuxserver下安装lighttpd,以期可以使用flowplayer.pseudostreaming

搜索之后,发现lighttpd默认播放flv,假设要播放h264的,须要加入h264 模块。

http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Apache-Version2

安装完lighttpd,加入h264模块,

http://www.wenzizone.cn/?p=167

这个过程极其繁琐,耗费大量时间。

此时再使用fpstart參数。或者是seek方法,均不凑效。

后再细致看流媒体概念。见:

http://202.192.163.58/internet/page/kch-nr/page_10_4.htm

才发现伪流是顺序流式下载,“这样的方式和传统的下载方式没有本质的差别,仅仅是由于client的软件能够在媒体没有全然下载就能够播放。它不能跳过头部。必须先下完前面的才干够看后面的;”。

假设须要视频从一開始就播放还未下载到的部分。那么仅仅能使用实时流式传播。

是我对fp的伪流控件的说明理解的有问题。还是lighttpd安装有问题,详细问题出在哪里,如今还不明确。

假设要使用实时流式传播。就要使用流媒体server。鉴于fp有提供一个rtmp的插件。决定用rtmp协议。

原来已经成功安装helix,并成功使用rtsp协议进行realplayer播放。准备继续沿用helix,可是在helixport配置中未找到rtmp的port配置,不确定helix是否支持rtmp协议,因此决定流媒体server用wowza

各个流媒体对照:http://en.wikipedia.org/wiki/Comparison_of_streaming_media_systems

Wowza 在各种流媒体server中。支持较多编码格式。较多终端。

 

 

安装wowza

Wowza安装  http://sunky045.iteye.com/blog/538288

并配置applications,详细见

http://www.wowza.com/forums/content.php?

3-quick-start-guide

Wowza配置application。简单说就是在安装文件夹/usr/local/WowzaMediaServerProapplication下,创建一个你的applicationName名称的空文件夹。在

/usr/local/WowzaMediaServerProconf目录下,创建一个与上边applicationName保持一致的目录,然后把/usr/local/WowzaMediaServerProconf下的全部配置文件,拷贝到

/usr/local/WowzaMediaServerPro/conf/applicationName下。改动复制过来的配置文件里的application.xmlStorageDir 路径。这个就是wowzaapplication指向的地址。

Wowza測试是否正在执行  訪问: http://ip:1935 假设能訪问到。说明wowza成功安装。

 

 

安装完成,并參考fp官网的rtmp使用方法。

Flowplayer使用 wowza 演示样例: http://flowplayer.blacktrash.org/test/issue392.html

Wowza官网关于 flowplayer使用rtmp协议播放 视频的演示样例:

http://www.wowza.com/forums/content.php?54

直接播放。在ie876下,能播放,有声音,可是没有图像。 经过搜索,给wowza打了patch包,详见

http://www.wowza.com/forums/showthread.php?

14256-No-video-in-RTSP-gt-RTMP-resteam-from-ip-cam

再次播放。能够。

參考fp官网关于rtmp的使用方法,并设置start參数,播放成功。

详见http://flowplayer.electroteque.org/controls-markers

 

 

 

比較有趣的一个东西:flowplayerjw分别使用start參数。看视频播放处理的不同方式:

http://lvis.lavasmith.com/flowplayer/3.2.9.aspx?

player=flowplayer&clip=Topic8&start=40&cb=1340611398536

没有不论什么流媒体及视频播放基础,一个人钻牛角尖。无同事可请教。自己硬啃英文站点及文档,苦不堪言。幸亏有热心网友帮忙,指点迷津。

假设文章能对他人有一点帮助。将十分欣慰。仍然有一些遗留问题,有热心高人指点下,不胜感激。

以上是关于兼容各个浏览器的H.264播放: H.264+HTML5+FLOWPLAYER+WOWZA+RMTP的主要内容,如果未能解决你的问题,请参考以下文章

如何在浏览器中播放 H.264 视频?

Firefox 31.1.0 无法播放某些 H.264 视频

如何让以 H.264 编码的视频流在“WebView”中播放?

HLS点播实现(H.264和AAC码流)

火狐浏览器,edge浏览器,chrome浏览器里面的mse&h264是啥?和播放mp4网页视频是啥关系

采用H5多屏直播时,H.264和H.265视频流混合播放导致的卡顿问题解析