时间戳

首页 > 解决方案 > 在css中为不同的视频添加视频源

html - 在css中为不同的视频添加视频源

问题描述

我的视频标签中有一个视频，我需要添加另一个视频以提高响应能力，但我不希望将其设置为背景。我正在使用引导程序 4 轮播。

这是我的 HTML：

<div class="carousel-item active" >
 <video autoplay loop muted id="myVideo">
  <source src="videosource.mp4" type="video/mp4">
 </video>  
</div>

这是我的 CSS ：

.carousel-item{
    height:100vh;
}
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

标签： htmlcssvideo

解决方案

  • “我需要为响应添加另一个视频”

  • “因为当从移动设备或模板查看当前视频时，主角被裁剪掉了”

您可以尝试调整视频大小以始终适合屏幕。

下面的示例代码是否可以帮助您思考新的解决方案？将其设为新的 HTML 页面，然后测试桌面窗口大小调整并在移动设备上进行测试。

<!DOCTYPE html>
<html>

<style> .full-height-test { height: 95vh;} </style>

<body>

<div class="carousel-item active"  >
    <video  controls autoplay muted id="myVideo" class="full-height-test" >
    <source src="videosource.mp4" type="video/mp4">
    </video>  
</div>

</body>
</html>

推荐阅读