最近视频网站竞争比较激烈,相传youku/tudou都已经开始IPO,再加上早有ku6借壳上市,创业版更是出现了乐视这样的成功案例,可谓风生水起,所以特别制作一版开放换肤功能的视频播放器,特别加入了支持iphone/ipad/ipod等苹果设备的解决方案,这下可暂时解决apple与adobe之前的战争引起广大网友的不便。
小试牛刀,记录一下此视频播放器开放的功能:
1. 支持任意点播放视频,需要服务器端支持?start=xxx这种url格式,不然不能正常使用此功能
2. 支持视频结束相关视频显示,配置文件为:视频文件名_more.xml文件格式
3. 支持进度条区域信息地雷显示提示,配置文件为:视频文件名_infopoint.xml文件格式
4. 支持外挂swf皮肤文件,通过重新修改swf皮肤文件即可换肤
5. 通过js+html5达到支持苹果设备(iphone/ipad/ipod)的播放
6. 其它常用功能不再一一赘述,希望很快拿来去使用的朋友直接看下面示例
测试地址:http://www.gouxy.com/
说明:
首先,利用html5代码,来支持苹果设备的safari浏览器,代码如下:
<video id='videoIpad' controls='controls' autoplay='autoplay' width='482' height='390' />
其次,通过js检测支持的设备是否为苹果设备,代码如下:
var testAppleMobile = /\((iPhone|iPad|iPod)/i;
if(!testAppleMobile.test(navigator.userAgent)){
//如果没有匹配中苹果设备可以调用flash播放器支持
}
最后通过swf?flv=xxx.flv或者swf?mp4=xxx.mp4这样的方法来传递视频地址,播放器就会很好的播放了
关于相关视频显示:(视频名_more.xml)
http://www.gouxy.com/waka_more.xml
<?xml version="1.0" encoding="utf-8"?>
<info>
<myitem>
<src>http://img.v48.56.com/images/4/24/zhibo8cni56olo56i56.com_127966760756hd.jpg</src>
<title>上面是本视频图片,此处可不用填写</title>
<url>http://www.hexun.com</url>
</myitem>
<item>
<src>http://img.v197.56.com/images/14/7/zhibo8cni56olo56i56.com_127976067295hd.jpg</src>
<title>北京国安2队新加坡引发群殴 50人大乱斗多人挂彩</title>
<url>http://www.sohu.com</url>
</item>
<item>
<src>http://img.v48.56.com/images/25/18/basailuona2i56olo56i56.com_128031171927hd.jpg</src>
<title>菲警方首度承认警察可能开枪射杀香港游客</title>
<url>http://www.sina.com</url>
</item>
</info>
关于信息地雷提示(视频名_infopoint.xml):
http://www.gouxy.com/waka_infopoint.xml
<?xml version="1.0" encoding="utf-8"?>
<info>
<item>
<title>大家好这是标题1111!!</title>
<t>3:51</t>
</item>
<item>
<title>大家好这是标题2222!!</title>
<t>8:51</t>
</item>
<item>
<title>大家好这是标题3333!!</title>
<t>9:56</t>
</item>
</info>
关于换肤:
http://www.gouxy.com/skin/SkinOpen.fla(可修改此文件达到目的)
http://www.gouxy.com/skin/SkinOpen.as(这是一个为fla准备的配置文件,可以调配一些简单的配置)
SkinOpen.as的主要内容:
//设置视频显示坐标x,y相对于舞台
conf["videobox"]={x:2,y:3};
//x控制面板相对于舞台 h控制台高度
conf["control"]={x:2,h:41};
//时间面板显示的时间颜色
conf["timepanel"]={textcolor:"0x656565"};
//x,y相对于控制面板背景
conf["progress"]={x:5,y:5};
//v音量大小百分比
conf["setpanel"]={v:0.5};
//setcolorduration色彩饱和度值,一般不做修改
conf["other"]={setcolorduration:200};
//播放器所在路径用于复制flash链接
conf["flashurl"]={url:"http://www.gouxy.com/main.swf"};
小试牛刀,记录一下此视频播放器开放的功能:
1. 支持任意点播放视频,需要服务器端支持?start=xxx这种url格式,不然不能正常使用此功能
2. 支持视频结束相关视频显示,配置文件为:视频文件名_more.xml文件格式
3. 支持进度条区域信息地雷显示提示,配置文件为:视频文件名_infopoint.xml文件格式
4. 支持外挂swf皮肤文件,通过重新修改swf皮肤文件即可换肤
5. 通过js+html5达到支持苹果设备(iphone/ipad/ipod)的播放
6. 其它常用功能不再一一赘述,希望很快拿来去使用的朋友直接看下面示例
测试地址:http://www.gouxy.com/
说明:
首先,利用html5代码,来支持苹果设备的safari浏览器,代码如下:
<video id='videoIpad' controls='controls' autoplay='autoplay' width='482' height='390' />
其次,通过js检测支持的设备是否为苹果设备,代码如下:
var testAppleMobile = /\((iPhone|iPad|iPod)/i;
if(!testAppleMobile.test(navigator.userAgent)){
//如果没有匹配中苹果设备可以调用flash播放器支持
}
最后通过swf?flv=xxx.flv或者swf?mp4=xxx.mp4这样的方法来传递视频地址,播放器就会很好的播放了
关于相关视频显示:(视频名_more.xml)
http://www.gouxy.com/waka_more.xml
<?xml version="1.0" encoding="utf-8"?>
<info>
<myitem>
<src>http://img.v48.56.com/images/4/24/zhibo8cni56olo56i56.com_127966760756hd.jpg</src>
<title>上面是本视频图片,此处可不用填写</title>
<url>http://www.hexun.com</url>
</myitem>
<item>
<src>http://img.v197.56.com/images/14/7/zhibo8cni56olo56i56.com_127976067295hd.jpg</src>
<title>北京国安2队新加坡引发群殴 50人大乱斗多人挂彩</title>
<url>http://www.sohu.com</url>
</item>
<item>
<src>http://img.v48.56.com/images/25/18/basailuona2i56olo56i56.com_128031171927hd.jpg</src>
<title>菲警方首度承认警察可能开枪射杀香港游客</title>
<url>http://www.sina.com</url>
</item>
</info>
关于信息地雷提示(视频名_infopoint.xml):
http://www.gouxy.com/waka_infopoint.xml
<?xml version="1.0" encoding="utf-8"?>
<info>
<item>
<title>大家好这是标题1111!!</title>
<t>3:51</t>
</item>
<item>
<title>大家好这是标题2222!!</title>
<t>8:51</t>
</item>
<item>
<title>大家好这是标题3333!!</title>
<t>9:56</t>
</item>
</info>
关于换肤:
http://www.gouxy.com/skin/SkinOpen.fla(可修改此文件达到目的)
http://www.gouxy.com/skin/SkinOpen.as(这是一个为fla准备的配置文件,可以调配一些简单的配置)
SkinOpen.as的主要内容:
//设置视频显示坐标x,y相对于舞台
conf["videobox"]={x:2,y:3};
//x控制面板相对于舞台 h控制台高度
conf["control"]={x:2,h:41};
//时间面板显示的时间颜色
conf["timepanel"]={textcolor:"0x656565"};
//x,y相对于控制面板背景
conf["progress"]={x:5,y:5};
//v音量大小百分比
conf["setpanel"]={v:0.5};
//setcolorduration色彩饱和度值,一般不做修改
conf["other"]={setcolorduration:200};
//播放器所在路径用于复制flash链接
conf["flashurl"]={url:"http://www.gouxy.com/main.swf"};