如何设置videojs的长高自适应
时间: 2024-03-08 07:51:13 浏览: 18
要使用 videojs 实现视频的长高自适应,可以通过下面的步骤来实现:
1. 在 HTML 中设置 video 标签,并设置其宽度为 100%:
```html
<video id="my-video" class="video-js" controls preload="auto" width="100%"
poster="poster.jpg" data-setup="{}">
<source src="my-video.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
```
2. 使用 CSS 来设置 video 元素的高度,可以使用 `padding-top` 或 `padding-bottom` 的百分比来实现自适应高度,同时设置 `position: relative`:
```css
.video-js {
position: relative;
padding-top: 56.25%;
/* 16:9 比例的视频 */
}
```
3. 在 JavaScript 中初始化 videojs:
```javascript
var player = videojs('my-video');
```
经过上述步骤,视频就可以实现长高自适应了。这种方法可以使得视频在不同尺寸的屏幕上自适应,同时保持视频的比例不变。