ckplayer 解决flash全屏遮住了div元素，重写全屏/退出全屏方法

最新推荐文章于 2022-12-07 14:15:47 发布
最新推荐文章于 2022-12-07 14:15:47 发布
阅读量3.7k 收藏 2
点赞数 1
分类专栏： 前端技术 文章标签： ckplayer flash遮住了div object遮住了div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaTianCsDN/article/details/97236633
版权
出现这种情况的原因：

object标签不在dom文档流里面，浏览器在解析的时候先把object放置在最上层，然后依次解析dom文档，放在下层，并且在这里使用z-index是无效的。

网上找了很多办法，比如：

1、设置Flash置底，加句代码 ：<param name="wmode" value="opaque" /> ，但此代码只能在IE下生效，还要在 <embed > 标签里添加 wmode="opaque"，才能让Firefox等生效，完整代码如下：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=" width="600″ height="248″>
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="test.swf">
<param name="quality" value="high">
<param name="wmode" value="Opaque">
<embed src="test.swf" wmode="Opaque" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600″ height="248″></embed>
</object>

2、在div中加入iframe，div为需显示的div，被object遮挡，于是在该div中增加一个iframe，通过iframe来遮挡Object控件标签。因为iframe的级别高于Objec标签，而又由于div能够遮挡iframe，所以可以通过在div中加入iframe来解决该类问题，代码如下：

<div id="main" style="width: 120px; height:120px;display: none; top: 26px; left: 300px;z-index:999999">
    <ul>
        <li>关闭</li>
        <li>刷新</li>
        <li>关闭其他</li>
        <li>关闭全部</li>
    </ul>
    <iframe id="iframe" src="about:blank" frameBorder="0" marginHeight="0" marginWidth="0" style="position:absolute; visibility:inherit; top:0px;left:0px;width:120px; height:120px;z-index:-1; filter:alpha(opacity=0);"></iframe>
</div>

这些我都试了，但是对于我这个flash全屏遮住了div元素还是无济于事，于是我就去翻看ckplayer的官方文档
，终于找到了一种解决办法：重写flash全屏/退出全屏方法，不让flash全屏，但是可以让flash和div的父级元素全屏（这里flash和div是兄弟元素），可以先去看看这个：

自定义元件的说明以及安装方法
JSAPI控制函数列表
AS3API控制函数列表

下面说说具体怎么修改：

1、修改ckplayer的style.xml文件

（1）、将<full>按钮的offsetY设置为50，这个不能删除，删除之后播放器样式就变了，所以我向下移动了50个像素，不显示出来就行了，如下：

<full><!--全屏按钮-->
	<mouseOut>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzM2NTJFNUFBMDJGMTFFN0JDQThFMDQ4QzEzNjgyQTkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzM2NTJFNTlBMDJGMTFFN0JDQThFMDQ4QzEzNjgyQTkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTlCMDU4MDJBMDI5MTFFN0FDM0ZGQjgzREVGRDIwNkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTlCMDU4MDNBMDI5MTFFN0FDM0ZGQjgzREVGRDIwNkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4PCYscAAAAYElEQVR42uzVawoAEBBGUSMLnQXb02cLZOR1lX/SyQ3Z3aukdOLM6eABDhw4cK/jyoI91bHGyHpbVpvITVZw4KJuq0Yf0on1ZAUHLupvVdStJOvurMbJgQMHDtwnuCbAAGDod9PwVjbHAAAAAElFTkSuQmCC</mouseOut>
	<mouseOver>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkM5NUMxNTc0QTAyRjExRTc5OEJCQTJCQkE3OUZDQUI0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkM5NUMxNTc1QTAyRjExRTc5OEJCQTJCQkE3OUZDQUI0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Qzk1QzE1NzJBMDJGMTFFNzk4QkJBMkJCQTc5RkNBQjQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Qzk1QzE1NzNBMDJGMTFFNzk4QkJBMkJCQTc5RkNBQjQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6VU2BrAAAAgElEQVR42uzWMQqAMAyF4UQEQS/Zi9TB83kdQad0dSltRTSUP9AtwwePRyohhN3MxOMbxPGAAwcOXO+4sWVZVYs703ZYaeeMsxKrm1hr5loXfRo3sYID91Zb743LtbKqxdGIFRy4z25r7la2tphYf4+16gcbjbaCAwcOXA+4JMAABRiJylOFUlkAAAAASUVORK5CYII=</mouseOver>
	<align>right</align>
	<vAlign>top</vAlign>
	<offsetX>-39</offsetX>
	<offsetY>50</offsetY>
	<clickEvent>actionScript->fullScreen</clickEvent>
</full>

（2）、将<full>按钮和<escFull>按钮复制到<custom>下<button>里面，修改full为playFull，escFull修改为playEscFull（这里的playFull和playEscFull可以随便命名，只有和style.xml中其他按钮名称不重复就行），代码如下：

<!--自定义控制栏图片按钮、普通图片、swf插件，该部分是用来补充控制栏的-->
<custom>
	<button>
		<playFull><!--全屏按钮-->
			<mouseOut>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzM2NTJFNUFBMDJGMTFFN0JDQThFMDQ4QzEzNjgyQTkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzM2NTJFNTlBMDJGMTFFN0JDQThFMDQ4QzEzNjgyQTkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTlCMDU4MDJBMDI5MTFFN0FDM0ZGQjgzREVGRDIwNkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTlCMDU4MDNBMDI5MTFFN0FDM0ZGQjgzREVGRDIwNkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4PCYscAAAAYElEQVR42uzVawoAEBBGUSMLnQXb02cLZOR1lX/SyQ3Z3aukdOLM6eABDhw4cK/jyoI91bHGyHpbVpvITVZw4KJuq0Yf0on1ZAUHLupvVdStJOvurMbJgQMHDtwnuCbAAGDod9PwVjbHAAAAAElFTkSuQmCC</mouseOut>
			<mouseOver>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkM5NUMxNTc0QTAyRjExRTc5OEJCQTJCQkE3OUZDQUI0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkM5NUMxNTc1QTAyRjExRTc5OEJCQTJCQkE3OUZDQUI0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Qzk1QzE1NzJBMDJGMTFFNzk4QkJBMkJCQTc5RkNBQjQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Qzk1QzE1NzNBMDJGMTFFNzk4QkJBMkJCQTc5RkNBQjQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6VU2BrAAAAgElEQVR42uzWMQqAMAyF4UQEQS/Zi9TB83kdQad0dSltRTSUP9AtwwePRyohhN3MxOMbxPGAAwcOXO+4sWVZVYs703ZYaeeMsxKrm1hr5loXfRo3sYID91Zb743LtbKqxdGIFRy4z25r7la2tphYf4+16gcbjbaCAwcOXA+4JMAABRiJylOFUlkAAAAASUVORK5CYII=</mouseOver>
			<align>right</align>
			<vAlign>top</vAlign>
			<offsetX>-39</offsetX>
			<offsetY>0</offsetY>
			<!-- 修改为调用js函数 -->
			<clickEvent>javaScript->playFull()</clickEvent>
		</playFull>
		<playEscFull><!--退出全屏按钮-->
			<mouseOut>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0Y1QTFEQjFBMDJGMTFFNzhGNDlCQzBGRTNFMzU4MTgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0Y1QTFEQjBBMDJGMTFFNzhGNDlCQzBGRTNFMzU4MTgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUNFQTA3QTdBMDJBMTFFNzhGQjVERTJENkRGNzVBNUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUNFQTA3QThBMDJBMTFFNzhGQjVERTJENkRGNzVBNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6QKzdpAAAAZ0lEQVR42uyVQQrAIAwEs9KH5sH9U7z2IthWZQ+zIHiSIZPFlpl3VYXjaWEc4IADDrgFuTa9W4+70AoccMZtHTU33rQYrW5axeQmFnv5xCjESa36oRutwAHn8H0JrcABBxxw39IFGAB4NnfVPPbHuQAAAABJRU5ErkJggg==</mouseOut>
			<mouseOver>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQ2Q0E2MkI2QTAyRjExRTdBNzUyRkE2RTM2RDhCMUFFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQ2Q0E2MkI3QTAyRjExRTdBNzUyRkE2RTM2RDhCMUFFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDZDQTYyQjRBMDJGMTFFN0E3NTJGQTZFMzZEOEIxQUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RDZDQTYyQjVBMDJGMTFFN0E3NTJGQTZFMzZEOEIxQUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65w8bRAAAAjUlEQVR42mJISEg48///f4bBiJkYBjEYddyo40YdN+o4KgAWYhUyMjISbSh709f/MPbPOm6sGkGF7Gi0jjpu1HG0yK3kAuSci14AjEbrkIpWXAUvCqj9P0JCDk/CJi3ERsu5wRStuKKMmOgejdZRx406jp65FU+bn5GUKmk0WkcdN+q4UceNOg4BAAIMAKDujMj+NDDVAAAAAElFTkSuQmCC</mouseOver>
			<align>right</align>
			<vAlign>top</vAlign>
			<offsetX>-39</offsetX>
			<offsetY>0</offsetY>
			<!-- 修改为调用js函数 -->
			<clickEvent>javaScript->playFull()</clickEvent>
		</playEscFull>
	</button>
</custom>

2、修改ckplayer的language.xml文件，在<buttonOver>中为上面自定义的元件playFull和playEscFull添加鼠标访问提示文字，如下：

<buttonOver>
	<play>点击播放</play>
	<pause>暂停播放</pause>
	<mute>静音</mute>
	<escMute>恢复音量</escMute>
	<full>全屏</full>
	<escFull>退出全屏</escFull>
	<playFull>点击全屏</playFull>
	<playEscFull>退出全屏</playEscFull>
	<previousPage>上一集</previousPage>
	<nextPage>下一集</nextPage>
	<definition>点击选择清晰度</definition>
</buttonOver>

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();
}

上面配置完成就可以了，完整代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>ckplayer</title>
		<script type="text/javascript" src="/control/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../ckplayer/ckplayer.js" charset="UTF-8"></script>
		<script src="/control/ckplayer/ckplayer/tripledes.js"></script>
		<script src="/control/ckplayer/ckplayer/mode-ecb-min.js"></script>
		<script src="/control/ckplayer/tools.js"></script>
		<style type="text/css">
			body { margin: 0; padding: 0px; font-family: "Microsoft YaHei", YaHei, "微软雅黑", SimHei, "黑体"; font-size: 14px; }
			.btn{ padding: 2px 10px 3px 10px; background: #1E9FFF !important; margin: 5px; color: #fff; cursor: pointer; border-radius: 4px; display: inline-block; }
			.btn select{ border: 0; background: #1E9FFF; color: #fff; }
		</style>
		<script type="text/javascript">

			var flv=null,map4=null;
			mp4 = "http://localhost:8081/oceans.mp4";
			flv = "CK:xaCpPeRGLpUHNeFeK5EtXYWcxUvZDJI3/FTF8jfOjxvf9eD8BAnoPQ==";
			var videoObject = {
				playerID:'ckplayer01',//播放器ID，第一个字符不能是数字，用来在使用多个播放器时监听到的函数将在所有参数最后添加一个参数用来获取播放器的内容
				container: '#playWindow', //容器的ID或className
				variable: 'player', //播放函数名称
				loaded: 'loadedHandler', //当播放器加载后执行的函数
				autoplay: true, //是否自动播放
				//playbackrate: 1,  //html5环境中视频默认播放速度编号
				//crossdomain:'http://192.168.1.110:8080/crossdomain.xml',  //flash环境指定跨域策略文件地址，比如跨域截图时需要
				//crossorigin:'Anonymous',  //在html5环境中跨域截图需要
			};
			if(flv!=null){
				videoObject.video=flv;
			}else if(mp4!=null){
				videoObject.video=[[mp4, 'video/mp4', 0]];
			}

			var player;
			$(function(){
				//窗口大小改变事件
				window.onresize = function() {
					playIsFull();
				}
				player = new ckplayer(videoObject);
				$("#videoChange").change(function(){
					 if($(this).val()==='0'){
						if(flv!=null){
							videoObject.video=flv;
							player = new ckplayer(videoObject);
						}
					}else{
						if(mp4!=null){
							videoObject.video=mp4;
							player = new ckplayer(videoObject);
						}
					}
				});
			});

			/**
			 * 判断是否全屏
			 */
			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 loadedHandler() {
				playIsFull();
				player.addListener('ended', endedHandler); //监听播放结束
				player.addListener('screenshot', screenshotHandler); //监听截图功能
				var obj = {
					list: [{
						type: 'text',
						text: "666666",
						color: '#FFFFFF',
						size: 16,
						font: player.fontFamily,
						lineHeight: 30
					}],
					position: [1, 2, null, -(1 - i) * 30 - 50]
				};
				var ele = player.addElement(obj);
				player.trackElement.push(ele);
			}

			/**
			 * 全屏和退出全屏函数
			 */
			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 endedHandler() {
                player.videoSeek(0);
                //设置一定延迟才能暂停
                setTimeout(function () {
                    player.videoPause();
                },200);
			}

			/**
			 * 截图监听
			 * @param obj
			 */
			function screenshotHandler(obj) {
				console.log(obj);
				$("#img").html("<img src='"+obj['base64']+"' />");
				downloadFile('视频截图' + dateFtt('yyyyMMddhhmmss',new Date())+'.png', obj['base64']);
			}

			/**
			 * 快进
			 */
			function videoForward () {
				player.fastNext();
			}

			/**
			 * 快退
			 */
			function videoRewind () {
				player.fastBack();
			}

			/**
			 * 下载文件
			 * @param fileName
			 * @param content
			 */
		    function downloadFile(fileName, content) {
		        var aLink = document.createElement('a');
		        var blob = this.base64ToBlob(content); //new Blob([content]);

		        var evt = document.createEvent("HTMLEvents");
		        evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
		        aLink.download = fileName;
		        aLink.href = URL.createObjectURL(blob);

		        // aLink.dispatchEvent(evt);
		        aLink.click()
		    }

			/**
			 * base64转blob
			 * @param code
			 * @returns {Blob}
			 */
			function base64ToBlob(code) {
		        var parts = code.split(';base64,');
		        var contentType = parts[0].split(':')[1];
		        var raw = window.atob(parts[1]);
		        var rawLength = raw.length;

		        var uInt8Array = new Uint8Array(rawLength);

		        for (var i = 0; i < rawLength; ++i) {
		          uInt8Array[i] = raw.charCodeAt(i);
		        }
		        return new Blob([uInt8Array], {type: contentType});
		    }

			/**
			 * 日期格式化处理
			 * @param fmt
			 * @param date
			 * @returns {*}
			 */
		    function dateFtt(fmt,date){ //author: meizz   
		        var o = {   
		        	"M+" : date.getMonth()+1,                 //月份   
		        	"d+" : date.getDate(),                    //日   
		        	"h+" : date.getHours(),                   //小时   
		        	"m+" : date.getMinutes(),                 //分   
		        	"s+" : date.getSeconds(),                 //秒   
		        	"q+" : Math.floor((date.getMonth()+3)/3), //季度   
		         	"S"  : date.getMilliseconds()             //毫秒   
		        };   
		        if(/(y+)/.test(fmt))   
		        fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));   
		        for(var k in o)   
		        if(new RegExp("("+ k +")").test(fmt))   
		        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
		        return fmt;   
		    }

		</script>
	</head>

	<body>
		<div style="width: 600px; height: 400px;max-width: 600px; margin: 20px 0 0 20px;">
			<div style="width: 100%; height: 100%; position: relative;">
				<div id="playWindow" style="width: 100%; height: 100%;"></div>
				<div style="width: 100%; position: absolute ; top:0; z-index: 999999999">
					<span class="btn" onclick="player.screenshot('video',true,'视频截图')" style="background: #4F1B60" >截图</span>
					<span class="btn" onclick="videoRewind()">快退</span>
					<span class="btn" onclick="videoForward()">快进</span>
					<span class="btn"><select id="videoChange"><option value="0">Flv</option><option value="1">原文件</option></select></span>
				</div>
			</div>
		</div>
	</body>

</html>

全屏效果如下：
在这里插入图片描述

xiaTianCsDN
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dplayer js控制 自动全屏_修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题...
weixin_29526767的博客
12-23 2349
最近项目需要播放视频且限制未观看部分的快进功能，找了两款js插件ckplayer和jwplayer，由于ckplayer是国内大牛开发的，中文文档比较官方，而且主要是文档说可以禁用拖动，就直接使用了ckplayer，没有测试jwplayer，待日后有时间再学习~~ckplayer的使用文档见官方网站：http://www.ckplayer.com，当前CKplayer.js版本为X由于本人项目使...
修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题
weixin_30562507的博客
07-11 2745
原文地址：https://www.cnblogs.com/jying/p/9642445.html，转载请说明出处。 最近项目需要播放视频且限制未观看部分的快进功能，找了两款js插件ckplayer和jwplayer，由于ckplayer是国内大牛开发的，中文文档比较官方，而且主要是文档说可以禁用拖动，就直接使用了ckplayer，没有测试jwplayer，待日后有时间再学习~~ ...
如何解决flash视频永远浮在最上层的问题？
hom_va的专栏
06-07 3862
如上代码，
ckplayer没法关闭控制栏.zip
11-01
ckplayer没法关闭控制栏 https://blog.csdn.net/qq_36413371/article/details/102857131
全屏后超出部分被隐藏问题
weixin_44874595的博客
03-05 732
默认情况下，浏览器只会简单地将元素设置为全屏显示。如果该元素全屏后，高度比屏幕还高，超出的部分将会被隐藏。为了将超出部分可以滚动显示，最顶层全屏显示的元素要特别设置： position : relative; width : 100%; height : 100%; overflow : auto; ...
ckplayer播放器自动播放下一集以及点击下一集
weixin_44732821的博客
07-18 2506
ckplayer播放器自动播放下一集以及点击下一集。
android编程开发之全屏和退出全屏的实现方法
09-03
在Android应用开发中，全屏显示和退出全屏是一个常见的需求，这有助于提供更好的用户体验，尤其是在游戏或视频播放等场景中。本篇文章将详细介绍如何在Android应用中实现全屏和退出全屏的功能。 首先，全屏模式是...
js控制页面的全屏展示和退出全屏显示的方法
10-24
主要介绍了js控制页面的全屏展示和退出全屏显示的方法,实例分析了javascript控制页面全屏效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Android编程使WebView支持HTML5 Video全屏播放的解决方法
09-03
我们重写`onShowCustomView()`和`onHideCustomView()`方法来处理全屏显示和退出全屏的操作。 `onShowCustomView()`方法会在视频进入全屏时被调用。在这个方法中，我们需要将WebView从其父布局中移除，并将视频视图...
JavaScript全屏和退出全屏事件总结（附代码）
10-19
因此，为了实现跨浏览器的兼容性，我们需要编写一段能够检测和调用正确全屏方法的代码。 在提供的代码中，作者定义了两个全局变量：`window.isflsgrn` 和 `window.ieIsfSceen`，分别用于标记全屏状态。`isflsgrn` ...
JS实现网页里的Flash全屏功能特效代
01-23
当涉及到Flash内容时，虽然现在HTML5已经逐渐取代了Flash，但在一些老项目或特定需求中，我们仍然需要处理Flash元素。本文将详细介绍如何使用JavaScript实现Flash全屏功能的特效代码。 首先，理解“全屏功能”意味...
H5页面视频播放后video标签层级变为最高遮盖其他元素
dujyong的博客
09-01 3195
H5页面视频播放后video标签层级变为最高遮盖其他元素 Android微信内置浏览器是X5内核,X5内核中默认了video的层级是最高级别,H5页面播放完视频后,video标签的层级会变成最高,遮盖其他所有元素 解决: 添加 x5-video-player-type='h5-page'属性就行 <video x5-video-player-type='h5-page' :src="item"></video> 问题解决! ...
html实现播放器下一集方法,本地化DPLAYER和CKPLAYER播放器自动下一集
weixin_29536515的博客
06-25 1805
目录下的dplayer.html文件查找try{在以上代码前插入以下代码dp.on('ended', function (){if(parent.MacPlayer.PlayLinkNext!=''){top.location.href = parent.MacPlayer.PlayLinkNext;}});你采集的资源站M3U8地址的话，可以使用本地DPLAYER的把资源站JS的播放器代码替换为...
vue页面或者网页全屏后，modal 弹框或者下拉框无法显示
hbmern的博客
12-01 5848
版权声明：本文为CSDN博主「时光荏苒、、、、、、、、」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/woyaojinali/article/details/110958317 说明：遇到了这个问题，仅为了记录~ 原因： 页面主体部分全屏后，页面中的所有弹窗和下拉框不能显示，退出全屏后，弹窗正常。原因：**项目主体全屏后，层级最高，弹出会被盖在app层级下面，不管怎么设置z-index都无济于...
网页上播放视频的免费的播放器_CKPlayer
abxlep7702的博客
10-31 2597
今天在工作的过程中遇到一个功能：在网页中加入视频播放器，类似于我们经常看到的优酷,爱奇艺等视频网站的功能。 ckplayer（官网：http://www.ckplayer.com/）是一款在网页上播放视频的免费的播放器，功能强大，体积小巧，使用起来随心所欲。 注意上面的红色框：请注意：播放器上的任何元素都可以换成您自己的！（在开发过程中，你回发现ckplayer的注释写的是很...
网页播放器实现全屏的方法总结
永生天地
04-19 1641
<br />网页播放器全屏的方法（有点气，少写了）这是自己总结的,刚刚要完的时候点错了,重新发送一次,老子好气,该打游戏的时间,浪费了,这里就偷工减料了! <br />    1、media player全屏方法<br />   <script language="JavaScript"><br />    <!--<br />    var Real;<br />    Real='MediaPlayer1.';<br />    var Mute=false;<br />    var CanSetPo
H5实现浏览器全屏API(全屏进入和全屏退出)
热门推荐
qq_35515563的博客
06-05 1万+
【进入和退出全屏】 // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen();   // Firefox 10+ element.mozRequestFullScreen(); document.mozCance
使用ckplay播放器插件遇到的问题总结
最新发布
lxuanz的博客
12-07 1789
谷歌不能自动播放音频
html调用ckplayer说明,关于ckplayer.js 对播放器控制的参数详细介绍
weixin_39853843的博客
06-07 1309
setup: '1,1,1,1,1,2,0,1,2,0,0,1,200,0,2,1,0,1,p,1,2,0,3,0,1,2,3000,0,0,0,0,1,1,1,1,3,1,250,0,90,0,0,0',/* 19 22这是配置文件里比较重要的一个参数，共有N个功能控制参数，并且以后会继续的增加，各控制参...
利用Fscommand实现Flash动画全屏播放与设置
parameter)`，提供了六个核心命令：fullscreen（全屏/非全屏切换）、allowscale（是否允许缩放）、showmenu（显示/隐藏菜单）、trapallkeys（屏蔽/启用快捷键）、exes（执行外部应用程序）和quit（退出播放器）。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值