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";
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: true,
    wheel: false
  };

  render() {
    return (
      <View style={this.props.style}>
        <Video
          style={{ flex: 1 }}
          source={{
            uri: this.props.uri
          }}
          resizeMode={this.state.resizeMode}
          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} //确定在到达结尾时是否重复播放视频。
        />
        <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={require("../imgs/player_image_state_pause.png")}
              />
            </TouchableOpacity>
          </View>
          <View style={{ flex: 3 }}>
            {/* //左侧当前播放时长 */}
            <Text style={[styles.player_time]}>
              {formatTime(this.state.currentTime)}
            </Text>
          </View>
          <View style={{ flex: 7, backgroundColor: "yellow" }}>
            {/* //中间进度条 */}
            {/* <SeekBar
                style={{
                  flex: 1,
                  alignItems: "center",
                  justifyContent: "center",
                  width: "100%"
                }}
                max={this.state.duration}
                progress={this.state.currentTime}
              /> */}
          </View>
          <View style={{ flex: 3 }}>
            {/* //右侧总时长 */}
            <Text style={[styles.player_time]}>
              {formatTime(this.state.duration)}
            </Text>
          </View>
        </View>
      </View>
    );
  }

  loadStart() {
    // alert("准备加载视频");
  }
  onLoad = data => {
    //获取的是秒数
    this.setState({ duration: data.duration });
  };
  onProgress = data => {
    this.setState({
      currentTime: data.currentTime
    });
  };
  play() {
    this.setState({ paused: !this.state.paused });
    // if (this.state.paused) {
    //   this.player_icon_index = 1;
    // } else {
    //   this.player_icon_index = 0;
    // }
  }
  showToast(params) {
    // ToastExample.message(params);
    ToastExample.show(params, ToastExample.SHORT);
  }
}

const styles = StyleSheet.create({
  player_controller: {
    flexDirection: "row",
    position: "absolute",
    width: "100%",
    height: 50,
    alignItems: "center",
    bottom: 0,
    backgroundColor: "powderblue"
  },
  player_pause_icon: {
    width: "100%",
    resizeMode: "center",
    height: "80%",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "red"
  },
  player_time: {
    backgroundColor: "red",
    fontSize: 30,
    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;
}