【问题标题】:How to switch to full screen(rotate to landscape on click of full-screen button on YouTube player gui) in React Native youtube iframe?如何在 React Native youtube iframe 中切换到全屏(单击 YouTube 播放器 gui 上的全屏按钮旋转到横向)?
【发布时间】:2023-03-10 01:15:01
【问题描述】:

我想通过单击播放器 gui 上的全屏按钮将播放器切换到横向模式。我正在使用博览会,所以我使用博览会方向,我可以通过调用 onfullscreenchange 道具上的函数切换到横向模式,但是在退出全屏模式后,应用程序被锁定在横向模式。我该如何解决?

我的代码:

VideoPlayer.js

    import React from "react";
    import { View, Dimensions } from "react-native";
    import YoutubePlayer from "react-native-youtube-iframe";
    
    import * as ScreenOrientation from "expo-screen-orientation";
    
    const VideoPlayer = () => {
      function setOrientation() {
        if (Dimensions.get("window").height > Dimensions.get("window").width) {
          //Device is in portrait mode, rotate to landscape mode.
          ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
        } else {
          //Device is in landscape mode, rotate to portrait mode.
          ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
        }
      }
    
      return (
        <View
          style={{
            width: "100%",
            height: 220,
          }}
        >
          <YoutubePlayer
            height={300}
            play={false}
            videoId={"Dv7gLpW91DM"}
            onFullScreenChange={setOrientation}
          />
        </View>
      );
    };
    
    export default VideoPlayer;

【问题讨论】:

    标签: react-native iframe youtube-api expo youtube-iframe-api


    【解决方案1】:

    您可以使用从 onFullScreenChange 返回的布尔值来确定播放器是否处于全屏状态,然后从那里设置正确的方向,我现在无法测试,但应该是这样的

    onFullScreenChange={isFullscreen => { 
        if(isFullscreen) { setOrientationToPortrait() } 
        else { setOrientationToLandscape() }
    }
    

    【讨论】:

    • 是的,谢谢你的帮助
    猜你喜欢
    • 2017-01-29
    • 2015-07-31
    • 2012-09-03
    • 1970-01-01
    • 2017-02-22
    • 2013-05-21
    • 1970-01-01
    • 1970-01-01
    • 2013-02-26
    相关资源
    最近更新 更多