`
testcs_dn
  • 浏览: 119315 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

兼容各个浏览器的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使用非常简单,只要链接一个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/。可以灵活控制按钮是否可见,及按钮事件。

下个问题是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视频播放能否用wowza服务器,

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

目前没有测试成功,直接使用http播放。

四、flowplayer播放

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

并且在播放器初始代码中初始化即可。可自定义控制条各个按钮是否显现及播放条样式。

工具条插件:

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

上边有一句话很是让人开心:Randomseekingtoanypartofthetimelineatanytime.。可以加载到视频的任何地方进行播放。需要flowplayer.pseudostreaming-3.2.9.swf插件,看还有说要用到一个名为lighttpdwebserver

于是尝试在linux服务器下安装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

才发现伪流是顺序流式下载,“这种方式和传统的下载方式没有本质的区别,只是因为客户端的软件可以在媒体没有完全下载就可以播放,它不能跳过头部,必须先下完前面的才可以看后面的;”。如果需要视频从一开始就播放还未下载到的部分,那么只能使用实时流式传播。

是我对fp的伪流控件的说明理解的有问题,还是lighttpd安装有问题,具体问题出在哪里,现在还不明白。

如果要使用实时流式传播,就要使用流媒体服务器。鉴于fp有提供一个rtmp的插件,决定用rtmp协议。

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

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

Wowza在各种流媒体服务器中,支持较多编码格式,较多终端。

安装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

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

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

另: 源代码,总结文档,第三方播放下载地址:http://download.csdn.net/detail/qingwangyoucao/4544606

分享到:
评论

相关推荐

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

    支持h264在各个浏览器下的视频播放,如果支持浏览器支持html5,采用html5播放,若不支持,采用flowplayer播放。并且有用到流媒体服务器服务器wowza,实现视频播放不卡,流畅,且能拖拽至未加载部分。实现视频观看...

    区块链_智能合约_Solidity_保险应用_基于以太坊的技_1744433266.zip

    区块链_智能合约_Solidity_保险应用_基于以太坊的技_1744433266

    【数据库管理】Mysql安装配置全流程:环境变量设置、服务安装与初始密码修改教程

    内容概要:本文档详细介绍了在Windows系统上安装MySQL数据库的具体步骤。首先,需要配置系统环境变量,包括新建MYSQL_HOME变量并将其添加到PATH中;其次,创建并编辑my.ini配置文件,设置MySQL的基本参数如端口、字符集、数据存放目录等;接着,在命令行工具中通过一系列指令完成MySQL的初始化、服务安装、启动以及root用户的密码设置和权限调整。整个流程涵盖了从环境搭建到最终确保MySQL服务正常运行的所有关键环节。 适合人群:适用于有一定计算机操作基础,尤其是对数据库管理有一定兴趣或需求的技术人员。 使用场景及目标:①帮助用户在本地机器上成功部署MySQL数据库环境;②确保用户能够掌握MySQL的基本配置与管理技能,如环境变量配置、服务安装与卸载、用户权限管理等。 其他说明:在安装过程中可能会遇到一些常见问题,例如由于之前版本残留导致的服务安装失败,此时可以通过命令行删除旧服务(sc delete mysql)来解决。此外,为了保证安全性,务必及时修改root用户的初始密码。

    【嵌入式系统】8051单片机启动文件STARTUP.A51代码解析:初始化堆栈指针与数据段及中断向量配置详解

    内容概要:`STARTUP.A51` 是 Keil C51 编译器自带的启动文件,用于初始化 8051 单片机的硬件和软件环境。该文件主要完成三个任务:初始化堆栈指针、清零内部数据存储器、跳转到主程序。文件中定义了内存模式(如 SMALL),并设置了堆栈指针的初始值为 0x60。接着通过循环将内部数据存储器的所有字节清零,确保程序开始时数据存储器的状态是确定的。此外,文件还列出了 8051 单片机的各个中断向量地址,并为每个中断提供占位符,实际的中断处理程序需要在其他文件中实现。最后,启动代码段初始化堆栈指针和数据段后,跳转到 `MAIN` 函数开始执行主程序。; 适合人群:对嵌入式系统开发有一定了解,尤其是使用 8051 单片机的开发者。; 使用场景及目标:①理解 8051 单片机启动文件的工作原理;②掌握如何初始化堆栈指针和数据段;③熟悉中断向量表的设置及其作用。; 其他说明:此文件为程序正常运行提供了必要的初始化操作,开发者可以根据具体需求修改该文件以适应不同的硬件和软件环境。

    【电力系统故障诊断】基于行波理论的输电线路故障诊断方法研究:三相电流信号分析与小波变换波头检测系统设计(含详细代码及解释)

    内容概要:该论文研究了一种基于行波理论的输电线路故障诊断方法。当输电线路发生故障时,故障点会产生向两侧传播的电流和电压行波。通过相模变换对三相电流行波解耦,利用解耦后独立模量间的关系确定故障类型和相别,再采用小波变换模极大值法标定行波波头,从而计算故障点距离。仿真结果表明,该方法能准确识别故障类型和相别,并对故障点定位具有高精度。研究使用MATLAB进行仿真验证,为输电线路故障诊断提供了有效解决方案。文中详细介绍了三相电流信号生成、相模变换(Clarke变换)、小波变换波头检测、故障诊断主流程以及结果可视化等步骤,并通过多个实例验证了方法的有效性和准确性。 适合人群:具备一定电力系统基础知识和编程能力的专业人士,特别是从事电力系统保护与控制领域的工程师和技术人员。 使用场景及目标:①适用于电力系统的故障检测与诊断;②能够快速准确地识别输电线路的故障类型、相别及故障点位置;③为电力系统的安全稳定运行提供技术支持,减少停电时间和损失。 其他说明:该方法不仅在理论上进行了深入探讨,还提供了完整的Python代码实现,便于读者理解和实践。此外,文中还讨论了行波理论的核心公式、三相线路行波解耦、行波测距实现等关键技术点,并针对工程应用给出了注意事项,如波速校准、采样率要求、噪声处理等。这使得该方法不仅具有学术价值,也具有很强的实际应用前景。

    光伏-混合储能微电网能量管理系统:基于滤波算法的功率分配与SOC优化

    内容概要:本文详细介绍了光伏-混合储能微电网能量管理系统的模型架构及其控制策略。首先探讨了光伏发电模块中的MPPT(最大功率点跟踪)控制,采用扰动观察法和改进型变步长策略来提高光伏板的发电效率。接着重点讲解了混合储能系统的功率分配,利用一阶低通滤波算法将功率需求分为低频和高频两部分,分别由蓄电池和超级电容处理。此外,文中还深入讨论了SOC(荷电状态)管理策略,确保电池和超级电容在不同工作状态下保持最佳性能。仿真结果显示,在光伏出力剧烈波动的情况下,系统能够有效地维持稳定的电压水平,并显著提高了储能设备的使用寿命。 适合人群:对光伏微电网、储能技术和能量管理系统感兴趣的科研人员、工程师和技术爱好者。 使用场景及目标:适用于研究和开发高效、可靠的光伏-混合储能微电网系统,旨在优化能量管理和提高系统稳定性。具体应用场景包括但不限于家庭光伏系统、小型微电网以及工业能源管理系统。 其他说明:文中提供了详细的代码实现和仿真结果,便于读者理解和复现实验。同时,模型设计采用了模块化思路,方便进行个性化修改和扩展。

    MATLAB与CVX平台下储能调峰调频联合优化模型的实现与应用

    内容概要:本文详细介绍了基于MATLAB和CVX平台实现的储能调峰调频联合优化模型。该模型不仅涵盖了储能的基本参数设定、负荷不确定性处理、充放电策略制定,还包括了调峰调频的联合调度、功率约束处理、鲁棒优化等方面的内容。通过构建考虑电池退化成本、充放电功率约束以及用户负荷不确定性的储能优化模型,展现了储能系统在电力系统中的高效协同工作。文中提供了详细的代码示例,解释了各个部分的功能和实现方法,强调了模型的深度与创新性。 适合人群:适用于具有一定编程基础和技术背景的研究人员、工程师以及希望深入了解储能系统优化的学生。 使用场景及目标:该模型主要用于电力系统中储能设备的优化调度,旨在提高储能系统的经济效益和社会效益。通过联合调峰调频,能够显著提升储能系统的收益,实现1+1>2的超线性增益效果。此外,该模型还可以用于教学和科研,帮助初学者理解和掌握储能优化的相关技术和理论。 其他说明:代码中包含了丰富的注释和模块化的子程序,使得整个模型易于理解和扩展。对于有经验的开发者,可以在现有基础上进一步改进和定制,以适应不同的应用场景。

    大模型技术白皮书2023版

    大模型技术白皮书2023版

    图像增广 PyTorch 版

    图像增广 PyTorch 版

    批量修改文件常用格式有TXT D0CX PDF 等办公软件里面附带使用教程

    批量修改文件名可以帮助用户节省大量时间,提高工作效率 里面附带使用教程

    《计算机应用基础》第2章--Windows-XP操作系统.ppt

    《计算机应用基础》第2章--Windows-XP操作系统.ppt

    基于单片机的红外密码锁设计(仿真+电路+程序)(51+1602+1838+24C02+JK+BZ+KEY16)#0407

    包括:源程序工程文件、Proteus仿真工程文件、电路原理图文件、配套技术手册、论文资料等 1、采用51/52单片机(通用)作为主控芯片; 2、采用1602液晶显示使用过程及状态,液晶屏亮度会随光线自动调整; 3、按键输入6位密码,输入密码正确则锁打开,显示open!输入密码错误次数超过3次,蜂鸣器报警并且锁定键盘; 4、密码可以自己修改,必须是锁打开时才能改密,为防止误操作,修改密码得输入两次; 5、采用24C02保存密码,掉电不丢失; 6、可通过红外遥控器输入密码操作锁的状态;

    2025年感知技术十大趋势深度分析报告总结述

    内容概要:本文深入剖析了2025年全球感知技术的十大发展趋势,涵盖多模态感知融合、3D感知与空间计算、脑机接口中的感知反馈技术、5G/6G赋能的超低延迟感知、语音与情感识别的高级化、生物感知与数字健康、环境感知与自适应智能、增强现实(AR)与触觉反馈技术、气味与化学感知、量子感知与极端条件测量。文章详细介绍了每项技术的技术原理、关键算法、实现方式、商业案例及未来前景,强调了感知技术在智慧城市、自动驾驶、智慧医疗、工业自动化等领域的深刻影响。报告指出,感知技术正从单一传感模式向多模态融合、从二维数据向三维空间重建、从传统网络通信向超低延迟和高可靠性网络升级,实现全场景、全维度的智能感知。; 适合人群:对感知技术感兴趣的科技爱好者、研究人员、决策者、企业管理层和投资人。; 使用场景及目标:①了解感知技术的最新进展和未来发展方向;②为技术研究提供全面、深入的参考;③为商业应用提供具体的案例和前景分析;④推动跨领域协同创新,构建开放共赢的产业生态。; 其他说明:报告基于近年来技术研发的最新进展、业界前沿的技术路线以及各大科技企业在商业落地方面的丰富实践。随着感知技术的不断成熟,数据隐私与安全保护问题也需高度重视,以确保技术进步与社会伦理和谐统一。未来,感知技术将成为推动社会进步和产业升级的重要力量,为实现万物互联、智慧决策和智能体验提供无限可能。

    基于Springboot+vue的校园新闻网站【源码+数据库+参考论文】

    本论文主要论述了如何使用JAVA语言开发一个校园新闻网站 ,本系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项目开发。在引言中,作者将论述校园新闻网站的当前背景以及系统开发的目的,后续章节将严格按照软件开发流程,对系统进行各个阶段分析设计。 校园新闻网站的主要使用者分为管理员和用户,实现功能包括管理员:首页、个人中心、用户管理、新闻类型管理、校园新闻管理、留言板管理、论坛交流、系统管理,用户前台:首页、校园新闻、论坛交流、留言反馈、个人中心、后台管理等功能。由于本网站的功能模块设计比较全面,所以使得整个校园新闻网站信息管理的过程得以实现。 本系统的使用可以实现本校园新闻网站管理的信息化,可以方便管理员进行更加方便快捷的管理,可以提高管理人员的工作效率。 基于Springboot+vue的校园新闻网站【源码+数据库+参考论文】 感兴趣自行下载学习!

    电力电子领域三相三电平PWM整流器的三电平SVPWM算法闭环控制策略解析

    内容概要:本文详细探讨了三相三电平PWM整流器的闭环控制策略及其核心技术——三电平SVPWM算法。文章首先介绍了三相三电平PWM整流器的基本概念和优势,如输出三种电平以降低谐波含量并减少滤波器体积和成本。接着阐述了闭环控制策略的重要性,强调了电压外环和电流内环的双闭环控制机制。随后,文章深入讲解了三电平SVPWM算法的工作原理,包括空间电压矢量的选择、扇区判断、矢量作用时间和死区补偿等关键技术环节。此外,还讨论了中点电位平衡的问题以及PI参数的整定方法。最后,通过示波器测试验证了系统的性能指标,如THD低于3%,直流电压纹波小于1%。 适合人群:从事电力电子领域的工程师和技术人员,尤其是对三相三电平PWM整流器及其控制策略感兴趣的读者。 使用场景及目标:适用于高压大功率场合,旨在提高整流器的性能,降低谐波含量,实现单位功率因数运行。通过合理设计闭环控制策略和优化SVPWM算法,确保整流器在各种工况下都能稳定、高效地工作。 其他说明:文中提供了大量MATLAB和C语言代码片段,帮助读者更好地理解和实现相关算法。同时,针对实际调试过程中遇到的问题给出了实用的解决方案,如中点电位平衡和死区补偿等。

    全新红娘本地交友系统定制版源码 相亲婚恋交友小程序源码.zip

    全新红娘本地交友系统定制版源码 相亲婚恋交友小程序源码

    【地图制图领域】基于DeepSeek的地图生成技术探索:融合AI与传统制图链的智能化地图生成系统设计了在AI时代

    内容概要:文章探讨了AI技术,特别是DeepSeek,如何驱动地图生成的变革。首先介绍了地图制图在AI时代的背景与挑战,强调了DeepSeek与地图融合的两种主要方式:嵌入地图制图链和研发地图语言自身的预训练模型。随后详细描述了DeepSeek在地图生成中的具体应用,包括智能化地图生成器DoMapAI的整体框架,地图制图链中的知识图谱推理路径,以及地图语言的Token化过程。最后,文章总结了AI时代地图制图的职业变化和技术变革,指出地图制图正经历“大变局”。 适合人群:从事地图制图及相关领域的研究人员、工程师,以及对AI与地图生成感兴趣的学者。 使用场景及目标:①理解AI技术在地图生成中的应用,特别是DeepSeek的作用;②掌握智能化地图生成器DoMapAI的工作原理及其应用场景;③学习地图语言Token化的方法及其在地图生成中的应用;④探索AI时代地图制图的职业发展方向和技术变革。 阅读建议:本文内容较为专业,建议读者先了解基本的AI技术和地图制图知识。重点关注DeepSeek与地图融合的具体方法和应用场景,理解智能化地图生成器DoMapAI的工作流程,以及地图语言Token化的实现过程。在阅读过程中,可以结合实际案例进行思考,以更好地理解AI技术对地图制图的影响。

    chromedriver-mac-arm64-135.0.7049.114.zip

    chromedriver-mac-arm64-135.0.7049.114.zip

    《网络布线与小型局域网搭建(第2版)》第3章-布线系统的设计.ppt

    《网络布线与小型局域网搭建(第2版)》第3章-布线系统的设计.ppt

    工程模拟领域Abaqus子弹穿钢板模型的CAE文件解析及其应用

    内容概要:本文详细介绍了使用Abaqus软件进行子弹穿钢板模型的模拟方法,重点探讨了CAE文件的作用和创建过程。首先概述了子弹穿钢板模拟的重要性和应用场景,接着深入讲解了CAE文件的概念及其作为模拟‘大脑’的关键地位。文中提供了详细的Python代码示例,涵盖创建部件、定义材料属性、划分网格、设置接触条件以及显式动力学分析步骤等方面的内容。此外,还讨论了网格划分的艺术、接触设置的注意事项、求解器参数的选择以及后处理技巧,强调了每个环节的具体操作和优化建议。 适合人群:从事工程模拟领域的研究人员和技术人员,尤其是对Abaqus软件有一定了解并希望深入掌握其高级特性的用户。 使用场景及目标:适用于需要模拟高速冲击条件下材料行为的研究项目,如防护材料研发、结构抗冲击设计等。通过学习本文,读者能够掌握创建复杂工程模拟模型的方法,提高模拟效率和准确性。 其他说明:文章不仅提供了理论指导,还包括大量实用的操作提示和代码片段,有助于读者快速上手并在实践中不断改进模型。同时,文中提到的一些优化技巧对于提升计算性能和结果可靠性具有重要价值。

Global site tag (gtag.js) - Google Analytics