高清展示使用帮助
开发者应用
1. 配置信息
1.1 基本配置
格式: flashvars.xml = XML地址
xml: 配置文件路径。
示例:
<script type="text/javascript" src="http://img.detuyun.cn/flash/qjplayer.js"></script>
<script type="text/javascript" src="http://img.detuyun.cn/flash/hd.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.menu = "false";
params.quality = "high";
params.allowfullscreen = "true";
params.allowScriptAccess = "always";
params.allowNetworking = "all";
params.wmode = "transparent";
//XML地址
flashvars.xml = "http://img.detu.com/bbb/20130416/f1cb6dfd-9282-40b0-851b-5ab5d485a2e2/1/20130712160309996/oper/20130712160309996.xml&";
swfobject.embedSWF( "FlashHDMain.swf", "owhd", "980", "600", "10.1", "expressInstall.swf", flashvars, params);
<script>
效果:
1.2 皮肤
格式: flashvars.skinid = 皮肤ID
skinid: 皮肤ID 参考值 0（一号皮肤） ，1 （二号皮肤），21（二号皮肤右边竖排） ， 121 （二号皮肤左边竖排），-1 （不显示皮肤按钮）
示例:
<script type="text/javascript">
var flashvars = {};
var params = {};
params.menu = "false";
params.quality = "high";
params.allowfullscreen = "true";
params.allowScriptAccess = "always";
params.allowNetworking = "all";
params.wmode = "transparent";
//XML地址
flashvars.xml = "http://img.detu.com/bbb/20130416/f1cb6dfd-9282-40b0-851b-5ab5d485a2e2/1/20130712160309996/oper/20130712160309996.xml&";
flashvars.skinid = 21
swfobject.embedSWF( "FlashHDMain.swf", "owhd", "980", "600", "10.1", "expressInstall.swf", flashvars, params);
<script>
效果:
1.3 水印
格式: shuiyinimg=水印图片地址&x=水印X轴位置&y=水印Y轴位置&isfixed=是否固定
shuiyinimg: 水印图片地址
x: 水印X轴位置
y: 水印Y轴位置
isfixed: 是否固定 如果为0则代表水印跟着图片动，如果为1则水印则固定在播放器上面
示例:
<script type="text/javascript" src="http://img.detuyun.cn/flash/qjplayer.js"></script>
<script type="text/javascript" src="http://img.detuyun.cn/flash/hd.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.menu = "false";
params.quality = "high";
params.allowfullscreen = "true";
params.allowScriptAccess = "always";
params.allowNetworking = "all";
params.wmode = "transparent";
//XML地址
flashvars.xml = "http://img.detu.com/bbb/20130416/f1cb6dfd-9282-40b0-851b-5ab5d485a2e2/1/20130712160309996/oper/20130712160309996.xml&";
flashvars.skinid = 21;
flashvars.shuiyinimg=http://www.detuyun.com/images/fwsc_dtlogo.jpg;
flashvars.x = 300;
flashvars.y = 200;
flashisfixed = 1;
swfobject.embedSWF( "FlashHDMain.swf", "owhd", "980", "600", "10.1", "expressInstall.swf", flashvars, params);
<script>
效果:
1.4 标注
基本热点标注
格式: flashvars.hotxml = 标注配置文档;
hotxml: 标注配置文档
格式:
<?xml version="1.0" encoding="utf-8" ?>
<FlashHD3DView>
<pot id="hot1" img="hd_wz_show.swf" x="1000" y="1000" iszoom="false" data="Title[keyval]你好[attr]Memo[keyval]中中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国国中国[attr]Url[keyval]http://www.baidu.com"/>
<pot id="hot2" img="hd_pic_show.swf" x="1500" y="1500" iszoom="false" data="Title[keyval]你好[attr]Price[keyval]$127.00[attr]Other[keyval]包邮[attr]Img[keyval]http://img02.taobaocdn.com/bao/uploaded/i2/11584022180094434/T1LP9mXuBdXXXXXXXX_!!0-item_pic.jpg_b.jpg[attr]Url[keyval]http://www.baidu.com"/>
</FlashHD3DView>
pot: 节点参数
- id：标注ID值，不能重复 (必填项)
- img：标注显示的多媒体文件，可以是图片以及SWF文件 (必填项)
- x：标注相对于图片的X轴位置 (必填项)
- y：标注相对于图片的X轴位置 (必填项)
- iszoom：标注是否触发定位事件
- data：img节点对应的数据填充参数
- jsfun：点击后响应的JS事件
- enable：是否启用触发鼠标事件
- title：鼠标移上去显示的文字提示
- alpha：透明度
- enable：是否启用触发鼠标事件
- dszoom：放大层级数
带导航热点标注
格式: flashvars.hotxml = 标注配置文档;
hotxml: 标注配置文档
格式:
<?xml version="1.0" encoding="utf-8" ?>
<FlashHD3DView>
<pot id="hot1" img="hd_wz_show.swf" x="1000" y="1000" iszoom="false" data="Title[keyval]你好[attr]Memo[keyval]中中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国国中国[attr]Url[keyval]http://www.baidu.com"/>
<pot id="hot2" img="hd_pic_show.swf" x="1500" y="1500" iszoom="false" data="Title[keyval]你好[attr]Price[keyval]$127.00[attr]Other[keyval]包邮[attr]Img[keyval]http://img02.taobaocdn.com/bao/uploaded/i2/11584022180094434/T1LP9mXuBdXXXXXXXX_!!0-item_pic.jpg_b.jpg[attr]Url[keyval]http://www.baidu.com"/>
<img img="http://baiyunshan1.owyun.com/Images/01.jpg" potid="hot1" order="0" jsfun="alerta" width="80" height="60" />
<img img="http://baiyunshan1.owyun.com/Images/02.jpg" potid="hot2" order="1" jsfun="alerta" width="80" height="60" />
</FlashHD3DView>
img: 节点参数
- img：图片地址 (必填项)
- potid：热点ID (必填项)
- order：排序 (必填项)
- jsfun：点击后响应的JS事件
- width：宽
- height：高
示例:
<script type="text/javascript" src="http://img.detuyun.cn/flash/qjplayer.js"></script>
<script type="text/javascript" src="http://img.detuyun.cn/flash/hd.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.menu = "false";
params.quality = "high";
params.allowfullscreen = "true";
params.allowScriptAccess = "always";
params.allowNetworking = "all";
params.wmode = "transparent";
//XML地址
flashvars.xml = "http://img.detu.com/bbb/20130416/f1cb6dfd-9282-40b0-851b-5ab5d485a2e2/1/20130712160309996/oper/20130712160309996.xml&";
flashvars.hotxml= "HOT地址";
swfobject.embedSWF( "FlashHDMain.swf", "owhd", "980", "600", "10.1", "expressInstall.swf", flashvars, params);
<script>
效果:
2. 页面交互
2.1 创建FLASH对象
<script type="text/javascript" src="http://img.detuyun.cn/flash/qjplayer.js"></script>
<script type="text/javascript" src="http://img.detuyun.cn/flash/hd.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.menu = "false";
params.quality = "high";
params.allowfullscreen = "true";
params.allowScriptAccess = "always";
params.allowNetworking = "all";
params.wmode = "transparent";
//XML地址
flashvars.xml = "http://img.detu.com/bbb/20130416/f1cb6dfd-9282-40b0-851b-5ab5d485a2e2/1/20130712160309996/oper/20130712160309996.xml&";
flashvars.hotxml= "HOT地址";
swfobject.embedSWF( "FlashHDMain.swf", "owhd", "980", "600", "10.1", "expressInstall.swf", flashvars, params);
<script>
FLASH对象获取:var FlashObj = document.getElementById(“owhd”);
2.2 热点定位
格式:document.getElementById(id).jstohotpos(hotid，函数名)
hotid:标注ID
说明:实现FLASH任意标注点的定位效果
演示代码:
<script type="text/javascript">
function jump()
{
document.getElementById("owhd").jstohotpos("hot1",fun());
}
<script>
<input type="button" onclick="jump()" value="跳转到标注点1的位置" />
3. 应用开发
可参考Taobao服务市场调用
得图HD淘宝服务市场:http://fuwu.taobao.com/ser/detail.htm?service_code=FW_GOODS-1865438
3.1 创建FLASH对象
<script type="text/javascript" src="http://img.detuyun.cn/flash/qjplayer.js"></script>
<script type="text/javascript" src="http://img.detuyun.cn/flash/hd.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.menu = "false";
params.quality = "high";
params.allowfullscreen = "true";
params.allowScriptAccess = "always";
params.allowNetworking = "all";
params.wmode = "transparent";
//XML地址
flashvars.xml = "http://img.detu.com/bbb/20130416/f1cb6dfd-9282-40b0-851b-5ab5d485a2e2/1/20130712160309996/oper/20130712160309996.xml&";
flashvars.hotxml= "HOT地址";
swfobject.embedSWF( "FlashHDMain.swf", "owhd", "980", "600", "10.1", "expressInstall.swf", flashvars, params);
<script>
FLASH对象获取:var FlashObj = document.getElementById(“owhd”);
3.2 在高清中展示自己的应用
下面做一个文字链接的应用。 先创建好一个fla文件 点击下载
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import flash.events.MouseEvent;
import flash.system.Security;
public class hdwz extends MovieClip
{
private var _title:String ="";
private var _memo:String="";
private var _url:String="";
public function set Title(value:String):void
{
_title="<b>"+value+"</b>";
}
public function set Memo(value:String):void
{
_memo=value;
}
public function set Url(value:String):void
{
_url = value;
}
public function hdwz():void
{
flash.system.Security.allowDomain("*");
if (stage) stageReady();
else addEventListener(Event.ADDED_TO_STAGE, stageReady, false, 0, true);
}
public function stageReady(e:Event=null):void
{
this.b.visible=false;
this.a.addEventListener(MouseEvent.MOUSE_OVER,mouseoverhandler);
this.alink.addEventListener(MouseEvent.MOUSE_OVER,mouseoverhandler);
this.b.cls.addEventListener(MouseEvent.CLICK,mouseclickhandler);
this.b.__url.visible=false;
this.b.__url.addEventListener(MouseEvent.CLICK,openurl);
this.b.addEventListener(MouseEvent.ROLL_OUT,mouseouthandler);
this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
}
private function mouseouthandler(e:MouseEvent):void
{
this.b.visible=false;
}
private function openurl(e:MouseEvent):void
{
if(this._url != "")
{
flash.net.navigateToURL(new URLRequest(this._url),"_blank");
}
}
function mouseoverhandler(e:MouseEvent)
{
this.b.visible=true;
}
function mouseclickhandler(e:MouseEvent)
{
this.b.visible=false;
}
private function enterFrameHandler(e:Event)
{
this.b.__name.htmlText=_title;
this.b.__memo.htmlText=_memo;
this.b.__memo.height = this.b.__memo.textHeight;
this.b.bgc.height = this.b.__memo.height + 40 ;
trace(this._url);
if(this._url != "")
{
this.b.bgc.height =this.b.bgc.height + 30;
this.b.__url.y = this.b.bgc.height - 30;
this.b.__url.alpha = 100;
this.b.__url.visible=true;
this.a.visible=false;
this.alink.visible=true;
}
else
{
this.a.visible=true;
this.alink.visible=false;
}
if(this.b.bgc.height > 300)
{
this.b.bgc.height = 300;
}
if(this.b.bgc.height < 120)
{
this.b.bgc.height = 120;
}
}
}
}
以下属性接口。供hotxml中的data节点调用。上例中有如下属性。
public function set Title(value:String):void
public function set Memo(value:String):void
public function set Url(value:String):void
则对应的xml配置data节点如下
<pot id="hot6" img="hd_wz_show.swf" x="1000" y="1000" iszoom="false" data="Title[keyval]你好[attr]Memo[keyval]中国[attr]Url[keyval]http://www.baidu.com"/>3.3 在高清上开发自己的应用
第一步。启用热点标注
格式:FlashObj.sethotisedit(status,param)
status:为1则启用热点标注，为0就关闭热点标注
param:附加参数（任意字符串）
说明:启用标注成功后，点击高清播放器任意位置，将会响应Flashhoteditcallback函数，返回值为x 标注的x位置,y 标注的y位置,param之前传入的参数
演示代码:
<div class="potpop" id="pop2" style="display:none">
<div class="ptab">
<span class="on" >链接</span>
</div>
<div class="pcon">
<p class="line"><span class="ta" >URL</span><input type="text" id="link_url" class="ipt-a" /></p>
<p class="line"><span class="ta" >标题</span><input type="text" id="link_title" class="ipt-a" /></p>
<p class="line"><span class="ta" >描述</span><textarea id="link_memo" rows="" cols=""></textarea></p>
</div>
<div class="paction"><a href="#" class="confirm" id="link_confirm">确定</a><a href="#" class="cancel">取消</a></div>
</div>
<script type="text/javascript">
var locx;
var locy;
function jump()
{
FlashObj.sethotisedit(1,"pop2");
}
function Flashhoteditcallback(x,y,param)
{
locx = x;
locy = y;
$("#"+id).show();
}
<script>
<input type="button" onclick="jump()" value="链接标注"/>
第二步。保存标注的提交内容
保存数据到远程，并重新加载配置
$("#link_confirm").click(
function(){
var link_url = $("#link_url").val();
var link_title = $("#link_title").val();
var link_memo = $("#link_memo").val();
$.ajax({
url: '/save',
data: 'x='+locx+'&y='+locy+'&link_url="+encodeURIComponent(link_url)+"&link_title="+encodeURIComponent(link_title)+"&link_memo="+encodeURIComponent(link_memo),
type: 'post',
success: function (result) {
var jsonobj = eval("("+result+")");
if(jsonobj.code != 0)
{
alert("保存失败");
return;
}
$("#pop2").hide();
//重新加载标注配置文件
document.getElementById("OuWeiHDPlayer").sethotxml(jsonobj.hotxml);
alert("保存成功");
}
});
}
);
远程代码
$link_url = $this->input->post("link_url");
$x = $this->input->post("x");
$y = $this->input->post("y");
$link_title = $this->input->post("link_title");
$link_memo = $this->input->post("link_memo");
$hotidarr =array();
$arr=array();
$arr["Title"] = $link_title;
$arr["Memo"] = $link_memo;
$arr["Url"] = $link_url;
$hotidarr["swf"] = "http://www.xx.com/appswf/hdwz.swf";
$hotidarr["x"] = $x;
$hotidarr["y"] = $y;
$hotidarr["id"] = time();
$hotid = $hotidarr["id"];
$swf = $hotidarr["swf"];
$x = $hotidarr["x"];
$y = $hotidarr["y"];
$data="";
foreach($arr as $datakey=>$dataval)
{
$data.=$datakey."[keyval]".$dataval."[attr]";
}
$str .='
<pot id="'.$hotid.'" img="'.$swf.'" x="'.$x.'" y="'.$y.'" iszoom="false" data="'.$data.'" />
';
//写文件
$hotfilexml = '<?xml version="1.0" encoding="utf-8" ?>
<FlashHD3DView>
'.$str.'
</FlashHD3DView>
';
$hdhotfilexml ="/var/www/flash/app/hot".$hotidarr["id"].".xml";
if($hdhotfilexml != "")
{
if(file_exists($hdhotfilexml))
{
@unlink($hdhotfilexml);
}
$hotfp=@fopen($hdhotfilexml,'a');
fwrite($hotfp, $hotfilexml);
fclose($hotfp);
}
echo json_encode(array("code"=>0,"hotxml"=>$hotxml,"hotarr"=>$hotarr));
exit;