刚好项目要用到在线视频播放的功能。目前假设所有的视频都为flv格式。直接网上找到了flvplayer.swf几个版本,保留一个自认为OK的版本,做了一个小Demo.整理做一下记录先。
首先给个flvplayer.swf的下载版本,见下面的附件。demo已经自带了插件,可以直接下载例子。
接着就是分直接网页加载还是js动态加载,这个其实也是简单,之前搞过swf之类加载的应该都很清楚,这里也顺便提一下。
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-4445535411111' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' width=500 height=400 > <param name='movie' value='/flvplayer.swf' /> <param name='quality' value='high' /> <param name='allowFullScreen' value='true' /> <param name='FlashVars' value='vcastr_file=/16.flv&IsAutoPlay=1&IsContinue=1' /> <embed src='/flvplayer.swf' allowfullscreen='true' flashvars='vcastr_file=/wenjian.flv&IsAutoPlay=1&IsContinue=1' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width=500 height=400 /> </object>js动态加载需要引入swfobject.js的如下:
/** * SWFObject v1.5: Flash Player detection and embed - http://blog.deconcept.com/swfobject/ * * SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License: * http://www.opensource.org/licenses/mit-license.php * */ if(typeof deconcept=="undefined"){var deconcept=new Object();}if(typeof deconcept.util=="undefined"){deconcept.util=new Object();}if(typeof deconcept.SWFObjectUtil=="undefined"){deconcept.SWFObjectUtil=new Object();}deconcept.SWFObject=function(_1,id,w,h,_5,c,_7,_8,_9,_a){if(!document.getElementById){return;}this.DETECT_KEY=_a?_a:"detectflash";this.skipDetect=deconcept.util.getRequestParameter(this.DETECT_KEY);this.params=new Object();this.variables=new Object();this.attributes=new Array();if(_1){this.setAttribute("swf",_1);}if(id){this.setAttribute("id",id);}if(w){this.setAttribute("width",w);}if(h){this.setAttribute("height",h);}if(_5){this.setAttribute("version",new deconcept.PlayerVersion(_5.toString().split(".")));}this.installedVer=deconcept.SWFObjectUtil.getPlayerVersion();if(!window.opera&&document.all&&this.installedVer.major>7){deconcept.SWFObject.doPrepUnload=true;}if(c){this.addParam("bgcolor",c);}var q=_7?_7:"high";this.addParam("quality",q);this.setAttribute("useExpressInstall",false);this.setAttribute("doExpressInstall",false);var _c=(_8)?_8:window.location;this.setAttribute("xiRedirectUrl",_c);this.setAttribute("redirectUrl","");if(_9){this.setAttribute("redirectUrl",_9);}};deconcept.SWFObject.prototype={useExpressInstall:function(_d){this.xiSWFPath=!_d?"expressinstall.swf":_d;this.setAttribute("useExpressInstall",true);},setAttribute:function(_e,_f){this.attributes[_e]=_f;},getAttribute:function(_10){return this.attributes[_10];},addParam:function(_11,_12){this.params[_11]=_12;},getParams:function(){return this.params;},addVariable:function(_13,_14){this.variables[_13]=_14;},getVariable:function(_15){return this.variables[_15];},getVariables:function(){return this.variables;},getVariablePairs:function(){var _16=new Array();var key;var _18=this.getVariables();for(key in _18){_16[_16.length]=key+"="+_18[key];}return _16;},getSWFHTML:function(){var _19="";if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","PlugIn");this.setAttribute("swf",this.xiSWFPath);}_19="<embed type=\"application/x-shockwave-flash\" src=\""+this.getAttribute("swf")+"\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\" style=\""+this.getAttribute("style")+"\"";_19+=" id=\""+this.getAttribute("id")+"\" name=\""+this.getAttribute("id")+"\" ";var _1a=this.getParams();for(var key in _1a){_19+=[key]+"=\""+_1a[key]+"\" ";}var _1c=this.getVariablePairs().join("&");if(_1c.length>0){_19+="flashvars=\""+_1c+"\"";}_19+="/>";}else{if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","ActiveX");this.setAttribute("swf",this.xiSWFPath);}_19="<object id=\""+this.getAttribute("id")+"\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\" style=\""+this.getAttribute("style")+"\">";_19+="<param name=\"movie\" value=\""+this.getAttribute("swf")+"\" />";var _1d=this.getParams();for(var key in _1d){_19+="<param name=\""+key+"\" value=\""+_1d[key]+"\" />";}var _1f=this.getVariablePairs().join("&");if(_1f.length>0){_19+="<param name=\"flashvars\" value=\""+_1f+"\" />";}_19+="</object>";}return _19;},write:function(_20){if(this.getAttribute("useExpressInstall")){var _21=new deconcept.PlayerVersion([6,0,65]);if(this.installedVer.versionIsValid(_21)&&!this.installedVer.versionIsValid(this.getAttribute("version"))){this.setAttribute("doExpressInstall",true);this.addVariable("MMredirectURL",escape(this.getAttribute("xiRedirectUrl")));document.title=document.title.slice(0,47)+" - Flash Player Installation";this.addVariable("MMdoctitle",document.title);}}if(this.skipDetect||this.getAttribute("doExpressInstall")||this.installedVer.versionIsValid(this.getAttribute("version"))){var n=(typeof _20=="string")?document.getElementById(_20):_20;n.innerHTML=this.getSWFHTML();return true;}else{if(this.getAttribute("redirectUrl")!=""){document.location.replace(this.getAttribute("redirectUrl"));}}return false;}};deconcept.SWFObjectUtil.getPlayerVersion=function(){var _23=new deconcept.PlayerVersion([0,0,0]);if(navigator.plugins&&navigator.mimeTypes.length){var x=navigator.plugins["Shockwave Flash"];if(x&&x.description){_23=new deconcept.PlayerVersion(x.description.replace(/([a-zA-Z]|\s)+/,"").replace(/(\s+r|\s+b[0-9]+)/,".").split("."));}}else{if(navigator.userAgent&&navigator.userAgent.indexOf("Windows CE")>=0){var axo=1;var _26=3;while(axo){try{_26++;axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+_26);_23=new deconcept.PlayerVersion([_26,0,0]);}catch(e){axo=null;}}}else{try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");}catch(e){try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");_23=new deconcept.PlayerVersion([6,0,21]);axo.AllowScriptAccess="always";}catch(e){if(_23.major==6){return _23;}}try{axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");}catch(e){}}if(axo!=null){_23=new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));}}}return _23;};deconcept.PlayerVersion=function(_29){this.major=_29[0]!=null?parseInt(_29[0]):0;this.minor=_29[1]!=null?parseInt(_29[1]):0;this.rev=_29[2]!=null?parseInt(_29[2]):0;};deconcept.PlayerVersion.prototype.versionIsValid=function(fv){if(this.major<fv.major){return false;}if(this.major>fv.major){return true;}if(this.minor<fv.minor){return false;}if(this.minor>fv.minor){return true;}if(this.rev<fv.rev){return false;}return true;};deconcept.util={getRequestParameter:function(_2b){var q=document.location.search||document.location.hash;if(_2b==null){return q;}if(q){var _2d=q.substring(1).split("&");for(var i=0;i<_2d.length;i++){if(_2d[i].substring(0,_2d[i].indexOf("="))==_2b){return _2d[i].substring((_2d[i].indexOf("=")+1));}}}return "";}};deconcept.SWFObjectUtil.cleanupSWFs=function(){var _2f=document.getElementsByTagName("OBJECT");for(var i=_2f.length-1;i>=0;i--){_2f[i].style.display="none";for(var x in _2f[i]){if(typeof _2f[i][x]=="function"){_2f[i][x]=function(){};}}}};if(deconcept.SWFObject.doPrepUnload){if(!deconcept.unloadSet){deconcept.SWFObjectUtil.prepUnload=function(){__flash_unloadHandler=function(){};__flash_savedUnloadHandler=function(){};window.attachEvent("onunload",deconcept.SWFObjectUtil.cleanupSWFs);};window.attachEvent("onbeforeunload",deconcept.SWFObjectUtil.prepUnload);deconcept.unloadSet=true;}}if(!document.getElementById&&document.all){document.getElementById=function(id){return document.all[id];};}var getQueryParamValue=deconcept.util.getRequestParameter;var FlashObject=deconcept.SWFObject;var SWFObject=deconcept.SWFObject;网页的js:
<script type="text/javascript"> var s1 = new SWFObject("flvplayer.swf","single","500","400","7"); s1.addParam("allowfullscreen","true"); s1.addVariable("vcastr_file","D:\\flv\\flv2\\16.flv"); s1.addVariable("IsAutoPlay",1); s1.addVariable("IsShowBar",1); s1.addVariable("IsContinue",1); s1.write("player1"); </script>对全屏问题需要关注
js: s1.addParam("allowfullscreen","true"); html: <param name="allowFullScreen" value="true" />中的value需要设为true
以上先记录到这里。后续将整理如何将众多视频转换成flv格式。
相关推荐
1. 采用nginx最新版编译,包含最新的nginx-http-flv-module,以及基础模块openssl、prce、zlib 2. 整体打包,已配置好nginx.conf的http-flv直播流,以及http web环境。无需任何配置即可使用 3. 自带windows的服务...
FLV是Adobe Flash Player支持的一种视频格式,过去在网络视频领域非常流行。HTTP-FLV是FLV在HTTP协议上的应用,通过这种方式,服务器可以将实时的视频数据推送给客户端,实现流畅的直播体验。而Nginx则作为服务器端...
这个模块使得Nginx能够处理和分发流媒体内容,特别是对于在线视频直播服务非常有用。由于其基于HTTP协议,用户无需额外的插件或特殊客户端,只需要支持HLS的浏览器即可观看直播内容。 **Windows上的编译与安装** ...
HTTP-FLV模块是Nginx的一个扩展,它允许服务器通过HTTP协议传输FLV(Flash Video)流媒体数据,主要用于实时音视频服务,如在线直播。 描述中提到的操作过程是,用户在命令行(cmd)环境下运行`nginx.exe`,这是...
FLV是一种流行的视频格式,常用于在线视频服务,尤其是与Adobe Flash Player兼容的平台。通过这个模块,Nginx可以接收并分发FLV流,使得视频内容能通过HTTP协议进行实时传输,这对于搭建直播或点播系统非常有用。 ...
nginx-http-flv-module-master.zip 为http-flv做直播推流需要用到的,功能比rtmp-moudle强大。
Clementine系列视频教程--CHAID.flv
Clementine系列视频教程--Apriori.flv
Clementine系列视频教程--quest.flv
Clementine系列视频教程--carma.flv
Nginx 作为一个高性能的 Web 服务器和反向代理服务器,通过添加此模块,可以支持实时流媒体服务,尤其适用于在线视频直播场景。 ### 1. Nginx-FLV-Module 功能 Nginx-FLV-Module 主要提供以下功能: - **FLV 流...
Clementine系列视频教程-Logistic.flv
在windows 7 64位 环境下使用nginx的nginx-http-flv-module搭建flv视频流播放所有的安装包,参考:https://blog.csdn.net/qq_33071429/article/details/102628008
Clementine系列视频教程-chap6-1.flv
15-函数-定义和调用.flv 16-函数-形参实参默认参数.flv 17-函数-变量作用域.flv 18-函数-return-返回值.flv 19-函数-冗余参数.flv 20-函数-lambda-匿名函数.flv 21-Switch实现.flv 26-正则表达式-初识.flv 27-正则...
Clementine系列视频教程--k-means.flv
而HTTP FLV模块(nginx-http-flv-module)则是Nginx支持实时流媒体传输的重要扩展,它使得Nginx能够处理Flash Video(FLV)格式的流媒体数据,提供流畅的视频播放体验。 本文将深入探讨集成`nginx-...
Clementine系列视频教程-PCA-Factor.flv