logo标签列表

video.js自适应div大小

percentagevideo.js
46

我在一个宽度为40%的

中有一个video。 在HTML中，width =“100％” height =“auto”会使视频消失。设置特定大小的像素将不适合
。留空HTML会导致视频尺寸不正确，并且两侧有黑边。

我尝试了大多数其他帖子中的建议，但似乎无法使其正常工作。

<div id="box"><video id="trialvid" class="video-js vjs-default-skin"
  controls preload="auto" width="auto" height="auto" poster="images/reelthumbnail.jpg"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</div>
你试过这样写代码吗：$(this).css({ "width":""+$(this).closest('div').width()+"px", "height":""+$(this).closest('div').height()+"px" }); 在Jquery加载视频时？顺便问一下，你能展示一下你的HTML吗？ - Vedant Terkar
1
请将代码放在问题中，以便人们理解您所写的内容。 - Brad Peabody
6个回答
97
在videojs的第5个版本中，您可以在视频对象上使用和类。
<video class="video-js vjs-default-skin vjs-16-9" ...>
...
</video>

或使用 fluid 选项

<video class="video-js vjs-default-skin" data-setup='{"fluid": true}' ...>
...
</video>

来源: https://coolestguidesontheplanet.com/videodrome/videojs/

8
这正是我一直在寻找的（流体选项）。谢谢！ - Christopher Davies
fluid可以正常工作，但请注意引号。 您无法在JSON中使用单引号'，只能使用双引号"。 这必须完全像这样：'{"fluid": true}'。 - matasoy
5
现在您可以在视频元素中使用 vjs-fluid 选项，而不必麻烦地进行设置。 - Kalle H. Väravas
19
你必须使用丑陋的 !important 来覆盖视频默认的绝对定位:
.video-js {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}
完成这个步骤后，海报图像将显示在视频之后，而不是覆盖在上面，所以您需要使用以下代码进行修复：
.vjs-poster {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
请注意，如果您希望其显示得好看，它必须具有与视频相同的比例。
3
运行得非常好，我只需要将其添加到.video-js以及.video-js .vjs-tech中...问候 Stefan - Stefan Walther
使用Player#width()或Player#height()如此展示的方式怎么样：http://docs.videojs.com/tutorial-skins.html？ - Jordan
你可以添加 height: 100vh !important; 让它适应整个屏幕，然后将其嵌入到 iframe 中。 - Salem
7
在视频标签的HTML中将宽度和高度设置为auto。然后使用CSS将视频ID的宽度/高度设置为100％。
将宽度和高度属性设置为auto使播放器像div一样工作，默认情况下没有尺寸。
仍然没有运气。播放器不会显示海报图像，当我点击播放按钮时，视频只有音频和播放器控制栏，没有任何图像。 - user2671810
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/4.1/video.js"></script> <style type="text/css"> #box {width: 80%; height: auto;} </style> </head> <body> <div id="box"><video id="trialvid" class="video-js vjs-default-skin" controls preload="auto" width="auto" height="auto" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /></video></div></body>' - user2671810
4
这是我用来解决这个问题的方法。 首先，删除视频对象上的任何大小声明。
将包含元素的position属性设置为relative。
.video_container {
  position: relative;
}

将海报图片添加到包含元素中，并将其宽度设置为100％，高度设置为自动。这将强制div垂直地调整到海报图像的高度（如果您做得正确，它应该与您的视频大小相同）。
.video_container img.poster {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10;
}

现在将 .video-js 的位置设置为绝对位置，并将其高度和宽度设置为 100%。这将导致 .video-js 自适应海报图像的高度和宽度，而海报图像会自适应包含 div 的大小。

.video_container .video-js {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 110;
}

如果您使用像Zencoder这样的服务来生成缩略图，并允许用户上传视频，那么您可以从图像中获取尺寸，这将垂直等比例缩放视频，确保您的视频始终按比例缩放。

3
  video[poster]{
    object-fit: fill;
}

对我来说做到了

2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接