ios video标签自动全屏播放

转载

lanhy 2024-12-24 19:28:23

文章标签 ios video标签自动全屏播放 ckplayer flash遮住了div object遮住了div d3 文章分类 iOS 移动开发

出现这种情况的原因：

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>

全屏效果如下：

ios video标签自动全屏播放_object遮住了div