一、方案确定
计划做视频播放,要求能够播放H264编码的mp4文件,各个浏览器,各种终端都能播放。
首先查找可行性方案,
http://www.cnblogs.com/sink_cup/archive/2011/04/21/html5_video_ipad_firefox_chrome_ie9876_flash.html,这个方案将视频播放分为两部分,一是html5播放,二是flash播放。如果浏览器支持用html5的video标签播放h264的mp4文件,如ie9,chrome,safari采用html5播放,如果不支持,降级采用flowplayerp(以下简称fp)播放mp4文件。
不足是firefox,opera目前不支持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的播放控制条,禁用进度条。
搜索到一个用jquery和css实现的html5自定义控件:
http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/。可以灵活控制按钮是否可见,及按钮事件。
下个问题是html5播放如何计时。在上边的控件中,有文件video.js中,定义有播放器的timeupdate事件,在此方法中,调用自定义的timeupdate方法,在自定义方法中,获取当前播放视频的进度currenttime,进行计时。
下个问题是html5如何在播放开始时设置播放器从哪里开始播放。html5的video有currenttime属性。在chrome,safari下可以设置后,效果很好。但是ie9下,若设置开始播放时间较长,currenttime会没有效果,直接从0开始播放。因此做了一些特殊处理。
相关参考:
检测当前浏览器是否支持html5的video标签:
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
针对html5的video标签的详解: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.js,flowplayer.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没有类似于html5的timeupdate事件,因此需要自定义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插件,看还有说要用到一个名为lighttpd的webserver。
于是尝试在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
这个过程极其繁琐,耗费大量时间。
此时再使用fp的start参数,或者是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/WowzaMediaServerPro的application下,创建一个你的applicationName名称的空文件夹。在
/usr/local/WowzaMediaServerPro的conf文件夹下,创建一个与上边applicationName保持一致的文件夹,然后把/usr/local/WowzaMediaServerPro的conf下的所有配置文件,复制到
/usr/local/WowzaMediaServerPro/conf/applicationName下,修改复制过来的配置文件中的application.xml的StorageDir路径,这个就是wowza的application指向的地址。
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
比较有趣的一个东西:flowplayer和jw分别使用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
分享到:
相关推荐
免费JAVA毕业设计 2024成品源码+论文+数据库+启动教程 启动教程:https://www.bilibili.com/video/BV1SzbFe7EGZ 项目讲解视频:https://www.bilibili.com/video/BV1Tb421n72S 二次开发教程:https://www.bilibili.com/video/BV18i421i7Dx
,IGBT结温估算 模型见另一个发布
"S7-200 PLC驱动的智能粮仓系统:带解释的接线图与组态画面原理详解",S7-200 mcgs基于plc的自动智能粮仓系统 带解释的梯形图接线图原理图图纸,io分配,组态画面 ,S7-200; PLC; 自动智能粮仓系统; 梯形图接线图; 原理图图纸; IO分配; 组态画面,基于S7-200 PLC的智能粮仓系统设计与实现
手机编程-1738391379497.jpg
,rk3399pro,rk3568,车载方案设计,4路AHD-1080P摄像头输入,防撞识别,助力车泥头车安全运输
,CAD、DXF导图,自动进行位置路径规划,源码可进行简单功能添加实现设备所需功能,已经在冲孔机,点胶机上应用,性价比超高。 打孔机实测一分钟1400个孔
,电机控制资料-- 注:本驱动器适合于直流有感无刷电机 功能特点 支持电压9V~36V,额定输出电流5A 支持电位器、开关、0~3.3V模拟信号范围、0 3.3 5 24V逻辑电平、PWM 频率 脉冲信号、RS485多种输入信号 支持占空比调速(调压)、速度闭环控制(稳速)、电流控制(稳流)多种调速方式 支持按键控制正反转速度,启停 特色功能 1. 霍尔自学习 电机的三相线和三霍尔信号线可不按顺序连接,驱动器可自动对电机霍尔顺序进行学习。 2. 稳速控制响应时间短 稳速控制时电机由正转2000RPM切为反转2000RPM,用时约1.0s,电机切过程平稳 3. 极低速稳速控制 电机进行极低速稳速控制,电机稳速控制均匀,无忽快忽慢现象。
《HFSS同轴馈电矩形微带天线的模型制作与参数优化:从结果中学习,使用HFSS软件包进行实践的详细教程》,HFSS同轴馈电矩形微带天线 天线模型,附带结果,可改参数,HFSS软件包 (有教程,具体到每一步,可以自己做出来) ,HFSS; 同轴馈电; 矩形微带天线; 可改参数; HFSS软件包; 附带结果; 教程,HFSS软件包:可改参微带天线模型附带结果教程
"基于第二篇文章求解方法,改进粒子群算法在微电网综合能源优化调度的应用与复现代码展示——第一篇模型的参考与实践",基于改进粒子群算法微电网综合能源优化调度 求解方法主要参考第二篇文章 模型参照第一篇 复现代码 ,核心关键词: 基于改进粒子群算法; 微电网综合能源优化调度; 求解方法; 第二篇文章; 模型; 第一篇文章; 复现代码;,基于第二篇求解方法的改进粒子群算法在微电网综合能源优化调度中的应用研究
基于Comsol模拟的三层顶板随机裂隙浆液扩散模型:考虑重力影响的瞬态扩散规律分析,Comsol模拟,考虑三层顶板包含随机裂隙的浆液扩散模型,考虑浆液重力的影响,模型采用的DFN插件建立随机裂隙,采用达西定律模块中的储水模型为控制方程,分析不同注浆压力条件下的浆液扩散规律,建立瞬态模型 ,Comsol模拟; 随机裂隙浆液扩散模型; 浆液重力影响; DFN插件; 达西定律模块储水模型; 注浆压力条件; 浆液扩散规律; 瞬态模型,Comsol浆液扩散模型:随机裂隙下考虑重力的瞬态扩散分析
"基于S7-200 PLC与MCGS组态的五层电梯控制系统设计与实现:带详细接线图、IO分配及组态画面解析",S7-200 PLC和MCGS组态5层电梯五层电梯PLC控制系统 带解释的梯形图接线图原理图图纸,io分配,组态画面 ,核心关键词:S7-200 PLC; MCGS组态; 五层电梯; PLC控制系统; 梯形图接线图; IO分配; 组态画面。,S7-200 PLC与MCGS组态五层电梯控制系统原理图及梯形图解析
一、项目简介 本项目是一套基于springBoot+mybatis+maven+vue夕阳红公寓管理系统 包含:项目源码、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经过严格调试,eclipse或者idea 确保可以运行! 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值 二、技术实现 jdk版本:1.8 及以上 ide工具:IDEA或者eclipse 数据库: mysql5.5及以上 后端:spring+springboot+mybatis+maven+mysql 前端: vue , css,js , elementui 三、系统功能 1、系统角色主要包括:管理员、用户 2、系统功能 主要功能包括: 用户登录注册 首页 个人中心 修改密码 个人信息 访客管理 公告信息管理 缴费管理 维修管理 行程轨迹管理 单页号类型管理 公告类型管理 维修类型管理 租客管理 轮播图管理 余额充值等功能 详见 https://flypeppa.blog.csdn.net/article/details/143117373
基于时空Transformer的端到端的视频注视目标检测.pdf
Online Retail.xlsx
,C#地磅称重无人值守管理软件。 软件实现功能: 1、身份证信息读取。 2、人证识别。 3、车牌识别(臻识摄像头、海康摄像头)。 4、LED显示屏文字输出。 5、称重仪数据。 6、二维码扫码。 7、语音播报。 8、红外对射功能。 9、道闸控制。
com.deepseek.chat.apk
基于pyqt5+OpenPose的太极拳姿态识别系统可视化界面python源码+数据集.zip,个人大三大作业设计项目、经导师指导并认可通过的高分设计项目,评审分99分,代码完整确保可以运行,小白也可以亲自搞定,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者,也可作为课程设计、期末大作业。 该压缩包是一个基于PyQt5和OpenPose技术的太极拳姿态识别系统的源代码和相关资源集合。系统能够实现对太极拳动作的实时姿态识别,并通过可视化界面展示出来,为学习和教学太极拳提供便利。 二、技术栈与组件 PyQt5:一个Python绑定的Qt库,用于创建图形用户界面(GUI)应用程序。它提供了丰富的组件和工具,可以方便地构建各种复杂界面,如按钮、文本框、图像视图等,同时也支持事件驱动编程,使得用户交互更加灵活。 OpenPose:一个来自卡内基梅隆大学(CMU)的开源库,主要用于人体、面部、手部以及脚部的关键点检测。它采用了深度学习的方法,能够在单张图片上实时估计多人的关节位置,对于运动分析、姿态识别等领域非常有用。
1、文件内容:pygtk2-devel-2.24.0-9.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/pygtk2-devel-2.24.0-9.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装
"金纳米超表面模型:几何相位控制下的涡旋光生成与FDTD仿真研究",几何相位 金属超表面模型 涡旋光生成 FDTD仿真 复现lunwen:2012年Nano Letters:Dispersionless Phase Discontinuities for Controlling Light Propagation lunwen介绍:金纳米结构超表面模型,金属材料矩形结构,通过旋转角度执行几何相位,构建异常折反射超表面模型,通过涡旋相位匹配几何相位,构建生产轨道角动量的涡旋光场超表面; 案例内容:主要包括金纳米柱的单元结构仿真、几何相位计算,涡旋光的螺旋相位计算代码,以及异常折反射的超表面模型和轨道角动量光束生成的超表面模型; 案例包括fdtd模型、fdtd建模脚本、Matlab相位计算代码和电场复现结果,以及一份word教程,异常折反射和涡旋光相位的构建代码可用于任意波段,具备可拓展性。 ,核心关键词: 1. 几何相位 2. 金属超表面模型 3. 涡旋光生成 4. FDTD仿真 5. 复现论文 6. 金纳米结构 7. 异常折反射超表面模型 8. 轨道角动量光束 9. 单元结构仿
comso三维声表面波诱导液滴行为研究:液滴拉伸断裂过程的可视化及分析,包含液滴最高坐标、底面接触面积、空气接触面积与能量项研究。,comso三维声表面波作用液滴,液滴拉伸断裂形成液滴,结果图包含液滴最高坐标,液滴与底面接触面积,与空气接触面积,以及能量项 ,关键词:comso三维声表面波;液滴拉伸断裂;最高坐标;接触面积(底面/空气);能量项;结果图。,声波作用下液滴断裂,图示液滴信息及能量项分析