Bootstrap 4嵌入带有控件的响应视频 [英] Bootstrap 4 Embed Responsive Video with Controls

问题描述

我正在使用Bootstrap 4的响应式嵌入式视频功能，它在视频上可以正常工作，但不能缩放控件(暂停，播放等).控件只是不可扩展，还是我在代码中缺少某些内容?

I'm using Bootstrap 4's responsive embedded video functionality and it works just fine on the video, but doesn't scale the controls (pause, play, etc). Are the controls just not scalable or am I missing something in the code?

    <div id="trailer" class="section d-flex justify-content-center embed-responsive embed-responsive-4by3">
      <video class="embed-responsive-item" controls>
        <source src="assets/TMMTrailer18.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>

谢谢！

推荐答案

视频具有固定的宽高比.引导程序在这里，我们可以调整视频的宽度和高度，以在不更改该比例的情况下尽可能地覆盖整个空间.但是，如果我们没有选择" class "具有适当的宽高比( Height或width )的，首先达到 100％的那个将居中.

Videos have a fixed aspect ratio. Bootstrap here allows us to adjust the width and height of the video to span as much space as possible without changing this ratio. But it doesn't matter if we haven't selected a "class" with the appropriate aspect ratio (Height or width), whichever reaches 100% first will center the other.

这会导致视频从底部或顶部或右侧或左侧居中.

This causes the video to be centered from the bottom or top, or right or left.

实际上，这就是诸如Youtube和Vimeo之类的流行平台所做的事情.他们只是将背景颜色设为黑色，希望给人一种感觉，即控制按钮周围包裹着一个播放器.

In fact, this is what popular platforms like Youtube and Vimeo do. They just make the background color black, which they want to give the impression that there is a player wrapped around the control buttons.

您在这里需要做的是将 background-color:黑色.

What you need to do here is to make the background-color: black.

.embed-responsive-item {
  background-color: black;
}

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<div id="trailer" class="section d-flex justify-content-center embed-responsive embed-responsive-21by9">
  <video class="embed-responsive-item" controls autoplay loop muted>
        <source src="https://player.vimeo.com/external/325698769.sd.mp4?s=4e70164190f4b472059c9f4ca74ca0ca58056ce4&profile_id=165" type="video/mp4">
        Your browser does not support the video tag.
      </video>
</div>

.embed-responsive-item {
  background-color: black;
}

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<div id="trailer" class="section d-flex justify-content-center embed-responsive embed-responsive-4by3">
  <video class="embed-responsive-item" controls autoplay loop muted>
        <source src="https://player.vimeo.com/external/325698769.sd.mp4?s=4e70164190f4b472059c9f4ca74ca0ca58056ce4&profile_id=165" type="video/mp4">
        Your browser does not support the video tag.
      </video>
</div>

此处可确保班级和视频完全匹配.

Here it ensures that the class and video are in exact match.

.embed-responsive-item {
  background-color: black;
}

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<div id="trailer" class="section d-flex justify-content-center embed-responsive embed-responsive-16by9">
  <video class="embed-responsive-item" controls autoplay loop muted>
        <source src="https://player.vimeo.com/external/325698769.sd.mp4?s=4e70164190f4b472059c9f4ca74ca0ca58056ce4&profile_id=165" type="video/mp4">
        Your browser does not support the video tag.
      </video>
</div>

引导程序的响应类使视频播放器具有响应能力，而不是视频.视频还试图传播到这些播放器的最大可能区域.

The responsive class of bootstrap makes video-players responsive, not videos. Videos also try to spread to the maximum possible area of ​​these players.

如果您直观地将响应式嵌入 class 设置为较宽，例如 example(21by9-> 16by9)，人们就会习惯于在左侧和右侧留出空隙视频右侧，该比例显示为黑色.我的建议是让您的班级改为 16by9 或 21by9 ，而不是 4by3 .

If you intuitively set your responsive embed class to be wide, like example (21by9 -> 16by9), people are very used to having gaps on the left and right of the video and the ratio appearing black. My suggestion is to make your class 16by9 or 21by9 instead of 4by3.

这篇关于Bootstrap 4嵌入带有控件的响应视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！