javascript - 如何定位 "MediaElement"媒体播放器

Question

我是网络开发的新手，我在我的网站上使用 MediaElement 作为我的媒体播放器。我正在尝试定位音频播放器，但需要单独定位的元素太多。是否有一种简单、独特的方法来一次定位整个事物？

Answer 1

总是有一个父元素围绕着网页中的几乎所有组件，尤其是媒体播放器。这是唯一需要定位的东西；所有子元素都将跟随。

下面我创建了一个假媒体播放器的运行示例。请注意，只有顶级 .player 类具有定位样式。这些是您唯一需要设置的。所有子元素样式都来自媒体播放器本身附带的任何默认样式表。

/* only position the parent container */
.player {
  position: absolute;
  top: 100px;
  left: 100px;
}

/* IGNORE THESE, assume they're from the media player's own stylesheets */
.player .player-video {
  width: 250px;
  height: 200px;
  background: #000;
}

.player .player-controls {
  padding: 5px;
  background: #CCC;
}

.player .player-play-button,
.player .player-next-button {
  display: inline-block;
}

<div class="player">
   <video class="player-video"></video>

   <div class="player-controls">
     <button class="player-play-button">PLAY</button>
     <button class="player-next-button">NEXT</button>
   </div>
</div>

还有其他方法可以定位元素，例如边距、填充和居中，因此请务必探索所有选项以确保其布局正确。