javascript 强制横向模式最大化与plyr.io在移动的？

lnlaulya 于 2023-08-02 发布在 Java

关注(0)|答案(4)|浏览(101)

嗨社区我想解决一个问题，我目前使用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

来源：https://stackoverflow.com/questions/57236677/force-landscape-mode-by-maximizing-with-plyr-io-on-mobile

4条答案

按热度按时间

rekjcdws1#

你可以试试这个：

screen.orientation.lock('landscape');

字符串
如下所述：
https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

赞(0）回复(0）举报 2023-08-02

wfypjpf42#

特定于plyr.io，使用enterfullscreen和exitfullscreen事件沿着屏幕方向：

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

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

字符串

赞(0）回复(0）举报 2023-08-02

n3h0vuf23#

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"});
            })
        });

字符串

赞(0）回复(0）举报 2023-08-02

p5fdfcr14#

document.addEventListener('DOMContentLoaded', () => {
    // Listen for the full-screen change event
    document.addEventListener('fullscreenchange', () => {
        if (document.fullscreenElement) {
            // Entered full-screen mode, try to lock the screen orientation
            if (screen.orientation && screen.orientation.lock) {
                screen.orientation.lock('landscape').catch(error => {
                    console.error('Error locking screen orientation:', error);
                });
            }
        } else {
            // Exited full-screen mode, try to unlock the screen orientation
            if (screen.orientation && screen.orientation.unlock) {
                screen.orientation.unlock().catch(error => {
                    console.error('Error unlocking screen orientation:', error);
                });
            }
        }
    });
});

字符串

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 强制横向模式最大化与plyr.io在移动的？

4条答案

相关问题

热门标签

最新问答