jquery - mediaelement.js 改变皮肤

Question

尽管它没有太多关于该主题的文档，但我知道在 mediaelement.js 中您可以更改音频播放器的外观或修改 CSS 以创建您自己的外观。我遇到了一个问题，我什至无法获得默认的 mediaelement.js 皮肤来替换浏览器播放器，因此我无法修改默认的 CSS 以满足我的样式需求。当我尝试使用 mediaelement.js 在其网站上使用的 player.changeSkin() 方法时，它会停止程序。我包括皮肤 CSS 以及其他所需的 mediaelement.js 文件，至少据我所知，在我尝试更改皮肤之前，它们播放器工作正常。我正在使用此代码流式传输音频，您可以在 http://escapetodenton.com/radio/compact-player.html 找到一个工作版本(在尝试为播放器设置皮肤之前的最后一个工作上传) .由于某种原因，播放器本身现在根本无法在我的 Firefox 版本中呈现，所以如果你有 chrome 或 ie，你会更好地了解我正在尝试做什么。

header中导入的文件:

<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 在其主页代码中使用它的方式使用它。任何帮助或想法将不胜感激。

Answer 1

您需要做的是在视频元素上添加 class="mejs-ted"。 changeSkin() 函数是用于动态交换皮肤的 afaik。即:您想提供用户可以切换的多个皮肤。

所以你的视频标签应该有你的类添加到它，看起来像这样:

<!-- replace mejs-ted with mejs-yourclass -->
<video class="mejs-ted" ...>
    <source type="video/mp4" src="....">
    <source type="video/ogg" src="....">
    <!-- etc.. -->
</video>

Mediaelement 自动检查视频元素的类属性，并将该类添加到父容器中，以便可以通过前缀 .mejs-yourclass 覆盖所有 DOM 元素

如果你只是想改变默认的皮肤设置类工作正常。 mejs-skins.css 包含您需要覆盖的所有样式的示例 CSS，以便以不同的方式显示它。唯一缺少的是 bigplay 按钮的样式:

/* overlay bigplay */
.mejs-yourclass .mejs-overlay-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    background: url(bigplay.png) no-repeat;
}

.mejs-yourclass .mejs-overlay:hover .mejs-overlay-button {
    background-position: 0 -100px;
}

您将从 git 中找到工作示例:https://github.com/johndyer/mediaelement/blob/master/demo/mediaelementplayer-skins.html