英文:
VideoJS scale video like youtube
问题
我正在尝试使用VideoJS来调整我的视频，以使其始终适应窗口的缩放，视频的尺寸是1280x720，我正在寻找一种解决方案，就像在YouTube剧院模式中一样，视频将居中并尽可能大，但会在两侧添加黑边。
当前代码：
<html>
<head>
<title>Test Video</title>
</head>
<body>
<link rel="stylesheet" href="video-js.css" type="text/css">
<div class="container">
<div class="VideoJS">
<div id="Video">
<video id="vid1" class="video-js vjs-fluid" controls preload="auto" playsinline webkit-playsinline
style="max-width: 100%;">
<source src="testvideo.mp4">
</video>
<script src="video.min.js"></script>
<script>
var player = videojs('vid1', {})
</script>
</div>
</div>
</div>
</body>
</html>
编辑：
以下代码将呈现出我想要的播放器行为，但它占据了整个页面，因此我需要它包含在一个div中，但仍然可以像这样缩放：
<html>
<head>
<title>Test Video</title>
</head>
<body>
<script src="video.min.js"></script>
<link rel="stylesheet" href="video-js.css" type="text/css">
<video id="my_video_1" style="width: 100%; height: 100%; top: 0px; position: absolute; background-color: black;"
class="video-js" controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>
</body>
</html>
英文:
I'm trying with VideoJS to scale my video so it always fits when window is scaling, the video is 1280x720 and looking for a solution like when you in youtbe theater mode, the video will be centered and as large as possbile but add black bars to side.
current code:
<html>
<head>
<title>Test Video</title>
<body>
<link rel="stylesheet" href="video-js.css" type="text/css">
<div class="container">
<div class="VideoJS">
<div id="Video">
<video id="vid1" class="video-js vjs-fluid" controls preload="auto" playsinline webkit-playsinline
style="max-width: 100%">
<source src="testvideo.mp4">
</video>
<script src="video.min.js"></script>
<script>
var player = videojs('vid1', {})
</script>
</div>
</div>
</div>
</body>
</html>
Edit:
This code below will present the player as I want it to behave but it takes up the whole page, so I need it to contain in a div but still scale as this code:
<html>
<head>
<title>Test Video</title>
<body>
<script src="video.min.js"></script>
<link rel="stylesheet" href="video-js.css" type="text/css">
<video id="my_video_1" style="width: 100%;height: 100%;top: 0px;position: absolute;background-color: black;"
class="video-js" controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>
</body>
</html>
答案1
得分: 0
以下是翻译好的内容：
"Ok I think I've solved it, this is the css
.container {
position: relative;
width: 100%;
height: 56.25vw;
max-height: calc(100vh - 250px);
min-height: 480px;
background: #000;
}
The max-height is subtraced the amount of space above the container div"
英文:
Ok I think I've solved it, this is the css
.container {
position: relative;
width: 100%;
height: 56.25vw;
max-height: calc(100vh - 250px);
min-height: 480px;
background: #000;
}
The max-height is subtraced the amount of space above the container div
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论