Question

所以我尝试在我的网页上显示视频，但决定使用按钮的自定义样式。问题是我不能像我想的那样真正定位它们。如果我使用css position：absolute并使用margin来使它们进入位置，它只能在我调整窗口大小时工作 - 当窗口变小时，静音和全屏按钮合并在一起。有没有办法让他们彼此远离？

#full-screen {
  height: 22px;
  width: 22px;
  position: absolute;
  background-color: transparent;
  margin-top: -45px;
  margin-left: 95%;
}

#mute {
  height: 22px;
  width: 22px;
  position: absolute;
  background-color: transparent;
  margin-top: -45px;
  margin-left: 90%;
  margin-right: 10px;

}

<div id="video_container">
    <video id="video" width="100%">
        <source src="video/video.mp4" type="video/mp4">
        <source src="video/video.ogg" type="video/ogg">
    </video>
<!-- Video Controls -->
    <div id="video-controls">
    <button type="button" id="play-pause"><input type="image" src="buttons/play.png"></button>
    <progress id="progress" value="0" min="0">
         <span id="progress-bar"></span>
      </progress>
    <button type="button" id="mute"><input type="image" src="buttons/volumeOn.png"></button>
    <button type="button" id="full-screen"><input type="image" src="buttons/fullScreen.png"></button>
    </div>
</div

Answer 1

试试这个来解决你的问题。此代码用于在视频控件div中设置按钮

#video-controls{
position:relative;
}

在视频上定位按钮

1 个答案: