关键词：
【中文标题】使用 Flatlist 单击播放按钮以全屏（横向）播放视频【英文标题】：Play video in fullscreen(lanscape) on click of play button using Flatlist 【发布时间】：2018-07-26 12:42:59 【问题描述】：我已经使用 Flatlist 及以下库实现了视频滚动。
反应原生视频
react-native-orientation
点击播放按钮会在同一帧开始播放视频，如下所示：
我想在单击播放按钮和单击关闭按钮时以横向全屏播放视频，它应该是纵向模式。
使用的依赖项：
"dependencies":
"axios": "^0.18.0",
"native-base": "^2.7.2",
"prop-types": "^15.6.2",
"react": "16.4.1",
"react-native": "0.56.0",
"react-native-orientation": "^3.1.3",
"react-native-vector-icons": "^4.6.0",
"react-native-video": "^3.1.0",
"react-navigation": "^2.8.0"
,
当前实现的代码：
return (
<View style=styles.flatList>
<View style=styles.image>
<Video
source=
uri: item.video_url
ref=ref =>
this.player = ref;
onEnd=() =>
style=styles.videoContainer
paused=this.state.paused
muted=this.state.muted
repeat=this.state.repeat
controls=true
/>
</View>
<Text style=styles.itemTitle> item.title </Text>
</View>
);
【问题讨论】：
【参考方案1】：/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, Component from "react";
import
StyleSheet,
Text,
View,
FlatList,
TouchableHighlight,
ActivityIndicator,
SafeAreaView,
Image,
Modal,
Dimensions
from "react-native";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
import Container, Content, Header, Body, Title from "native-base";
import Video from "react-native-video";
import Orientation from "react-native-orientation";
import VideoActions from "../Redux/VideoRedux";
import connect from "react-redux";
// Styles
import styles from "./Styles/VideoListScreenStyles";
class LaunchScreen extends Component
static navigationOptions =
header: null
;
constructor(props)
super(props);
this.state =
isLoading: false,
isLoadingMore: false,
loading: true,
dataSource: [],
video_url: "",
data: [],
status: false,
muted: false,
paused: true,
repeat: false,
videos: []
;
apiParsing()
const axios = require("axios");
axios
.get("https://private-c31a5-task27.apiary-mock.com/videos")
.then(response =>
// handle success
this.setState(
isLoading: false,
dataSource: response.data.videos,
data: response.data.videos
);
console.log(response.data.videos);
)
.catch(error =>
// handle error
console.log(error);
)
.then(() =>
// always executed
);
fetchMore = () =>
const data = this.state.data.concat(this.state.dataSource);
this.setState(
isLoading: false,
data: data
);
;
componentDidMount()
// this.apiParsing();
// Orientation.unlockAllOrientations();
this.props.getVideos();
Orientation.addOrientationListener(this._orientationDidChange);
static getDerivedStateFromProps(props, state)
props.videos ? videos: props.videos : null;
return null;
_orientationDidChange = orientation =>
if (orientation === "LANDSCAPE")
console.log("Landscape Mode On");
else
;
// componentWillUnmount()
// Orientation.getOrientation((err, orientation) =>
// console.log(`Current Device Orientation: $orientation`);
// );
// Orientation.removeOrientationListener(this._orientationDidChange);
//
handlePlayAndPause = item =>
this.setState(prevState => (
paused: !prevState.paused,
video_url: item.video_url
));
;
handleVolume = () =>
this.setState(prevState => (
muted: !prevState.muted
));
;
handleRepeat = () =>
this.setState(prevState => (
repeat: !prevState.repeat
));
;
handleFullScreenToPortrait = () =>
Orientation.lockToPortrait();
this.setState(
video_url: "",
paused: true
);
;
handleFullScreenToLandscape = () =>
this.player.presentFullscreenPlayer();
Orientation.lockToLandscape();
;
onEndVideo = () =>
this.player.dismissFullscreenPlayer();
Orientation.lockToPortrait();
this.setState(
video_url: "",
paused: true
);
;
renderFooter = () =>
if (!this.state.loading) return null;
return (
this.state.isLoadingMore && (
<View
style=
paddingVertical: 10,
// borderTopWidth: 1,
borderColor: "#CED0CE"
>
<ActivityIndicator animating size="large" />
</View>
)
);
;
renderItem(item)
console.log("Image URL", item.thumbnail_url);
return (
<View style=styles.faltList>
<View style=styles.image>
<Image
style=styles.image
source=
uri: item.thumbnail_url
resizeMode="cover"
/>
<View style=styles.controlBar>
<MaterialIcons
name=this.state.paused ? "play-arrow" : "pause"
size=45
color="white"
onPress=() => this.handlePlayAndPause(item)
/>
</View>
</View>
<Text style=styles.welcome> item.title </Text>
</View>
);
render()
console.log("Image URL", this.props.videos);
if (this.state.isLoading)
return (
<View style=styles.activityIndicator>
<ActivityIndicator />
</View>
);
return (
<Container>
<Header>
<Body>
<Title> Videos </Title>
</Body>
</Header>
<View style=styles.container>
<SafeAreaView>
this.state.video_url ? (
<Video
source=
uri: this.state.video_url
ref=ref =>
this.player = ref;
onEnd=this.onEndVideo
onLoadStart=this.handleFullScreenToLandscape
// style=styles.videoContainer
paused=this.state.paused
muted=this.state.muted
repeat=this.state.repeat
onFullscreenPlayerDidDismiss=() =>
this.handleFullScreenToPortrait()
/>
) : null
<FlatList
data=this.props.videos
renderItem=( item ) => this.renderItem(item)
keyExtractor=(item, index) => index.toString()
showsVerticalScrollIndicator=false
showsHorizontalScrollIndicator=false
ListFooterComponent=this.renderFooter
onEndReached=() =>
this.setState( isLoadingMore: true , () => this.fetchMore())
onEndReachedThreshold=0.01
/>
</SafeAreaView>
</View>
</Container>
);
const mapStateToProps = state => (
videos: state.videos.videos
);
const mapDispatchToProps = dispatch => (
getVideos: () => dispatch(VideoActions.videoRequest())
);
export default connect(
mapStateToProps,
mapDispatchToProps
)(LaunchScreen);
【讨论】：
【参考方案2】：如果您使用的是 react-native-orientation，则在使用 import Orientation from 'react-native-orientation'; 导入库后，您应该能够在事件处理程序上使用 Orientation.lockToLandscape();。或者可能更好的是，您应该能够创建一个函数，该函数调用react-native-video 中可用的presentFullscreenPlayer 方法，使用它的ref 就像this.player.presentFullscreenPlayer(); 一样，它也会在像onLoadStart 这样的事件处理程序上被调用。
【讨论】：
它不起作用。应用程序在尝试打开全屏视频时崩溃。实际上，我需要一个播放按钮单击事件，然后才能全屏播放。 @JaydeepPatel 你有什么解决办法吗？ @Jaydip 请按照上面给出的答案找到我的答案。使用 MPMoviePlayerController 无法以全屏模式播放大尺寸视频
】使用MPMoviePlayerController无法以全屏模式播放大尺寸视频【英文标题】：LargesizevideonotplayinginfullscreenmodeusingMPMoviePlayerController【发布时间】：2015-05-1306:37:00【问题描述】：self.videoController=[[MPMoviePlayerControlleralloc]initWithContentURL:ur 查看详情
在 iOS 中单击全屏按钮时可以强制 MPMoviePlayerController 横向
】在iOS中单击全屏按钮时可以强制MPMoviePlayerController横向【英文标题】：CanbeforceMPMoviePlayerControllertolandscapewhenclickonFullscreenbuttoniniOS【发布时间】：2013-09-1309:46:13【问题描述】：我在detailView(UIVIew)中创建了一个MPMoviePlayerController，... 查看详情
在我的 android 应用中以全屏模式播放 youtube 视频
...oidapp【发布时间】：2012-06-2122:24:17【问题描述】：我正在使用以下代码在我的应用中播放youtube视频。startActivity(newIntent(Intent.ACTION_VIEW,Uri.parse("http://www.youtube.com/w 查看详情
全屏视频查看按钮
...:38【问题描述】：我目前正在将VideoView与MediaController一起使用，我想知道是否有一种简单的方法可以添加全屏按钮模式。这将是一个按钮，位于MediaController栏或VideoView顶部的其他位置，单击该按钮时，将以全屏模式显示视频。（... 查看详情
检测以纵向或横向全屏播放的视频
】检测以纵向或横向全屏播放的视频【英文标题】：DetectVideoplayingfullscreeninPortraitorlandscape【发布时间】：2016-03-3102:47:42【问题描述】：我参与了这两天多。请问我没有解决办法。我的要求是视频应该播放纵向、全屏、横向。我... 查看详情
iphone - 强制 MPMoviePlayerController 以横向模式播放视频
】iphone-强制MPMoviePlayerController以横向模式播放视频【英文标题】：iphone-forceMPMoviePlayerControllertoplayvideoinlandscapemode【发布时间】：2011-01-1921:04:29【问题描述】：我有一个只有纵向模式的应用，但是当用户播放视频时，我希望它以... 查看详情
向 MPMoviePlayerController 添加自定义按钮（全屏）
...的iOS应用中有一个MPMoviePlayerController实例，它以全屏模式播放本地文件。这一切都很好，但现在我想在窗口中添加一个自定义按钮来更改播放速度。我们在所有方向 查看详情
关闭 MPMoviePlayerViewController 的全屏模式时出现问题
...】：2011-09-2114:13:27【问题描述】：在我的应用程序中，我使用MPMoviePlayerViewController播放在线视频。视频在横向时应以全屏模式播放，而在旋转到纵向模式时应关闭全屏模式。 查看详情
HTML5 视频控件在 Android 设备上以全屏模式消失
...417:14:22【问题描述】：我正在开发一个跨平台应用程序，使用带有角材料前端的cordova。我在md卡列表中使用HTML5视频标签来播放带有外部url的视频。内联时，视频可以正确播放，并按预期显示本机控件。< 查看详情
如何通过单击 Android 中的按钮使 VideoView 全屏显示？
】如何通过单击Android中的按钮使VideoView全屏显示？【英文标题】：HowtomakeaVideoViewfullscreenbyclickingabuttoninAndroid?【发布时间】：2015-05-2819:43:40【问题描述】：我的片段类中有一个VideoView。还有一个按钮可让您播放和暂停视频。当我... 查看详情
如何打开 UIWebview 并全屏播放视频并强制横向？
...有没有一种简单而干净的方法可以实现这个，或者我必须使用类似MPMoviePlayerCon 查看详情
ios多个播放器同时播放，双击全屏，单击退出全屏
...放一个视频，最多同时播放4个；双击某视频让其全屏，单击再恢复原来的样子。IOS的播放器有两种，MPMoviePlayerController，AVAudioPlayer。首先我尝试的是前者，发现并不能让两个视频同时播放，当播放第二个视频的时候，第一个就... 查看详情
如何在java中以全屏独占模式处理来自键盘和鼠标的事件？
...：2011-11-1908:26:06【问题描述】：在被动渲染模式下，可以使用KeyListener和ActionListener接口来处理来自用户的事件。在全屏模式下正确的事件处理方式是什么？请扩展此框架，为鼠标单击 查看详情
如何在 Android WebView 中以横向全屏播放视频？
...7【问题描述】：我想在AndroidWebView全屏播放视频，所以我使用HTML5标签<video>并将这些网络文件放入src/main/asset/...文件夹。但是当我点击“全屏 查看详情
如何使用 Playwright 最大化弹出窗口（例如单击按钮打开弹出窗口）
】如何使用Playwright最大化弹出窗口（例如单击按钮打开弹出窗口）【英文标题】：HowtomaximizeaPopupwindowusingPlaywright(exclickingabuttontoopenPopupwindow)【发布时间】：2021-03-2120:28:11【问题描述】：我正在测试的软件有很多弹出窗口/模态窗... 查看详情
自动全屏播放 youtube 视频
...screen【发布时间】：2012-12-2601:28:18【问题描述】：我正在使用播放器在网页上播放youtube视频。视频从频道加载并自动播放。这是完美的工作。但是我希望该视频应该以全屏模式自动播放。这是播放视频的代码：<iframeframeborder="... 查看详情
如何使用 videogular2 以全屏方式默认制作视频？
】如何使用videogular2以全屏方式默认制作视频？【英文标题】：Howtomakevideobydefaultinfullscreeninangularwithvideogular2?【发布时间】：2020-01-0809:34:12【问题描述】：我目前正在与Angular项目合作，制作一个观看视频的网站。我使用Videogular... 查看详情
VideoView 在横向模式下全屏显示
...有以下带有各种元素的XML，我希望在设备处于横向模式时以全屏（如YouTube）扩展唯一的VideoView元素：<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res 查看详情