logo标签列表

mediaelement.js更换皮肤

jquerycsshtml5-audiomediaelement.js
9
尽管我找不到太多关于此主题的文档，但我知道在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在其主页代码中使用的方式来使用它。如有帮助或想法，请提出。

1
我之前花了一些时间研究mediaelement.js。据我所记，我找到了所有的CSS，并确定了每个元素的样式。我遇到的问题是它有一个Flash回退功能（理论上很好），但这也意味着你必须重新设计它。它不能真正地响应式。我尝试构建一些Ajax播放列表功能，但Flash回退是一个大问题，所以我放弃了整个项目。我记得有3或4个“皮肤”可用。这些可能会让你知道需要编写哪些CSS。 - sheriffderek
我终于成功地更改了足够多的默认皮肤以满足客户需求，并使其在所有主要浏览器上呈现相对无缝（在旧版本的ie上回退为纯黑色，没有渐变）。 我正在使用Ajax更改电台流，这在hmtl5版本和Flash回退中都可以工作。 如果您想查看该实现，我很乐意分享我的代码。毫无疑问，这花费了我一些时间才能使其持续稳定运行。感谢您的回复。 - jdbosley
创建你的代码的jsfiddle版本，也许我们可以稍微玩一下。 - Pavel Kostenko
我以前创建了自己的皮肤，它运行良好。我怀疑您是否可以使用mediaelementjs的任何JavaScript方法来更改皮肤，但我认为可以为您找到另一种解决方案。但首先请制作一个jsfiddle。 - Pavel Kostenko
在mediaelement.js库中有一个changeSkin() 方法，用于交换类，但是我最终只是在实际网站上使用了一些对 mediaelement.css标准皮肤进行的修改。这里有一个使用Ajax动态切换流媒体站点的fiddle示例：http://jsfiddle.net/jdbosley/Nx7dt/2/ - jdbosley
2个回答
5
你需要做的是在你的视频元素上添加 class="mejs-ted"。changeSkin（）函数用于动态交换皮肤，也就是说，你希望提供多个皮肤，用户可以在其中切换。
因此，你的视频标签应该添加你的类，并且会看起来像这样：
<!-- replace mejs-ted with mejs-yourclass -->
<video class="mejs-ted" ...>
    <source type="video/mp4" src="....">
    <source type="video/ogg" src="....">
    <!-- etc.. -->
</video>

Mediaelement会自动检查video元素上的class属性，并将该class添加到父容器中，以便通过使用.mejs-yourclass前缀来覆盖所有DOM元素。

如果您只想更改默认皮肤设置，则使用class即可。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。
4
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接