video js 强制横屏
时间: 2023-07-23 07:43:39 浏览: 71
要在 video.js 中强制横屏,可以使用 Fullscreen API 和 CSS 旋转来实现。具体步骤如下:
1. 使用 Fullscreen API 进入全屏模式,并在进入全屏模式时添加一个类名:
```javascript
var player = videojs('my-player');
player.on('fullscreenchange', function() {
if (player.isFullscreen()) {
document.body.classList.add('fullscreen');
} else {
document.body.classList.remove('fullscreen');
}
});
player.requestFullscreen();
```
2. 在进入全屏模式时,使用 CSS 旋转将播放器旋转 90 度:
```css
.fullscreen .video-js {
transform: rotate(90deg);
transform-origin: left top;
width: 100vh;
height: 100vw;
margin-left: calc((100vw - 100vh) / 2);
}
```
注意,这里使用了 `vh` 和 `vw` 单位,它们分别表示视口高度和宽度的百分比。这样可以保证播放器在旋转后充满整个屏幕。
3. 在退出全屏模式时,将播放器旋转回来:
```css
.video-js {
transition: transform 0.5s;
}
.fullscreen-exit .video-js {
transform: rotate(0);
width: auto;
height: auto;
margin-left: 0;
}
```
这里使用了 CSS 过渡来平滑地将播放器旋转回来。
完整的代码如下:
```javascript
var player = videojs('my-player');
player.on('fullscreenchange', function() {
if (player.isFullscreen()) {
document.body.classList.add('fullscreen');
} else {
document.body.classList.remove('fullscreen');
document.body.classList.add('fullscreen-exit');
setTimeout(function() {
document.body.classList.remove('fullscreen-exit');
}, 500);
}
});
player.requestFullscreen();
```
```css
.fullscreen .video-js {
transform: rotate(90deg);
transform-origin: left top;
width: 100vh;
height: 100vw;
margin-left: calc((100vw - 100vh) / 2);
}
.video-js {
transition: transform 0.5s;
}
.fullscreen-exit .video-js {
transform: rotate(0);
width: auto;
height: auto;
margin-left: 0;
}
```
这样就可以在 video.js 中强制横屏了。