您可以通过创建和应用自己的皮肤自定义媒体播放器的框架。
一个皮肤由一个包装。拉链包含一个文件。CSS文件和一个精灵。PNG含有成分图形图像文件。的。CSS文件定义皮肤的组件的设置：控制条，显示，码头，和播放列表。用你最喜爱的图像编辑器来设计和保存的视觉元素，弥补皮肤的皮肤，并链接到他们。CSS文件。
|
|
在使用基于Flash的自定义皮肤 |
该方案利用JW播放器5，目前互联网上领先的媒体播放器的自定义皮肤格式。玩家很容易配置，定制和扩展。有关创建的JW播放器5的外观细节，请访问http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/building-skins。
要使用新格式创建自定义外观：
创建一个精灵。PNG包含所有对皮肤图像的图像文件。命名精灵。PNG图像文件与您的自定义皮肤的名称。几个精灵形象的创作者都可以在网络上。推荐具有具有相同的宽度和高度的按钮。此外，该图片应该是要用于控制器的高度相同的高度。
|
|
雪碧图片不得超过24像素的高度。联系技术支持，如果你需要比24px的更高更大的子画面图像。 |
注意：每个精灵图像文件中的图像的X和Y位置。当您创建需要这些坐标。CSS在步骤3中的文件。
例如，以下是在步骤1中所示的示例子画面图像的X和Y位置和尺寸：
| 皮肤图像 | X，Y位置 | 宽度 | 高度 |
| 背景图 | 0,0 | 80 | 24 |
| 播放按钮 | 0,24 | 20 | 24 |
| 玩悬停按钮 | 20，24 | 20 | 24 |
| 暂停按钮 | 40，24 | 20 | 24 |
| 暂停悬停按钮 | 60，24 | 20 | 24 |
| 全屏按钮 | 0，48 | 20 | 24 |
| 全屏悬停按钮 | 20，48 | 20 | 24 |
| Unfullscreen按钮 | 40，48 | 20 | 24 |
| Unfullscreen悬停按钮 | 60，48 | 20 | 24 |
| 静音按钮 | 0，72 | 20 | 24 |
| 静音悬停按钮 | 20,72 | 20 | 24 |
| 取消静音按钮 | 40，72 | 20 | 24 |
| 取消静音悬停按钮 | 60，72 | 20 | 24 |
| 标题按钮 | 0，96 | 24 | 24 |
| TimeHandle | 24，96 | 6 | 16 |
创建。CSS的皮肤文件，通过下面提供的示例CSS文件引导。命名。CSS文件一样的皮肤文件中命名。
根据您皮肤的名称，替换sample相应。
例如：
sample将与被替换。yourSkinName
并且sample.png是被替换yourSkinName.png。
示例：
格[ID ^ = “视频”]。样品.mejs的控件{
背景：网址（精灵/ sample.png）0像素0像素;
高度：24px的;
底部：-24px;
}你的皮肤：
格[ID ^ = “视频”] .yourSkinName .mejs的控件{
背景：网址（精灵/ yourSkinName.png）0像素0像素;
高度：24px的;
底部：-24px;
}
每个拼成的皮肤图像的要求其各自的CSS类。为背景，使用MEJS -控制将指向子画面内的背景图像。这是通过后台完成url(Sprites/sample.png) 0px 0px
，其中0px 0px代表子画面图像内的X和Y位置。使用音频和视频相应的类如图所示的样本。CSS下方。
修改相应的高度，以你的形象。如果你想控制栏是视频下方，底部性质随之改变。
各自的形象和大小更换其他控件。
例如：
。样品.mejs-控制.mejs-暂停按钮{
宽度：20像素;
高度：24px的;
背景：网址（精灵/ sample.png）不重复-40px -24px;
余量：0;
填充：0;
}
需要注意的是，X和Y位置为负，显示相应的CSS偏移位置。
对于时间铁路和音量滑块，改变背景颜色根据自己的喜好。使用RGBA值与Alpha透明度来显示，并使用十六进制值，以及支持旧版浏览器。
一旦.css和精灵的图像文件是完整的，压缩在一起。的。拉链名称应与你的。CSS文件名。
示例CSS文件
/ *确保这是你的.css文件的名称相匹配。例如，如果你的.css文件被称为sample.css，确保这一类被称为.mejs-container.sample * /
.mejs-container.sample {
}
/ *这是对于所有的控制器元件的容器中。* /
。样品.mejs-控制{
位置：绝对的;
底部：0;
宽度：100％;
}
/ *这些2个ID区块确定背景图像的视频/音频控制器* /
格[ID ^ = “视频”]。样品.mejs的控件{
背景：网址（精灵/ sample.png）0像素0像素;
高度：24px的;
底部：-24px;
}
格[ID ^ = “音频”]。样品.mejs的控件{
背景：网址（精灵/ sample.png）0像素0像素;
高度：24px的;
底部：0;
}
/ *这些2个ID区块确定背景图像的视频/音频控制器* /
格[ID ^ = “VID”]。样品.mejs的控件{
背景：网址（精灵/ sample.png）0像素0像素;
高度：24px的;
底部：-24px;
}
格[ID ^ = “sndtobj”]。样品.mejs的控件{
背景：网址（精灵/ sample.png）0像素0像素;
高度：24px的;
底部：0;
}
/ *这定义了从左侧和顶部的时滑块的位置和大小。时间滑块是显示了媒体文件的进度条。* /
。样品.mejs时间滑块{
左：20像素;
顶部：4PX;
高度：8像素;
显示：内联块;
}
/ *这台相对于控制器的宽度的时滑块的位置。* /
。样品.mejs时间{
顶：0像素;
左：0像素;
位置：相对;
}
/ *这是时间码容器。* /
。样品.mejs-控制.mejs时间{
背景：网址（精灵/ sample.png）重复 - X 0 0;
高度：知识+;
位置：相对;
顶：0像素;
}
/ *这是媒体的进度条。* /
。样品.mejs-控制.mejs时间轨{
背景：网址（精灵/ sample.png）重复 - X 0 0;
高度：的22px;
}
/ *这将设置的颜色，或颜色和根据浏览器α，和高度的总时间，滑动条的。* /
。样品.mejs-控制.mejs时间轨.mejs - 时间 - {总
背景：＃383838;
背景：RGBA（0,0,0,0.6）;
高度：8像素;
}
/ *这将设置缓冲时间滚动条的高度。* /
。样品.mejs-控制.mejs时间轨.mejs时间缓冲{
高度：8像素;
}
/ *这将设置的颜色，或颜色和根据浏览器α和高度加载的时间滑动条的。* /
。样品.mejs-控制.mejs时间轨.mejs时间加载{
背景：＃808080;
背景：RGBA（128,128,128,0.3）;
宽度：0;
高度：8像素;
}
/ *这将设置的颜色，或颜色和根据浏览器α，和高度的当前时间滑动条的。* /
。样品.mejs-控制.mejs时间轨.mejs - 时间 - 电流{
背景：＃335D7C;
背景：RGBA（51,93,124,0.8）;
宽度：0;
高度：8像素;
}
/ *此定义的外观和时间滑块时，手柄的位置。* /
。样品.mejs-控制.mejs时间轨.mejs - 时间 - 手柄{
显示：块;
边界：无;
余量：0;
宽度：6像素;
左：-3px;
高度：16px的;
顶部：-5px;
背景：网址（精灵/ sample.png）不重复-24px -96px;
}
/ *这将描述时间浮动，但这个皮肤不会使用一个。* /
。样品.mejs-控制.mejs时间轨.mejs - 时间 - 浮动{
显示：无;
}
/ *这定义的大小和播放/暂停按钮的位置。* /
。样品.mejs-控制.mejs-playpause按钮{
顶：0像素;
左：0像素;
宽度：20像素;
高度：24px的;
}
/ *这定义了播放按钮标签。* /
。样品.mejs-控制.mejs-playpause键按钮{
宽度：20像素;
高度：24px的;
背景：网址（精灵/ sample.png）不重复0 -24px;
余量：0;
填充：0;
}
/ *这定义了暂停按钮标签。* /
。样品.mejs-控制.mejs-暂停按钮{
宽度：20像素;
高度：24px的;
背景：网址（精灵/ sample.png）不重复-40px -24px;
余量：0;
填充：0;
}
/ *这定义了播放按钮悬停状态* /
。样品.mejs-控制.mejs-playpause按钮按钮：悬停{
背景：网址（精灵/ sample.png）不重复-20px -24px;
}
/ *这定义了暂停按钮悬停状态* /
。样品.mejs-控制.mejs-暂停按钮：悬停{
背景：网址（精灵/ sample.png）不重复-60px -24px;
}
/ *这定义了尺寸和全屏/ unfullscreen按钮的位置。* /
。样品.mejs-控制.mejs全屏按钮{
顶：0像素;
右：12px的;
宽度：20像素;
高度：44px;
背景：无;
}
/ *这定义了全屏按钮。* /
。样品.mejs-控制.mejs全屏按钮按钮{
宽度：20像素;
高度：24px的;
背景：透明URL（精灵/ sample.png）不重复0 -48px;
余量：0;
填充：0;
}
/ *这定义了unfullscreen按钮标签。* /
。样品.mejs-控制.mejs-unfullscreen按钮{
背景：透明URL（精灵/ sample.png）不重复-40px -48px;
余量：0;
填充：0;
}
/ *这定义了全屏按钮悬停状态。* /
。样品.mejs-控制.mejs全屏按钮按钮：悬停{
背景：透明URL（精灵/ sample.png）不重复-20px -48px;
}
/ *这定义了unfullscreen按钮悬停状态。* /
。样品.mejs-控制.mejs-unfullscreen按钮：悬停{
背景：透明URL（精灵/ sample.png）不重复-60px -48px;
}
/ *这定义了尺寸和静音/取消静音按钮的位置。* /
。样品.mejs-控制.mejs积按钮{
顶：0像素;
右：0像素;
宽度：20像素;
高度：24px的;
}
/ *这定义的静音按钮标签。* /
。样品.mejs-控制.mejs静音按钮{
背景：网址（精灵/ sample.png）不重复0 -72px;
宽度：20像素;
高度：24px的;
余量：0;
填充：0;
}
/ *这定义了取消静音按钮标签。* /
。样品.mejs-控制.mejs-取消静音按钮{
背景：网址（精灵/ sample.png）不重复-40px -72px;
宽度：20像素;
高度：24px的;
余量：0;
填充：0;
}
/ *这定义的静音按钮悬停状态。* /
。样品.mejs-控制.mejs静音按钮：悬停{
背景：网址（精灵/ sample.png）不重复-20px -72px;
}
/ *这定义了取消静音按钮悬停状态。* /
。样品.mejs-控制.mejs-取消静音按钮：悬停{
背景：网址（精灵/ sample.png）不重复-60px -72px;
}
/ *这些属性定义弹出垂直音量滑块的外背景的外观和尺寸。* /
。样品.mejs-控制.mejs体积按钮.mejs体积滑块{
背景：＃C0C1E0;
边界：1px的固体#FFFFFF;
边框宽度：1px的1px的0 1px的;
宽度：20像素;
高度：65px;
顶部：-65px;
左：0像素;
}
/ *这些属性定义音量滑块的内背景。* /
。样品.mejs-控制.mejs体积按钮.mejs体积计{
背景：＃333333;
背景：RGBA（0,0,0,0.8）;
左：7px的;
宽度：6像素;
高度：50像素;
}
/ *这些属性定义音量滑块量的外观。* /
。样品.mejs-控制.mejs体积按钮.mejs体积电流{
左：7px的;
宽度：6像素;
背景：＃335D7C;
背景：RGBA（51,93,124,0.8）;
高度：50像素;
}
/ *此属性将定义一个音量滑块手柄。这个皮肤不会使用一个。* /
。样品.mejs-控制.mejs体积按钮.mejs积手柄{
显示：无;
}
/ *这定义了时间码的文本的颜色。* /
。样品.mejs-控制.mejs时间跨度{
颜色：＃000000;
}
/ *这是一个封装的当前时间码的容器。* /
。样品.mejs-控制.mejs-CURRENTTIME容器{
位置：绝对的;
顶部：32PX;
右：100px的;
边界：1px的固体＃999999;
背景：＃333333;
颜色：#FFFFFF;
填充顶：2px的;
边界半径：3px的;
}
/ *这是一个封装的长度的时间码的容器。* /
。样品.mejs-控制.mejs持续时间容器{
位置：绝对的;
顶部：32PX;
右：65px;
边界：1px的固体＃999999;
背景：#FFFFFF;
颜色：＃333333;
填充顶：2px的;
边界半径：3px的;
颜色：＃333333;
}
/ *这定义了尺寸和字幕按钮的位置。* /
。样品.mejs-控制.mejs-字幕按钮{
位置：相对;
宽度：24像素;
右：4PX;
顶：0像素;
}
/ *这将定义标题按钮标签。* /
。样品.mejs-控制.mejs-字幕按钮按钮{
宽度：24像素;
高度：24px的;
左：-1px;
顶：0像素;
背景：网址（精灵/ sample.png）不重复0 -96px;
}
|
您可以导入皮肤，并将它们添加到可应用于音频和视频控制器的皮肤列表。有关应用皮肤的音频控制器的详细信息，请参阅应用皮肤的音频控制器。有关应用皮肤到视频控制器的详细信息，请参阅应用皮肤到视频控制器。
|
也可以看看： |
技术支持 | 关于 Trivantis
© 版权 Trivantis 2017