efunbox-mobile-8/pages/components/CusVideo.js

import React, { Component } from "react";
import {
  Platform,
  Text,
  View,
  ImageBackground,
  Button,
  Image,
  TouchableOpacity,
  StyleSheet
} from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import Video from "react-native-video";
import SeekBar from "../components/SeekBar";
const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

type Props = {};
export default class CusVideo extends React.Component {
  state = {
    rate: 1,
    volume: 1,
    muted: false,
    resizeMode: "stretch",
    duration: 0.0,
    currentTime: 0.0,
    paused: false,
    wheel: false,
    player_status_icon: require("../images/video/start.png"),
    isFull: false,
    needback: this.props.needback
  };

  render() {
    return (
      <View style={this.props.style}>
        <Video
          style={{ flex: 1 }}
          source={{
            uri: this.props.uri
          }}
          ref={ref => {
            this.player = ref;
          }}
          // poster={this.props.poster}
          resizeMode={this.state.resizeMode}
          // posterResizeMode={this.state.resizeMode}
          onBuffer={this.onBuffer}
          rate={this.state.rate} //播放速率
          paused={this.state.paused} //暂停
          volume={this.state.volume} //调节音量
          muted={this.state.muted} //控制音频是否静音
          resizeMode={this.state.resizeMode} //缩放模式
          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} // 当视频不能加载，或出错后的回调函数
          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={{
              flex: 1,
              alignItems: "center"
            }}
          >
            {/* 暂停播放按钮 */}
            <TouchableOpacity
              //点击事件放在这个组件里才管用
              style={{
                justifyContent: "center",
                width: "100%",
                height: "100%"
              }}
              onPress={() => this.play()}
            >
              <Image
                style={[styles.player_pause_icon]}
                source={this.state.player_status_icon}
              />
            </TouchableOpacity>
          </View>
          <View style={{ flex: 2 }}>
            {/* //左侧当前播放时长 */}
            <Text style={[styles.player_time]}>
              {formatTime(this.state.currentTime)}
            </Text>
          </View>
          <View
            style={{
              flex: 9,
              overflow: "hidden"
            }}
          >
            {/* //中间进度条 */}
            <SeekBar
              style={{ flex: 1 }}
              ref={view => (this.seekbar = view)}
              //必须带此方法，作为滑动之后抬起的回调
              touchUpCallBack={this.touch_up_callback.bind(this)}
            />
          </View>
          <View style={{ flex: 2 }}>
            {/* //右侧总时长 */}
            <Text style={[styles.player_time]}>
              {formatTime(this.state.duration)}
            </Text>
          </View>
          <View
            style={{
              flex: 1,
              alignItems: "center"
            }}
          >
            <TouchableOpacity
              style={{
                justifyContent: "center",
                width: "100%",
                height: "100%"
              }}
              onPress={() => this.presentFullscreenPlayer()}
            >
              {/* //放大按钮 */}
              <Image
                style={[styles.fullscreen_icon]}
                source={require("../images/video/fullscreen.png")}
              />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }

  loadStart() {
    // alert("loadStart");
  }
  onBuffer({ isBuffering }: { isBuffering: boolean }) {
    //true为正在加载，false为没有加载，此处给loading提示
    console.log("isBuffering:" + isBuffering);
  }
  onLoad = data => {
    //获取的是秒数
    this.setState({ duration: data.duration });
    this.seekbar.setMax(data.duration);
  };
  onProgress = data => {
    this.setState({
      currentTime: data.currentTime
    });
    this.seekbar.setProgress(this.state.currentTime);
  };

  onError() {
    alert("播放器异常");
  }
  onEnd() {
    alert("播放结束");
  }
  play() {
    if (this.state.paused) {
      this.start();
    } else {
      this.pause();
    }
  }
  pause() {
    this.setState({
      paused: true,
      player_status_icon: require("../images/video/start.png")
    });
    this.player_icon_index = 1;
  }
  start() {
    this.setState({
      paused: false,
      player_status_icon: require("../images/video/pause.png")
    });
    this.player_icon_index = 0;
  }
  showToast(params) {
    // ToastExample.message(params);
    ToastExample.show(params, ToastExample.SHORT);
  }
  seekTo(progress) {
    this.player.seek(progress);
  }
  presentFullscreenPlayer() {
    if (this.state.isFull) {
      this.setState({
        isFull: false,
        needback: this.props.needback
      });
    } else {
      this.setState({
        isFull: true,
        needback: true
      });
    }

    this.props.videofullScreenPlayer();
    this.seekbar.setProgress(this.state.currentTime);
  }
  touch_up_callback(progress) {
    //抬起之后，获取算出来的progress
    this.setState({
      currentTime: progress
    });
    this.seekTo(progress);
  }

  refreshVideo() {
    this.setState({
      duration: 0,
      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({
  player_controller: {
    flexDirection: "row",
    position: "absolute",
    width: "100%",
    height: 50,
    alignItems: "center",
    justifyContent: "center",
    bottom: 0
  },
  player_pause_icon: {
    width: "80%",
    resizeMode: "center",
    height: "40%",
    justifyContent: "center",
    alignItems: "center",
    left: 5
  },
  fullscreen_icon: {
    width: "80%",
    resizeMode: "center",
    height: "30%",
    justifyContent: "center",
    alignItems: "center"
  },
  player_time: {
    fontSize: 18,
    color: "white",
    alignItems: "center",
    justifyContent: "center",
    textAlignVertical: "center",
    textAlign: "center"
  }
});

/**
 * 将秒转换为 分:秒
 * s int 秒数
 */
function formatTime(s) {
  //计算分钟
  //算法：将秒数除以60，然后下舍入，既得到分钟数
  var h;
  h = Math.floor(s / 60);
  //计算秒
  //算法：取得秒%60的余数，既得到秒数
  s = Math.round(s % 60);
  //将变量转换为字符串
  h += "";
  s += "";
  //如果只有一位数，前面增加一个0
  h = h.length == 1 ? "0" + h : h;
  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;
    }
  }
}

/**
  使用方法
  <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,
         width: this.state.video_width,
         height: this.state.video_height
         }}
   />


 */