我正在尝试通过react-native使用av-expo视频来实现这一点。
我想做的是直接全屏启动视频,而不需要通过“视频”堆栈(不需要双重加载MediaPlayerScreen堆栈+本机全屏堆栈)。
如果用户通过原生全屏输出按钮静音全屏,那么我们直接回到一个堆栈
我们的想法是只使用原生全屏堆栈来显示视频。这可能吗?
我不知道我是否清楚,如果它可以帮助理解,这里是我的MediaPlayerScreen组件的代码
export class MediaPlayerScreen extends Component {
static navigationOptions = {
//header: null,
headerTitle: '',
headerTransparent: false,
headerTintColor: 'white',
}
constructor(props) {
super(props)
this.AG = AG.instance
this.filePath =
this.AG.getFilePath() + props.navigation.state.params.file
this.windowWidth = Dimensions.get('window').width
this.windowHeight = Dimensions.get('window').height
}
//
onPlaybackStatusUpdate = (playbackStatus) => {
if (playbackStatus.didJustFinish) {
this.props.navigation.goBack()
}
}
//
_handleVideoRef = async (component) => {
const playbackObject = component
if (playbackObject) {
await playbackObject.loadAsync({
uri: this.filePath,
shouldPlay: false,
posterSource: this.poster,
})
// todo: Trigger fullScreen without videoStack loading
//playbackObject.presentFullscreenPlayer();
playbackObject.playAsync()
//playbackObject.setOnPlaybackStatusUpdate(this.onPlaybackStatusUpdate);
}
}
componentDidMount() {
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE)
}
componentWillUnmount() {
//playbackObject.dismissFullscreenPlayer();
//this.props.navigation.goBack();
ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.PORTRAIT_UP
)
}
onFullscreenUpdate = ({ fullscreenUpdate, status }) => {
console.log(fullscreenUpdate, status)
switch (fullscreenUpdate) {
case Video.FULLSCREEN_UPDATE_PLAYER_WILL_PRESENT:
console.log(' the fullscreen player is about to present')
break
case Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT:
console.log('the fullscreen player just finished presenting')
break
case Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS:
console.log('the fullscreen player is about to dismiss')
break
case Video.FULLSCREEN_UPDATE_PLAYER_DID_DISMISS:
console.log('the fullscreen player just finished dismissing')
}
}
render() {
return (
<SafeAreaView style={styles.container}>
<Video
ref={this._handleVideoRef}
useNativeControls
rate={1.0}
resizeMode="contain"
onPlaybackStatusUpdate={(playbackStatus) =>
this.onPlaybackStatusUpdate(playbackStatus)
}
onFullscreenUpdate={this.onFullscreenUpdate}
style={{
width: this.windowHeight,
height: this.windowWidth,
}}
/>
</SafeAreaView>
)
}
}
谢谢你的帮助
Meums/
2条答案
按热度按时间vsmadaxz1#
嘿,如果我没有误解你的意思,你想通过www.example.com全屏加载播放器default.you可以遵循这种方法:
zf9nrax12#
1.基本上,一个小的解决方法是在视图中渲染视频组件,其中视图的样式将高度和宽度设置为1(它将不可见)。
1.您还需要设置视频参考。
然后,你可以使用这个useEffect:
因此,当视频将被加载,它将开始在全屏模式(或它将看起来像那样)。
注意:如果你使用的是底部表单,模态等,你仍然可以使用相同的方法-渲染视频组件的地方,它将不会是可见的,然后启动全屏使用视频的参考。
我也不确定,如果视频加载两次,你会传递source={{uri:“"}”}添加到视频组件。