Browse Source

1.增加课程表界面点击同一个视频的问题
2.增加播放器控制器5秒隐藏

zhangmengjie 5 years ago
parent
commit
4f8bde1871
2 changed files with 45 additions and 17 deletions
  1. 26 9
      pages/components/CusVideo.js
  2. 19 8
      pages/components/SchedulePage.js

+ 26 - 9
pages/components/CusVideo.js

@@ -26,6 +26,7 @@ export default class CusVideo extends React.Component {
     super(props);
     this.pressStatus = false;
     this.progress = 0;
+    this.time_hideController;
   }
   config = {
     changeX: 0,
@@ -99,11 +100,11 @@ export default class CusVideo extends React.Component {
           onLoadStart={this.loadStart} // 当视频开始加载时的回调函数
           onLoad={this.onLoad} //加载媒体并准备播放时调用的回调函数。
           onProgress={this.onProgress} //视频播放过程中每个间隔进度单位调用的回调函数
-          onEnd={this.onEnd} //视频播放结束时的回调函数
           onAudioBecomingNoisy={this.onAudioBecomingNoisy} //音频变得嘈杂时的回调 - 应暂停视频
           onAudioFocusChanged={this.onAudioFocusChanged} //音频焦点丢失时的回调 - 如果焦点丢失则暂停
           repeat={this.state.wheel} //确定在到达结尾时是否重复播放视频。
-          onError={this.onError} // 当视频不能加载,或出错后的回调函数
+          onError={this.onError.bind(this)} // 当视频不能加载,或出错后的回调函数
+          onEnd={this.onEnd.bind(this)} //视频播放结束时的回调函数
           playInBackground={false} // 当app转到后台运行的时候,播放是否暂停
           playWhenInactive={true} // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
         />
@@ -159,11 +160,9 @@ export default class CusVideo extends React.Component {
         } else {
           this.showController();
         }
-        console.log("onPanResponderGrant");
       },
       onPanResponderStart: (evt, gestureState) => {
         this.pressStatus = true;
-        console.log("onPanResponderStart");
       },
       onPanResponderMove: (evt, gestureState) => {
         this.config.yDiff = evt.nativeEvent.pageY - this.config.changeY;
@@ -173,7 +172,6 @@ export default class CusVideo extends React.Component {
       },
       onPanResponderEnd: (evt, gestureState) => {
         this.pressStatus = true;
-        console.log("onPanResponderEnd");
       },
       onPanResponderTerminationRequest: (evt, gestureState) => true,
       onPanResponderRelease: (evt, gestureState) => {
@@ -191,6 +189,16 @@ export default class CusVideo extends React.Component {
         return false;
       }
     });
+    if (this.state.show_controller) {
+      this.time_hideController = setTimeout(() => {
+        this.setState({
+          show_controller: false
+          // needback: false
+        });
+        this.bottomcontroller.setBottom(-50);
+        this.topcontroller.setTop(-50);
+      }, 5000);
+    }
   }
 
   loadStart() {
@@ -202,7 +210,6 @@ export default class CusVideo extends React.Component {
     this.setState({
       show_loading: isBuffering
     });
-    console.log("isBuffering:" + isBuffering);
   }
   onLoad = data => {
     //获取的是秒数
@@ -220,10 +227,10 @@ export default class CusVideo extends React.Component {
   };
 
   onError() {
-    alert("播放器异常");
+    this.props.onError();
   }
   onEnd() {
-    alert("播放结束");
+    this.props.onEnd();
   }
   play() {
     //controller的play点击无法换图...
@@ -280,6 +287,7 @@ export default class CusVideo extends React.Component {
       duration: 0,
       currentTime: 0
     });
+    this.bottomcontroller.setProgress(0);
   }
 
   videoBackClick() {
@@ -293,12 +301,22 @@ export default class CusVideo extends React.Component {
     }
   }
   showController() {
+    clearTimeout(this.time_hideController);
     this.setState({
       show_controller: true
       // needback: this.props.needback
     });
     this.bottomcontroller.setBottom(0);
+    this.bottomcontroller.setProgress(this.state.currentTime);
     this.topcontroller.setTop(0);
+    this.time_hideController = setTimeout(() => {
+      this.setState({
+        show_controller: false
+        // needback: false
+      });
+      this.bottomcontroller.setBottom(-50);
+      this.topcontroller.setTop(-50);
+    }, 5000);
   }
   hideController() {
     this.setState({
@@ -413,7 +431,6 @@ class Loading extends Component {
   }
 
   changeIndex() {
-    console.log("this.loading_index :" + this.loading_index);
     setTimeout(() => {
       if (this.loading_index > this.props.loading_arr.length - 2) {
         this.loading_index = 0;

+ 19 - 8
pages/components/SchedulePage.js

@@ -55,7 +55,8 @@ export default class SchedulePage extends BasePage {
       video_frame_height: "32%",
       seat_height: "2%",
       flatlist_height: "60%",
-      isFull: false
+      isFull: false,
+      playing_key: 0
     };
   }
 
@@ -218,8 +219,7 @@ export default class SchedulePage extends BasePage {
                   typecolor: "#3397F0",
                   typename: "欢乐音乐",
                   videoname: "小鸡捉虫子",
-                  videourl:
-                    "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
+                  videourl: "http://chimee.org/vod/1.mp4"
                 }
               ]}
             />
@@ -232,6 +232,8 @@ export default class SchedulePage extends BasePage {
           needback={false}
           videoback={() => alert("videoback")}
           videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
+          onError={this.onError.bind(this)}
+          onEnd={this.onEnd.bind(this)}
           style={{
             left: this.state.x,
             top: this.state.y,
@@ -250,10 +252,17 @@ export default class SchedulePage extends BasePage {
         width={this.getWindowWidth() * 0.9}
         height={50}
         data={data}
-        onPress={() => this.changeUrl(data.videourl)}
+        onPress={() => this.changeUrl(data)}
       />
     );
   }
+  onError() {
+    alert("播放器异常");
+  }
+  onEnd() {
+    alert("播放结束");
+    this.video.refreshVideo();
+  }
   fullScreenPlayer() {
     if (!this.state.isFull) {
       Orientation.lockToLandscape();
@@ -285,13 +294,15 @@ export default class SchedulePage extends BasePage {
       });
     }
   }
-  changeUrl(url) {
+  changeUrl(data) {
     //切换视频并且播放
     // alert(url);
+    if (this.state.playing_key == data.key) {
+      return;
+    }
     const handle = findNodeHandle(this.video_image);
     setTimeout(() => {
       UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
-        console.warn(x, y, width, height, pageX, pageY);
         this.setState({
           x: pageX,
           y: pageY,
@@ -302,12 +313,12 @@ export default class SchedulePage extends BasePage {
           videoImage_x: pageX,
           videoImage_y: pageY,
           video_show: true,
-          video_uri: url
+          video_uri: data.videourl,
+          playing_key: data.key
         });
       });
     }, 0);
 
-    this.video.refreshVideo();
     this.video.start();
   }
 }