适合 div 的 video.js 大小 [英] video.js size to fit div

问题描述

我在 div 中有一个 video，宽度为 40%.在 html 中， width="100%" height="auto" 使视频消失.以像素为单位设置特定大小将不适合 div.将 html 留空会使视频大小错误，并且两侧带有黑条.

我已经尝试了大多数其他帖子中的建议，但似乎无法让它发挥作用.

<div id="box"><video id="trialvid" class="video-js vjs-default-skin"控件 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'/></视频>

解决方案

在 videojs 的第 5 版中你可以使用 vjs-16-9 vjs-4-3 类在视频对象上，

<video class="video-js vjs-default-skin vjs-16-9" ...>...</视频>

或使用fluid选项

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

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

I have a video in a div with a 40% width. In the html, width="100%" height="auto" makes the video disappear. Setting a specific size in pixels won't fit the div. Leaving the html blank leaves the video the wrong size and with black bars on the sides.

I've tried the suggestions in most other posts, but can't seem to get it to work.

<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>

解决方案

In version 5 of videojs you can use vjs-16-9 vjs-4-3 class on video object,

<video class="video-js vjs-default-skin vjs-16-9" ...>
...
</video>

or use fluid option

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

Source: https://coolestguidesontheplanet.com/videodrome/videojs/

这篇关于适合 div 的 video.js 大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！