如何在移动设备上使用React Native Expo更改视频播放器的方向

huangapple go评论73阅读模式
英文:

How to change orientation of video player on a mobile device using react native expo

问题

我想能够在React Native中使用Expo更改我的视频播放器的方向。但我不知道该如何操作。

到目前为止,我已经完成了以下工作:

import { Video } from "expo-av";
import React, { useState, useRef } from "react";
import { Button, StyleSheet, View } from "react-native";

export default function App() {
  const video = React.useRef(null);
  const [status, setStatus] = React.useState({});
  return (
    <View style={styles.container}>
      <Video
        ref={video}
        style={styles.video}
        source={{
          uri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
        }}
        useNativeControls
        resizeMode="contain"
        isLooping
        onPlaybackStatusUpdate={setStatus}
      />
    </View>
  );
}

有人可以告诉我接下来该怎么做吗?

英文:

I want to be able to change the orientation of my video player in react native using expo. But I'm not able to find out how.

This is what I've done so far:

import { Video } from &quot;expo-av&quot;;
import React, { useState, useRef } from &quot;react&quot;;
import { Button, StyleSheet, View } from &quot;react-native&quot;;

export default function App() {
  const video = React.useRef(null);
  const [status, setStatus] = React.useState({});
  return (
    &lt;View style={styles.container}&gt;
      &lt;Video
        ref={video}
        style={styles.video}
        source={{
          uri: &quot;http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4&quot;,
        }}
        useNativeControls
        resizeMode=&quot;contain&quot;
        isLooping
        onPlaybackStatusUpdate={setStatus}
      /&gt;
    &lt;/View&gt;
  );
}

Could anyone help me out on how to proceed?

答案1

得分: 1

你可以使用由Expo提供的ScreenOrientation API,然后有条件地渲染你的组件。

英文:

You can use the ScreenOrientation API provided by Expo and then conditionally render your component.

huangapple
  • 本文由 发表于 2023年7月13日 19:30:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76678880.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定