- 关闭
- 刷新
- 关闭其他
- 关闭全部
ckplayer 解决flash全屏遮住了div元素，重写全屏/退出全屏方法
出现这种情况的原因：
object标签不在dom文档流里面，浏览器在解析的时候先把object放置在最上层，然后依次解析dom文档，放在下层，并且在这里使用z-index是无效的。
网上找了很多办法，比如：
1、设置Flash置底，加句代码 ： ，但此代码只能在IE下生效，还要在 ，才能让Firefox等生效，完整代码如下：
2、在div中加入iframe，div为需显示的div，被object遮挡，于是在该div中增加一个iframe，通过iframe来遮挡Object控件标签。因为iframe的级别高于Objec标签，而又由于div能够遮挡iframe，所以可以通过在div中加入iframe来解决该类问题，代码如下：
这些我都试了，但是对于我这个flash全屏遮住了div元素还是无济于事，于是我就去翻看ckplayer的官方文档
，终于找到了一种解决办法：重写flash全屏/退出全屏方法，不让flash全屏，但是可以让flash和div的父级元素全屏（这里flash和div是兄弟元素），可以先去看看这个：
自定义元件的说明以及安装方法
JSAPI控制函数列表
AS3API控制函数列表
下面说说具体怎么修改：
1、修改ckplayer的style.xml文件
（1）、将
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzM2NTJFNUFBMDJGMTFFN0JDQThFMDQ4QzEzNjgyQTkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzM2NTJFNTlBMDJGMTFFN0JDQThFMDQ4QzEzNjgyQTkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTlCMDU4MDJBMDI5MTFFN0FDM0ZGQjgzREVGRDIwNkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTlCMDU4MDNBMDI5MTFFN0FDM0ZGQjgzREVGRDIwNkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4PCYscAAAAYElEQVR42uzVawoAEBBGUSMLnQXb02cLZOR1lX/SyQ3Z3aukdOLM6eABDhw4cK/jyoI91bHGyHpbVpvITVZw4KJuq0Yf0on1ZAUHLupvVdStJOvurMbJgQMHDtwnuCbAAGDod9PwVjbHAAAAAElFTkSuQmCC
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkM5NUMxNTc0QTAyRjExRTc5OEJCQTJCQkE3OUZDQUI0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkM5NUMxNTc1QTAyRjExRTc5OEJCQTJCQkE3OUZDQUI0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Qzk1QzE1NzJBMDJGMTFFNzk4QkJBMkJCQTc5RkNBQjQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Qzk1QzE1NzNBMDJGMTFFNzk4QkJBMkJCQTc5RkNBQjQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6VU2BrAAAAgElEQVR42uzWMQqAMAyF4UQEQS/Zi9TB83kdQad0dSltRTSUP9AtwwePRyohhN3MxOMbxPGAAwcOXO+4sWVZVYs703ZYaeeMsxKrm1hr5loXfRo3sYID91Zb743LtbKqxdGIFRy4z25r7la2tphYf4+16gcbjbaCAwcOXA+4JMAABRiJylOFUlkAAAAASUVORK5CYII=
right
top
-39
50
actionScript->fullScreen
（2）、将
2、修改ckplayer的language.xml文件，在
点击播放
暂停播放
静音
恢复音量
全屏
退出全屏
点击全屏
退出全屏
上一集
下一集
点击选择清晰度
3、html页面新增如下函数：
/**
* 全屏和退出全屏函数
*/
function playFull(){
if(player.full){
exitFullscreen();
}else{
var full=player.CD.parentNode;
launchIntoFullscreen(full);
}
}
/**
* 获取视频对象
* @param movieName
*/
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
/**
* 全屏
* @param element
*/
function launchIntoFullscreen(element) {
if(element.requestFullscreen){
element.requestFullscreen();
}
else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
/**
* 退出全屏
*/
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
/**
* 判断是否全屏
*/
function playIsFull(){
//flash播放器
if(player.playerType=='flashplayer'){
var fullState = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement;
if(fullState==undefined){
player.full = false;
//显示全屏按钮
thisMovie(player.V.getAttribute("id")).custom('controlBar','button','playFull',true);
//隐藏退出全屏按钮
thisMovie(player.V.getAttribute("id")).custom('controlBar','button','playEscFull',false);
}else{
player.full = true;
//隐藏全屏按钮
thisMovie(player.V.getAttribute("id")).custom('controlBar','button','playFull',false);
//显示退出全屏按钮
thisMovie(player.V.getAttribute("id")).custom('controlBar','button','playEscFull',true);
}
//h5播放器
}else{
player.isFullScreen();
}
}
/**
* 页面加载完成
*/
$(function(){
//窗口大小改变事件
window.onresize = function() {
playIsFull();
}
});
4、在ckplayer的loadedHandler中加入函数playIsFull()，如下：
/**
* 加载完成监听
*/
function loadedHandler() {
playIsFull();
}
上面配置完成就可以了，完整代码如下：
ckplayer
截图
快退
快进
全屏效果如下：
