Browse Source

1.增加视频全屏方法(测试阶段,防止项目崩溃,mark一下)

zhangmengjie 5 years ago
parent
commit
fb792e4fe9
2 changed files with 52 additions and 11 deletions
  1. 34 6
      pages/components/CusVideo.js
  2. 18 5
      pages/components/SchedulePage.js

+ 34 - 6
pages/components/CusVideo.js

@@ -27,7 +27,7 @@ export default class CusVideo extends React.Component {
     resizeMode: "stretch",
     duration: 0.0,
     currentTime: 0.0,
-    paused: true,
+    paused: false,
     wheel: false
   };
 
@@ -39,7 +39,12 @@ export default class CusVideo extends React.Component {
           source={{
             uri: this.props.uri
           }}
+          ref={ref => {
+            this.player = ref;
+          }}
+          // poster={this.props.poster}
           resizeMode={this.state.resizeMode}
+          // posterResizeMode={this.state.resizeMode}
           rate={this.state.rate} //播放速率
           paused={this.state.paused} //暂停
           volume={this.state.volume} //调节音量
@@ -52,6 +57,9 @@ export default class CusVideo extends React.Component {
           onAudioBecomingNoisy={this.onAudioBecomingNoisy} //音频变得嘈杂时的回调 - 应暂停视频
           onAudioFocusChanged={this.onAudioFocusChanged} //音频焦点丢失时的回调 - 如果焦点丢失则暂停
           repeat={this.state.wheel} //确定在到达结尾时是否重复播放视频。
+          onError={this.onError} // 当视频不能加载,或出错后的回调函数
+          playInBackground={false} // 当app转到后台运行的时候,播放是否暂停
+          playWhenInactive={true} // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
         />
         <View style={[styles.player_controller]}>
           <View
@@ -106,13 +114,22 @@ export default class CusVideo extends React.Component {
               {formatTime(this.state.duration)}
             </Text>
           </View>
+          <TouchableOpacity
+            style={{ flex: 1 }}
+            onPress={() => this.presentFullscreenPlayer()}
+          >
+            <View style={{ flex: 1 }}>
+              {/* //放大按钮 */}
+              <Image style={[styles.player_pause_icon]} />
+            </View>
+          </TouchableOpacity>
         </View>
       </View>
     );
   }
 
   loadStart() {
-    // alert("准备加载视频");
+    // alert("loadStart");
   }
   onLoad = data => {
     //获取的是秒数
@@ -123,6 +140,13 @@ export default class CusVideo extends React.Component {
       currentTime: data.currentTime
     });
   };
+
+  onError() {
+    alert("播放器异常");
+  }
+  onEnd() {
+    alert("播放结束");
+  }
   play() {
     if (this.state.paused) {
       this.start();
@@ -142,6 +166,11 @@ export default class CusVideo extends React.Component {
     // ToastExample.message(params);
     ToastExample.show(params, ToastExample.SHORT);
   }
+  presentFullscreenPlayer() {
+    // alert("点击调用全屏");
+    this.props.videofullScreenPlayer();
+    // this.player.presentFullscreenPlayer();
+  }
 
   refreshVideo() {
     this.setState({
@@ -158,8 +187,7 @@ const styles = StyleSheet.create({
     width: "100%",
     height: 50,
     alignItems: "center",
-    bottom: 0,
-    backgroundColor: "powderblue"
+    bottom: 0
   },
   player_pause_icon: {
     width: "100%",
@@ -170,8 +198,8 @@ const styles = StyleSheet.create({
     backgroundColor: "blue"
   },
   player_time: {
-    backgroundColor: "red",
-    fontSize: 30,
+    fontSize: 18,
+    color: "white",
     alignItems: "center",
     justifyContent: "center",
     textAlignVertical: "center",

+ 18 - 5
pages/components/SchedulePage.js

@@ -44,7 +44,7 @@ export default class SchedulePage extends BasePage {
       video_width: "0%",
       video_height: "0%",
       video_uri:
-        "https://www.apple.com/105/media/cn/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-cn-20170912_1280x720h.mp4"
+        "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
     };
   }
 
@@ -70,7 +70,12 @@ export default class SchedulePage extends BasePage {
             alignItems: "center"
           }}
         >
-          <View style={{ flex: 50, backgroundColor: "white" }}>
+          <View
+            style={{
+              flex: 50,
+              backgroundColor: "white"
+            }}
+          >
             <CourseTitle
               width={this.getWindowWidth()}
               title="第12周 爱上幼儿园"
@@ -102,6 +107,7 @@ export default class SchedulePage extends BasePage {
             <CusVideo
               uri={this.state.video_uri}
               ref={view => (this.video = view)}
+              videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
               style={{
                 flex: this.state.video_flex,
                 width: this.state.video_width,
@@ -217,12 +223,19 @@ export default class SchedulePage extends BasePage {
         width={this.getWindowWidth() * 0.9}
         height={50}
         data={data}
-        onPress={() => this.aa(data.videourl)}
+        onPress={() => this.changeUrl(data.videourl)}
       />
     );
   }
-
-  aa(url) {
+  fullScreenPlayer() {
+    alert("宽" + this.getWindowWidth());
+    alert("高:" + this.getWindowHeight());
+    this.setState({
+      video_width: this.getWindowHeight(),
+      video_height: 1111
+    });
+  }
+  changeUrl(url) {
     //切换视频并且播放
     alert(url);
     this.setState({