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

图1

图2：播放窗口

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

页面代码：

<div class="updPic" style="position: relative; z-index: 1;" οnmοuseοver="showDeleteDiv('<s:property value="#st.index+1" />','operaSingleModify');" οnmοuseοut="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"/>' οnclick="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); }