<!DOCTYPE html>
<html>
<head>
<title>浏览器全屏时横屏播放的demo</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden;
}
video {
width: 100%;
height: 100%;
object-fit: fill;
transform: none; /* 触发软件渲染层 */
}
/* 禁用硬件加速 */
.no-acceleration {
background-color: black; /* 绿屏时显示黑色背景 */
transform: translateZ(0); /* 触发不同渲染路径 */
will-change: auto; /* 避免触发硬件加速 */
backface-visibility: hidden; /* 可选：避免 3D 变换导致的加速 */
}
</style>
</head>
<body>
<script type="text/javascript">
var video = document.querySelector('video');
// 进入全屏
function requestFullscreen() {
video.webkitRequestFullscreen();
return 1;
}
// 退出全屏
function exitFullscreen() {
document.webkitExitFullscreen();
return 0;
}
// 监听全屏变化事件
document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement) {
// 进入全屏时，将视频旋转90度-->
video.style.transform = 'rotate(90deg)';
video.style.width = '100vh';
video.style.height = '100vw';
} else {
// 退出全屏时，将视频旋转回来-->
video.style.transform = 'none';
video.style.width = '100%';
video.style.height = '100%';
}
});
// 监听窗口大小变化事件
window.addEventListener('resize', function() {
if (document.fullscreenElement) {
// 窗口大小变化时，调整视频大小
video.style.width = '100vh';
video.style.height = '100vw';
}
});
// 点击播放按钮时，进入全屏
video.addEventListener('play', function() {
requestFullscreen();
video.style.transform = 'rotate(90deg)';
video.style.width = '100vh';
video.style.height = '100vw';
});
// 点击退出按钮时，退出全屏
video.addEventListener('ended', function() {
exitFullscreen();
});
</script>
</body>
</html>
```
