9

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

头文件中的导入文件：

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

4

2 回答 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 会自动检查视频元素上的类属性，并将该类添加到父容器中，以便可以通过前缀 .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

于 2013-09-30T17:56:59.630 回答
4

也许这篇关于 InsertHTML 的文章http://www.inserthtml.com/2013/03/custom-html5-video-player/应该可以帮助您解决问题。

它使用 mediaelement.js 来设计带有 HTML5 和 JavaScript 的自定义 CSS3 视频播放器。

于 2013-03-27T08:33:54.547 回答