时间戳

首页 > 解决方案 > 如何在videojs中将纵向更改为横向模式

javascript - 如何在videojs中将纵向更改为横向模式

问题描述

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

标签： javascript

解决方案

我认为您必须配置插件，并且需要提供一个对象，其中包含 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>

推荐阅读