英文:
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-playsinlinestyle="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-playsinlinestyle="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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论