搜索:
向播放器添加插件
增加功能
使用说明
插件制作示例
监听动作插件
修改右键
修改/增加右键菜单
修改,添加右键

自定义元件的说明以及安装方法

涉及到本教程的相关收费视频教程如下:

在控制栏上添加一个按钮,实现自定义的功能(价格:¥5.00)

在查阅该文之前需要了解的内容如下:

增加上一个视频下一个视频的功能

正文:

本内容主要针对flashplayer。在播放器里增加自己的按钮,图片或swf。增加的位置分成二种:

一:全局形式,即指在播放器的任意位置增加。

二:控制栏上增加。

使用该功能需要修改style.xml文件。在该xml节点中存在二个节点:

<ckplayer>
    <custom>
        <button></button>
        <images></images>
        <swf></swf>
    </custom>
</ckplayer>

上面这个节点是定义在全局位置的自定义内容,包含自定义按钮,图片,swf

<ckplayer>
    <controlBar>
        <custom>
            <button></button>
            <images></images>
            <swf></swf>
        </custom>
    </controlBar>
</ckplayer>

上面这个节点是定义在控制栏上的自定义内容,包含自己义按钮,图片,swf

注意,二个位置的定义方法完全一样。区别就在于控制栏上的会跟随控制栏的隐藏而隐藏。

下面我们以控制栏上的作为讲解示例:

<ckplayer>
    <controlBar>
        <custom>
            <button>
                <previousPage>
					<mouseOut>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REQ4MkZGRDhBMDJDMTFFNzg2OTFDQUU1NDE2RTY4MzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REQ4MkZGRDdBMDJDMTFFNzg2OTFDQUU1NDE2RTY4MzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTBBNTcyMkVBMDI5MTFFN0JDMkJEREJGNDE1NjZBMEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTBBNTcyMkZBMDI5MTFFN0JDMkJEREJGNDE1NjZBMEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5kvQCrAAAA5ElEQVR42mL8//8/w2AEiYmJZ5gYBjEYddyo40YdN+q4UccxMPzHgikBAkC8fjCGXAEQ3wfiAGIUs9DJUQpAPB+IHQZbmmsA4vOkOozWIWcADS2DwZRbQQm+HhpaBpQYRO2Qc4CGlsJgKudAodUPxPup5TBqhVwANLQEBmsNwThYq68N0KicOFhD7gO09HcE4oeDteI/AC0+Ggdrq+QDtFYwBOKLg7XJdAEpFD8O1vZcA9SRBwdrY/MBtPYoJCUU6d2emwAtdjZSq4ZgpEGGCRiMITfa+xp13KjjRh036jgkABBgANGvJgCBX5adAAAAAElFTkSuQmCC</mouseOut>
					<mouseOver>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQxMzUwN0U3QTAyQzExRTc5OUNCREY1MUQ1OTU3MDc0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQxMzUwN0U4QTAyQzExRTc5OUNCREY1MUQ1OTU3MDc0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDEzNTA3RTVBMDJDMTFFNzk5Q0JERjUxRDU5NTcwNzQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RDEzNTA3RTZBMDJDMTFFNzk5Q0JERjUxRDU5NTcwNzQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6/2gCZAAABXElEQVR42uyY0VGDQBCGd8EQAzykBErADrADLIEKxAKAizSgFdCCdqDvzqgVqB3EGSFC5NZL3pw8aMgls+PcvjHDwH8fe/v/BxIRcKwkSR4sYFxGnBFnxBlx/13c0W83HJfNhoW0uYeD3yho6lhN1WbuGSty48smdbB+USuLtZDTUmIRjK2+AqAIEfn0nDOrhYP9IwBG2ntuaI3ER6goVQpUqITtZ0MMani7OUcCsffdutXDykVky6YCguAgo+SvtEZWXVgkU0CNi9254cs6BllXCDjl6RCok5dGcV3m3XTSCyTRNU9yAufLwk97tE7V1RtL4//KJnetdEN1oJvxTCWKYld4Qko6UYnhmWVkWgr/qcu9NUUCemeZ51YUO2krC6N7nmFTTF7b3FfGjxfbUDxonmtz92o1dtSnvtXiEJ+Zuzlgs53+r8wB3JgdOXP6MuKMOCPOiPtZ3wIMAB3ebzh1vcaxAAAAAElFTkSuQmCC</mouseOver>
					<align>left</align>
					<vAlign>top</vAlign>
					<offsetX>40</offsetX>
					<offsetY>0</offsetY>
					<clickEvent>javaScript->previousPage</clickEvent>
				</previousPage>
            </button>
            <images>
                <separator>
                    <img>
                        data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAmCAYAAAAFvPEHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA4QUY5QzVEQTAzMTExRTdCQjA1QzM3RDE5N0NCNEEyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA4QUY5QzVFQTAzMTExRTdCQjA1QzM3RDE5N0NCNEEyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDhBRjlDNUJBMDMxMTFFN0JCMDVDMzdEMTk3Q0I0QTIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDhBRjlDNUNBMDMxMTFFN0JCMDVDMzdEMTk3Q0I0QTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5OVecRAAAAFUlEQVR42mJISEg4w8QABEORAAgwAIP7AjcGIX7gAAAAAElFTkSuQmCC
                    </img>
                    <align>right</align>
                    <vAlign>top</vAlign>
                    <offsetX>-130</offsetX>
                    <offsetY>0</offsetY>
                </separator>
            </images>
            <swf>
                <loadBytes>
				        <swf>data:image/swf;base64,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</swf>
				        <align>left</align>
				        <vAlign>bottom</vAlign>
				        <offsetX>180</offsetX>
				        <offsetY>-30</offsetY>
				        <callActionScript>default</callActionScript>
			    </loadBytes>
            </swf>
        </custom>
    </controlBar>
</ckplayer>

从上面的示例可以看出,在控制栏上我们自定义了一个按钮,一个图片,一个swf,关于按钮的定义如下:

<previousPage>:这是自定义节点按钮名称,随意定义,但不能和其它的按钮名称重复。

<mouseOut>:按钮默认状态下的图片

<mouseOver>:按钮鼠标经过时的图片

<align>:水平对齐方式,left=左对齐,center=中间对齐,right=右对齐,以控制栏的左上方为参考
<vAlign>:垂直对齐方式,top=顶部对齐,middle=中间对齐,bottom=下方对齐,以控制栏的左上方为参考 <offsetX>:水平偏移量
<offsetY>:垂直偏移量
<clickEvent>:点击时的动作

关于位置的控制可以下文本最下方的图示:

关于clickEvent的动作分以下几种:

actionScript:调用as3接口函数,即播放器内部函数,

比如说调用播放,<clickEvent>actionScript->videoPlay</clickEvent>,调用的函数可以加参数比如videoRotation(-1)

javaScript:[flashvars]调用js函数,<clickEvent>javaScript->helloword()</clickEvent>,点击按钮会调用js函数helloword,同样可以自定义参数,如果你想函数名称不在这里指定,而是在调用播放器时指定,则可以用<clickEvent>javaScript->[flhasvars]helloword</clickEvent>,则videoObject里指定当前页面调用的函数名称

link:[flashvars]链接地址,打开窗口的位置,<clickEvent>link->http://www.ckplayer.com,_blank</clickEvent>在新窗口中打开链接地址,

none=没有动作


再看一下images里的内容

<separator>是图片名称,需要你自定义一个名称


再看一下swf里的内容

<loadBytes>:swf的名称,需要自己定义

<swf>:swf的base64字符。ckplayer官网提供了文件传base64的功能。


全局的custom定义跟控制栏上的一样。只是位置是以播放器左上为参考

align:水平对齐方式,字符类型,有三个属性,分别是:left=左对齐,center=中间对齐,right=右对齐。图示如下:

vAlign:垂直对齐方式,字符类型,有三个属性,分别是:top=顶部对齐,middle=中间对齐,bottom=底部对齐。图示如下:

offsetX:水平偏移量,支持正数和负数,小于0时向左偏移,大于0时向右偏移,以水平中间对齐为例,比如元件宽宽:100px,algin='center',offsetX=-50,则元件距离左右二边距离相等。

offsetY:垂直偏移量,支持正数和负数,小于0时向上偏移,大于0时向下偏移。

建议了解以下相关内容:

修改logo

关于位置定位的说明

Powered by ckplayer.com
Copyright©ckplayer,2011-2017( 苏ICP备11026158号 )