时间戳

首页 > 解决方案 > 如何让控件更接近 html 中的视频

javascript - 如何让控件更接近 html 中的视频

问题描述

我正在向我的 html 页面添加视频，但控件与视频相距甚远，您可以在此处看到如何让它们靠得更近并消除它们之间的灰色空间？

我的 HTML：

<div class="sameline">
        <video height="500" width="800" controls>
            <source src="../videosrecords/Half Brothers.mp4" type="video/mp4" />
        </video>
</div>

我的 CSS：

.sameline {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
video{
    outline: 0px;
}

标签： javascripthtmlcss

解决方案

根据MDN - : Video Embed element，添加该controls属性将显示浏览器的默认视频控件。

我认为您无法控制默认控件的位置或外观。

但是，您可以“使用 JavaScript 和 HTMLMediaElement API”创建自己的自定义控件。

有关如何创建自定义控件的说明，请参阅有关创建跨浏览器视频播放器的 MDN 文章。

仅供参考，这是您播放随机选择的 mp4 文件的代码。

.sameline {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
video{
    outline: 0px;
}
<div class="sameline">
  <video height="500" width="800" controls>
            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4" />
        </video>
</div>

推荐阅读