|
@@ -30,7 +30,9 @@ export default class CusVideo extends React.Component {
|
|
|
currentTime: 0.0,
|
|
|
paused: false,
|
|
|
wheel: false,
|
|
|
- player_status_icon: require("../images/video/start.png")
|
|
|
+ player_status_icon: require("../images/video/start.png"),
|
|
|
+ isFull: false,
|
|
|
+ needback: this.props.needback
|
|
|
};
|
|
|
|
|
|
render() {
|
|
@@ -64,6 +66,42 @@ export default class CusVideo extends React.Component {
|
|
|
playInBackground={false} // 当app转到后台运行的时候,播放是否暂停
|
|
|
playWhenInactive={true} // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
|
|
|
/>
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ flexDirection: "row",
|
|
|
+ position: "absolute",
|
|
|
+ width: "100%",
|
|
|
+ height: 50,
|
|
|
+ alignItems: "center",
|
|
|
+ justifyContent: "center"
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ flex: 1,
|
|
|
+ alignItems: "center"
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <VideoBack
|
|
|
+ needback={this.state.needback}
|
|
|
+ videoback={this.videoBackClick.bind(this)}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View style={{ flex: 2 }} />
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ flex: 9,
|
|
|
+ overflow: "hidden"
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <View style={{ flex: 2 }} />
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ flex: 1,
|
|
|
+ alignItems: "center"
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
<View style={[styles.player_controller]}>
|
|
|
<View
|
|
|
style={{
|
|
@@ -193,12 +231,19 @@ export default class CusVideo extends React.Component {
|
|
|
this.player.seek(progress);
|
|
|
}
|
|
|
presentFullscreenPlayer() {
|
|
|
- // alert("点击调用全屏");
|
|
|
+ if (this.state.isFull) {
|
|
|
+ this.setState({
|
|
|
+ isFull: false,
|
|
|
+ needback: this.props.needback
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.setState({
|
|
|
+ isFull: true,
|
|
|
+ needback: true
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
this.props.videofullScreenPlayer();
|
|
|
- console.log("currentTime:" + this.state.currentTime);
|
|
|
- setTimeout(() => {
|
|
|
- this.seekbar.setProgress(this.state.currentTime);
|
|
|
- }, 10);
|
|
|
}
|
|
|
touch_up_callback(progress) {
|
|
|
//抬起之后,获取算出来的progress
|
|
@@ -214,6 +259,17 @@ export default class CusVideo extends React.Component {
|
|
|
currentTime: 0
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+ videoBackClick() {
|
|
|
+ // if (this.props.needback != undefined && this.props.needback) {
|
|
|
+ // }
|
|
|
+ if (this.state.isFull) {
|
|
|
+ //全屏状态下,变小屏
|
|
|
+ this.presentFullscreenPlayer();
|
|
|
+ } else {
|
|
|
+ this.props.videoback();
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
@@ -271,3 +327,27 @@ function formatTime(s) {
|
|
|
s = s.length == 1 ? "0" + s : s;
|
|
|
return h + ":" + s;
|
|
|
}
|
|
|
+class VideoBack extends Component {
|
|
|
+ render() {
|
|
|
+ if (this.props.needback) {
|
|
|
+ return (
|
|
|
+ <TouchableOpacity
|
|
|
+ //点击事件放在这个组件里才管用
|
|
|
+ style={{
|
|
|
+ justifyContent: "center",
|
|
|
+ width: "100%",
|
|
|
+ height: "100%"
|
|
|
+ }}
|
|
|
+ onPress={() => this.props.videoback()}
|
|
|
+ >
|
|
|
+ <Image
|
|
|
+ style={[styles.player_pause_icon]}
|
|
|
+ source={require("../images/video/back.png")}
|
|
|
+ />
|
|
|
+ </TouchableOpacity>
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|