添加按钮和图片

#说明

添加自定义元件说明分为两部分：一是在控制栏上添加，二是在播放器界面上添加。添加的文件是style.json，添加的位置如下：

控制栏上添加元件的节点：controlBar>custom

播放器上添加元件的节点：custom

添加的元件分为三种类型，1：按钮，2：图片，3：flash插件（该插件在flashplayer环境中使用），元件的位置控制和普通的控制栏元件相同

#添加按钮

在控制栏上添加按钮和在播放器中添加按钮，参数都是一样的，只是坐标参考系不同而已，添加按钮示例如下：

"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", //默认按钮图片
            "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", //鼠标经过按钮时的图片
            "width": 39, //按钮宽
            "height": 38, //按钮高
            "align": "left", //按钮水平对齐方式，left=左对齐，center=中间对齐，right=右对齐
            "vAlign": "top", //按钮的垂直对齐方式，top=顶部对齐，middle=距中对齐，bottom=底部对齐
            "marginX":0, //水平偏移量，作用于html5环境，如果不设置该属性，则统一使用offsetX来定义
            "marginY":0, //垂直偏移量，作用于html5环境，如果不设置该属性，则统一使用offsetY来定义
            "offsetX": 40, //水平偏移量
            "offsetY": 0, //垂直偏移量
            "clickEvent":"javaScript->[flashvars]front" //点击事件
        },
        {
             //更多按钮	
        }
    }
}

#添加图片

添加图片的的示例如下：

"custom": { //插件节点
    "images": { //图片插件节点
        "separator": { //节点名称
            "img": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAmCAYAAAAFvPEHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA4QUY5QzVEQTAzMTExRTdCQjA1QzM3RDE5N0NCNEEyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA4QUY5QzVFQTAzMTExRTdCQjA1QzM3RDE5N0NCNEEyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDhBRjlDNUJBMDMxMTFFN0JCMDVDMzdEMTk3Q0I0QTIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDhBRjlDNUNBMDMxMTFFN0JCMDVDMzdEMTk3Q0I0QTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5OVecRAAAAFUlEQVR42mJISEg4w8QABEORAAgwAIP7AjcGIX7gAAAAAElFTkSuQmCC", //图片地址
            "width": 39, //宽
            "height": 38, //高
            "align": "left", //按钮水平对齐方式，left=左对齐，center=中间对齐，right=右对齐
            "vAlign": "top", //按钮的垂直对齐方式，top=顶部对齐，middle=距中对齐，bottom=底部对齐
            "marginX":0, //水平偏移量，作用于html5环境，如果不设置该属性，则统一使用offsetX来定义
            "marginY":0, //垂直偏移量，作用于html5环境，如果不设置该属性，则统一使用offsetY来定义
            "offsetX": 40, //水平偏移量
            "offsetY": 0 //垂直偏移量
        },
        {
             //更多图片	
        }
    }
}