尽管我找不到太多关于此主题的文档,但我知道在mediaelement.js中,您可以更改音频播放器的皮肤或修改CSS以创建自己的皮肤。我遇到了一个问题,即我甚至无法替换浏览器播放器的默认mediaelement.js皮肤,因此无法将默认CSS修改为我的样式需求。当我尝试使用player.changeSkin()方法时,它会停止程序。 我已经包含了皮肤CSS以及其他所需的mediaelement.js文件,至少据我所知,而且播放器工作正常,直到我尝试更改皮肤。我正在使用此代码来流式传输音频,您可以在http://escapetodenton.com/radio/compact-player.html上找到一个可行版本(在尝试对播放器进行皮肤处理之前的最后一个可行上传)。由于某种原因,播放器本身现在在我的火狐浏览器版本中根本没有渲染,因此如果您有Chrome或IE,您将更好地了解我要做什么。
头部导入的文件:
头部导入的文件:
<script src="build/jquery.js"></script>
<script src="build/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="build/mediaelementplayer.css" />
<link rel="stylesheet" href="build/mejs-skins.css" />
<script language="javascript" type="text/javascript"src="http://premiumca5.listen2myradio.com/system/streaminfo.js"></script>
<link rel="stylesheet" href="compact-player.css" />
玩家实例化和启动:
var player = new MediaElement('player', {
pluginPath: '/build/',
features: ['playpause','progress','current','duration','volume'],
audioWidth: 400,
enableAutosize: false,
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true,
success: function(player, node) {
player.changeSkin('mejs-ted');
player.play();
}
});
由于我找不到有关changeSkin()方法的任何文档,所以我只是按照mediaelement.js在其主页代码中使用的方式来使用它。如有帮助或想法,请提出。