Question

目前我有一个大约2500个视频的目录，其宽高比各不相同。大多数是1080P并且很容易全屏，但偶尔的视频是4：3或9:16或其他奇数比例。我想做一个完整的屏幕背景视频但保持纵横比，这样视频就不会被剪裁。如果加载了4：3视频，则代码会全屏显示视频但会截取大部分视频。当然所有1080P视频都能正常运行。

目前HTML5 / PHP / CSS / JS就是这样：

＆＃13;

video {
margin:0;
padding:0;
}
.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 
  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;
  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

＆＃13;

<html>
<head>
<title>Playlist</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body bgcolor="black" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<div class="video-container">
<?php
$dir = '/opt/lampp/htdocs/playlist/videos/webm/';
$files = scandir($dir);
$lfile = array_diff($files, array('..','.'));
$rfile = $lfile[array_rand($lfile)];
$x = str_replace('.webm','',$rfile);
echo '<video id="bgvid" class="video" autoplay onended="getVideo()">';
echo "\r\n";
echo '<source src="/playlist/videos/mp4/'.$x.'.mp4" type="video/mp4">';
echo "\r\n";
echo '<source src="/playlist/videos/webm/'.$x.'.webm" type="video/webm">';
echo "\r\n";
echo "\r\n";
echo '</video>';
echo "\r\n";
?>
</div>
<script>
(function() {
var video = document.getElementById("bgvid");
video.addEventListener("canplay", function() {
video.play();});
video.onended = function getVideo() {
location.reload();
};})();
</script>
</body>
</html>

＆＃13;

带CSS / JS＆amp; amp;屏幕全屏幕背景视频保持纵横比

0 个答案: