React原生视频Android定位

myzjeezk 于 2022-12-02 发布在 Android

关注(0)|答案(2)|浏览(164)

我在Android横向模式下播放视频时遇到了问题。它在iOS上运行正常。
我使用“react-native-video”加载和播放视频。禁用控件和全屏。我添加了自己的按钮来切换全屏。下面是我的全屏按钮功能。基本上，它会使用“react-native-orientation-locker”将屏幕锁定为横向，并调整视频的风格。在Android上，它确实旋转了，但视频没有显示在屏幕的全高。看起来宽度和高度没有改变，只是从纵向旋转。在视频的底部和左侧有一些黑色区域。有趣的是，当我试图将“controls={true}”设置为视频时，我发现视频播放器/控件以横向方式显示在屏幕的整个宽度上，但视频仍然在屏幕的角落里！而且这只发生在Android上。在iOS上运行良好。

环境：

React Native0.61.5
React原生视频5.0.2
React-本机-定向-锁定器1.1.8
React原生CLI（非Expo）
在Android模拟器（9.0 Pie API 28）和Android 10.0中的实际Android设备上进行测试

onPressFullScreen(){
        if (this.state.isFullScreen == false){
          Orientation.lockToLandscape();
          this.setState({
            isFullScreen: true, 
            fullModeText: 'Exit Full Screen',
            cssContainerBgColor: 'black',
            cssVideoControlTop: 0,
            cssVideoMarginTop: 0,
            reizeMode: 'cover',
            cssVideoWidth: null,
            cssVideoHeight: '100%',
            cssVideoMarginLeft: 'auto',
            cssVideoMarginRight: 'auto',
          });
        } else {
          Orientation.unlockAllOrientations();
          this.setState({
            isFullScreen: false, 
            fullModeText: 'Full Screen',
            cssContainerBgColor: 'red',
            cssVideoControlTop: 50,
            cssVideoMarginTop: 50,
            reizeMode: 'cover',
            cssVideoWidth: '100%',
            cssVideoHeight: null,
            cssVideoMarginLeft: '0%',
            cssVideoMarginRight: '0%',
          });
        }
      }

android

来源：https://stackoverflow.com/questions/60389971/react-native-video-android-orientation

2条答案

按热度按时间

9gm1akwq1#

这是我的解决方法

import React from 'react'
import { View, Text , StyleSheet , Dimensions ,StatusBar } from 'react-native'
import Video from 'react-native-video';

const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;

const dummyVideoUrl2 =
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4';

export default function VideoHorizontal() {

    return (
        <View style={{flex:1 ,backgroundColor : 'black'}}>
             <Video
          style= {{ ...styles.video , transform : [{rotate : '90deg'}] ,
          flex : 1,
           left : -screenWidth/2 ,
        width : screenHeight,
           backgroundColor : 'teal' }}
          source={{ uri: dummyVideoUrl2 }} //dummyVideoUrl3
          resizeMode={'contain'}
          repeat={true}
          onError={(e) => {
            console.log('video error' + e);
          }}
        />
        </View>
    )
}

// ===============================================
//               STYLESHEET
//================================================
const styles = StyleSheet.create({
    container: {
      width: '100%',
      height: screenHeight,
    },
    video: {
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
    
    },
})

使用调整大小模式“包含”并且不为视频变换指定任何高度在样式宽度中为90度：screenHeight（尺寸.get（'window'）.高度）
在这之后，由于某种原因，视频是一半的屏幕在右边
所以我加了一句
left：-屏幕宽度/2
我知道这可能不是最好的解决方案，但它目前正在工作

赞(0）回复(0）举报 2022-12-02

uurity8g2#

只需为视频标记给予width：'100% '

<Video
      style={{width:'100%',height:400}}
       source={video}/>

赞(0）回复(0）举报 2022-12-02

我来回答

React原生视频Android定位

2条答案

相关问题

热门标签

最新问答