ckplayer 网页视频播放

最近做文件上传，可以上传的资源有图片，也有视频，在显示列表中点击视频播放图片（图1），需要弹出播放窗口（图2），播放视频。具体效果画面如下：

图1

图2：播放窗口

实现该功能使用的是ckplayer播放器结合HTML5.参考示例是从网上下载的"ckplayer6.3精简版3.rar"，相关文件如下

页面代码：

<div class="updPic" style="position: relative; z-index: 1;"
onmouseover="showDeleteDiv('<s:property value="#st.index+1" />','operaSingleModify');"
onmouseout="imgOnmouseout(),hideDeleteDiv('<s:property value="#st.index+1" />','operaSingleModify');">
<a srcImg="<s:property value="adResourcePathDsp"/>"
resourcePro='<s:property value="adResourceProduct" />'
resourceTips='<s:property value="adResourceTips"/>'
onclick="openVedioDiv(this,'<%=Constant.AD_RESOURCE_POSITION_SIGN_SINGLE%>');">
 <img
idNo="<s:property value="#st.index+1" />"
class="resourceImgSingle" src='<s:property value="adResourceThumbnailPathDsp"/>'>
</a>
</div>

//打开视频播放器
function openVedioDiv(obj, adType) {

// 点击图片非按钮区域
if (!divFlag) {

...

loadVedio(srcImg,vedioWidth,vedioHeight);

}

sysTitleSetting("xxx");
}

function loadVedio(vedioPath,vedioWidth,vedioHeight) {

//添加视频播放器的div
$("<div id='a1'></div>").appendTo($("#video"));

var flashvars = {
// f:'1.flv',
// f:'yapeinaifen.mp4',
// f:'vedio001.3gp',
f : vedioPath,
// f:'C:/Documents and Settings/003383/桌面/Test/yapeinaifen.mp4',
c : 0,
b : 1,
p : 1
};

var params = {
bgcolor : '#FFF',
allowFullScreen : true,
allowScriptAccess : 'always'
};

CKobject.embedSWF('ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1',
vedioWidth, vedioHeight, flashvars, params);
/*
CKobject.embedSWF(播放器路径,容器id,播放器id/name,播放器宽,播放器高,flashvars的值,其它定义也可省略);
下面三行是调用html5播放器用到的
*/

var video = [ vedioPath + '->video/mp4' ];
var support = [ 'iPad', 'iPhone', 'ios', 'android+false',
'msie10+false', 'webKit' ];

CKobject.embedHTML5('video', 'ckplayer_a1', vedioWidth, vedioHeight, video,
flashvars, support);
}