如何定位“MediaElement”媒体播放器

I'm new in web development, I am using MediaElement as my media player in my website. I'm trying to position the audio player but there are too many elements that need to be positioned separately. Is there an easy, singular approach to position the whole thing at once?

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

2 个解决方案

#1

There is always a parent element that surrounds just about any component in a web page, especially media players. That's the only thing that needs to be positioned; All child elements will follow.

总是有一个父元素围绕网页中的任何组件,尤其是媒体播放器。这是唯一需要定位的东西;所有子元素都将随之而来。

Below I've created a running example of a fake media player. Notice only the top level .player class has positioning styles. Those are the only ones you need to set. All the child element styles would come from whatever default stylesheet comes with the media player itself.

下面我创建了一个虚假媒体播放器的运行示例。请注意,只有*.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>

There are other ways to position elements such as margins, padding and centering, so be sure to explore all options to make sure it'll layout correctly.

还有其他方法来定位元素,如边距,填充和居中,所以一定要探索所有选项,以确保它的布局正确。

#2

One singular (but cheap) approach is to wrap your elements in a <center> tag, but I wouldn't seriously recommend this. If you're new to web development, you should at least be aware of it.

一种单一(但便宜)的方法是将您的元素包装在

标签中,但我不会认真推荐这个。如果您不熟悉Web开发,至少应该了解它。

Other options primarily involve CSS. I would check out the flexbox model. It's fantastic for layouts.

其他选项主要涉及CSS。我会查看一下flexbox模型。它非常适合布局。

.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

Wrapping your items in a <div> with a class of wrapper will horizontally center the items within itself. If you're developing for platforms that support flexbox, then knowing flexbox layouts is helpful to avoid learning arcane, classic CSS hacks of horizontally centering elements.

使用一类包装器将项目包装在

中将使项目内部水平居中。如果您正在开发支持flexbox的平台,那么了解flexbox布局有助于避免学习水平居中元素的经典CSS黑客攻击。

#1