|
|
@@ -0,0 +1,182 @@
|
|
|
+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;
|
|
|
+}
|
