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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
import React, { Component } from 'react';
import {
} from 'react-native';
export default class Youtube extends Component {
constructor(props) {
super()
this.container = null
this.buildPlayer = this.buildPlayer.bind(this)
}
render() {
return (
<div ref={(ref) => this.container = ref} />
)
}
componentDidMount() {
if (YT_READY) {
this.buildPlayer()
}
else {
setTimeout(this.buildPlayer, 250)
}
}
buildPlayer() {
this.player = new YT.Player(this.container, {
videoId: this.props.ytid,
width: "100%",
height: 400,
playerVars: {
'autohide': 1,
'autoplay': 0,
'disablekb': 0,
'cc_load_policy': 3,
'controls': 0,
'enablejsapi': 1,
'fs': 0,
'modestbranding': 1,
'iv_load_policy': 3,
'loop': 0,
'showinfo': 0,
'rel': 0,
'wmode': 'transparent',
'hd': 1
},
events: {
onReady: function(e){
e.target.playVideo()
},
onStateChange: function(e){
switch(e.data){
case -1:
// unstarted
break
case 0:
// finished
break
case 1:
// play
break
case 2:
// pause
break
case 3:
// buffering
break
case 5:
// cued
break
default:
break
}
}
}
})
}
componentDidUpdate(prevProps, prevState) {
if (! this.player) {
return
}
else if (prevProps.ytid !== this.props.ytid) {
this.player.loadVideoById( this.props.ytid )
}
}
}
let YT_READY = false
global.onYouTubeIframeAPIReady = function(){
console.log('youtube api loaded')
YT_READY = true
}
|
