Browse Source

1.修改播放器,增加判断是否需要返回按钮
2.修改播放器,大屏显示返回按钮并且点击变小屏,小屏点击返回可自定义方法。

zhangmengjie 5 years ago
parent
commit
ebab2f114d
2 changed files with 92 additions and 6 deletions
  1. 86 6
      pages/components/CusVideo.js
  2. 6 0
      pages/components/SchedulePage.js

+ 86 - 6
pages/components/CusVideo.js

@@ -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;
+    }
+  }
+}

+ 6 - 0
pages/components/SchedulePage.js

@@ -115,6 +115,8 @@ export default class SchedulePage extends BasePage {
             <CusVideo
               uri={this.state.video_uri}
               ref={view => (this.video = view)}
+              needback={true}
+              videoback={this.clickVideoBack.bind(this)}
               videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
               style={{
                 flex: this.state.video_flex,
@@ -280,4 +282,8 @@ export default class SchedulePage extends BasePage {
     this.video.refreshVideo();
     this.video.start();
   }
+
+  clickVideoBack() {
+    alert("click video back");
+  }
 }