rax/examples/components/VideoDemo.js at master · buaaljy/rax · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import {createElement, Component} from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Image from 'rax-image';
import Link from 'rax-link';
import TextInput from 'rax-textinput';
import Button from 'rax-button';
import Switch from 'rax-switch';
import ScrollView from 'rax-scrollview';
import TouchableHighlight from 'rax-touchable';
import Video from 'rax-video';


class VideoDemo extends Component {
  state = {
    playControl: null
  };
  render() {
    return (
      <View style={styles.container}>
       <Text>controls=false playControl=play|pause</Text>
       <Video
         style={{
           flex: 1,
           height: 350
         }}
         autoPlay={false}
         controls={false}
         playControl={this.state.playControl}
         src="http://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4"
        />

        <Button onPress={() => {
          let playControl = this.state.playControl !== 'play' ? 'play' : 'pause';
          this.setState({
            playControl
          });
        }}>
          Play or Pause
        </Button>

        <Text>muted=true</Text>
        <Video
          style={{
            flex: 1,
            height: 350
          }}
          autoPlay={false}
          muted={true}
          src="http://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4"
         />
      </View>
    );
  }
}

let styles = {
  container: {
    padding: 20,
    borderStyle: 'solid',
    borderColor: '#dddddd',
    borderWidth: 1,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 10,
  },
  box: {
    backgroundColor: '#527FE4',
    borderColor: '#000033',
    borderWidth: 1,
  },
};

export default VideoDemo;