我在JavaScript中使用videojs。我想改变纵向横向当我点击按钮，将自动改变横向模式。但我正在使用和检查手机，但没有改变景观模式。我错过了什么，你能解决这个问题吗?如果你有什么推荐信，请告诉我。
下面是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rainbow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
<link rel="stylesheet" href="css/video-js.min.css">
<style type="text/css">
#menudisplay {
display: none;
text-align: center;
margin-top: 20vh;
font-family: 'Montserrat';
}
#menudisplay ul {
list-style-type: none;
}
#menudisplay ul li {
padding: 110px;
}
.video-js {
width: 100vw;
object-fit: contain;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background-color: lightgray;
}
.vjs-control-bar{
display: none!important;
}
</style>
</head>
<body>
<video
id="my-video"
class="video-js vjs-big-play-centered"
controls
preload="auto"
width="100%"
height="264"
poster="https://picsum.photos/800/450"
data-setup="{}"
>
<source src="https://dl8mjowvdz1rh.cloudfront.net/videos/Mentos_Pure_Fresh_Gum_Roll_1628064188337.mp4" type="video/mp4"></source>
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
<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>
<div id="menudisplay">
Sample
</div>
<br>
<br>
<br>
<br>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/video.js@7.14.3/dist/video.min.js" type="text/javascript" ></script>
<script src="js/videojs-landscape-fullscreen.min.js" type="text/javascript" ></script>
<script>
var player = videojs('my-video');
player.landscapeFullscreen();
document.addEventListener('DOMContentLoaded', e => {
var video = document.getElementById("my-video");
var menudisplay = document.getElementById("menudisplay");
video.addEventListener('ended', e => {
menudisplay.style.display = "block";
video.style.display = "none";
});
});
</script>
</body>
</html>
工作的例子:
var player = videojs('my-video');
player.landscapeFullscreen();
document.addEventListener('DOMContentLoaded', e => {
var video = document.getElementById("my-video");
var menudisplay = document.getElementById("menudisplay");
video.addEventListener('ended', e => {
menudisplay.style.display = "block";
video.style.display = "none";
});
});#menudisplay {
display: none;
text-align: center;
margin-top: 20vh;
font-family: 'Montserrat';
}
#menudisplay ul {
list-style-type: none;
}
#menudisplay ul li {
padding: 110px;
}
.video-js {
width: 100vw;
object-fit: contain;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background-color: lightgray;
}
.vjs-control-bar {
display: none!important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/video.js@7.14.3/dist/video.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-landscape-fullscreen@1.4.6/dist/videojs-landscape-fullscreen.min.js"></script>
<video
id="my-video"
class="video-js vjs-big-play-centered"
controls
preload="auto"
width="100%"
height="264"
poster="https://picsum.photos/800/450"
data-setup="{}"
>
<source
src="https://dl8mjowvdz1rh.cloudfront.net/videos/Mentos_Pure_Fresh_Gum_Roll_1628064188337.mp4"
type="video/mp4"
></source>
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
<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>
<div id="menudisplay">
Sample
</div>
<br>
<br>
<br>
<br>我认为你必须配置插件，并且需要像videojs-landscape-fullscreen文档中描述的那样，为landscapeFullscreen()提供一个对象的选项:
player.landscapeFullscreen({
fullscreen: {
enterOnRotate: true,
alwaysInLandscapeMode: true,
iOS: true
}
});
工作的例子:(使用简化的CSS进行演示)
var player = videojs('my-video');
player.landscapeFullscreen({
fullscreen: {
enterOnRotate: true,
alwaysInLandscapeMode: true,
iOS: true
}
});
document.addEventListener('DOMContentLoaded', e => {
var video = document.getElementById("my-video");
var menudisplay = document.getElementById("menudisplay");
video.addEventListener('ended', e => {
menudisplay.style.display = "block";
video.style.display = "none";
});
});.video-js {
width: 100vw;
}<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/video.js@7.14.3/dist/video.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-landscape-fullscreen@1.4.6/dist/videojs-landscape-fullscreen.min.js"></script>
<video
id="my-video"
class="video-js vjs-big-play-centered"
controls
preload="auto"
width="100%"
height="264"
poster="https://picsum.photos/800/450"
data-setup="{}"
>
<source
src="https://dl8mjowvdz1rh.cloudfront.net/videos/Mentos_Pure_Fresh_Gum_Roll_1628064188337.mp4"
type="video/mp4"
></source>
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
<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>
<div id="menudisplay">
Sample
</div>
<br>
<br>
<br>
<br>我想你是在找orientationchange:
$(window).on("orientationchange", () => {
if(screen.width > screen.height){
// change to landscape
} else {
// change to portrait
}
});