mediaelement.js changeSkin

Question

尽管它没有太多关于这个主题的文档，但我知道在mediaelement.js中，您可以更改音频播放器的外观或修改CSS来创建自己的外观。我遇到了一个问题，我甚至不能获得默认的mediaelement.js皮肤来替换浏览器播放器，因此我无法修改默认的CSS以满足我的样式需求。当我尝试使用mediaelement.js在他们的站点上使用的player.changeSkin()方法时，它会暂停程序。我包括了皮肤CSS以及其他所需的mediaelement.js文件，至少据我所知，他们的播放器工作良好，直到我尝试改变皮肤。我正在使用这段代码来流式传输音频，你可以在http://escapetodenton.com/radio/compact-player.html上找到一个工作版本(在尝试给播放器换皮之前的最后一个工作上传)。由于某些原因，在我的firefox版本中，播放器本身也完全不能渲染，所以如果你有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在其主页的代码中使用它的方式来使用它。如有任何帮助或想法，我们将不胜感激。

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自动检查视频元素上的class属性，并将该类添加到父容器中，以便可以通过使用.mejs- with class前缀来覆盖所有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

Answer 2

也许InsertHTML上的这篇http://www.inserthtml.com/2013/03/custom-html5-video-player/文章应该对你的案例有所帮助。

它正在使用mediaelement.js与HTML5和JavaScript一起设计定制的CSS3视频播放器。