通过在移动设备上使用 plyr.io 最大化来强制横向模式？答案

【问题标题】：Force landscape mode by maximizing with plyr.io on mobile?通过在移动设备上使用 plyr.io 最大化来强制横向模式？
【发布时间】：2019-07-27 22:58:26
【问题描述】：

嗨社区我想解决一个问题，我目前正在使用plyr.io作为播放器，具体是当你想在手机上全屏观看视频时，播放器在纵向模式下最大化, 将有某种方式通过自动最大化它仅在移动设备上处于横向模式，即使最小化返回纵向，即使手机处于纵向模式。

这是我的代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Plyr</title>
  <!-- Plyr style -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.5.6/plyr.css" />

</head>

<body>
  <!-- Plyr -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/plyr/3.5.6/plyr.min.js"></script>

  <video id="player" poster="https://i.imgur.com/YC9U2uc.jpg" controls crossorigin>
  </video>
</body>

<script type="text/javascript">
  const player = new Plyr('#player');
  player.source = {
    type: 'video',
    title: 'Sintel',
    sources: [{
        src: '//iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.webm',
        type: 'video/mp4',
      }

    ],
    tracks: [{
        kind: 'captions',
        label: 'English',
        srclang: 'en',
        src: '//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-en.vtt',
        default: false,
      },
      {
        kind: 'captions',
        label: 'German',
        srclang: 'de',
        src: '//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-de.vtt',
      },
    ],
  };
</script>

</html>

我尝试过使用 CSS 代码，但不是很好，因为它只旋转视频，不旋转控件或海报，当应用最大化时它适用：

transform: rotate(90deg) scale(1.75);

我认为最好使用 JavaScript，在此先感谢您。

来源：https://plyr.io/

【问题讨论】：

标签： javascript html css video mobile

【解决方案1】：

你可以试试这个：

screen.orientation.lock('landscape');

如此处所述：

https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

【讨论】：

【解决方案2】：

plyr.io 特定，使用 enterfullscreen 和 exitfullscreen 事件以及屏幕方向：

player.on('enterfullscreen', event => {
    screen.orientation.lock('landscape');
});

player.on('exitfullscreen', event => {
    screen.orientation.lock('portrait');
});

【讨论】：

【解决方案3】：

var winwidth=$(window).width();
        var winheight=$(window).height();

        const player = Plyr.setup('#player');
        player.forEach (item => {

            item.on('enterfullscreen', event => {

             $(".plyr__video-wrapper").css({"transform": "rotate(90deg)", "height": winwidth, "width": winheight, "margin-left": "0px", "margin-right": "0px"});
            })
            item.on('exitfullscreen', event => {
             $(".plyr__video-wrapper").css({"transform": "rotate(0deg)", "height": "100%", "width": "100%", "margin-left": "auto", "margin-right": "auto"});
            })
        });

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。