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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
MX.Youtube = MX.Object3D.extend({
init: function (ops) {
this.type = "Youtube"
this.media = ops.media
this.width = ops.media.width
this.height = ops.media.height
this.x = ops.x || 0
this.y = ops.y || 0
this.z = ops.z || 0
this.rotationX = ops.rotationX || 0
this.rotationY = ops.rotationY || 0
this.rotationZ = ops.rotationZ || 0
this.scale = ops.scale || 1
this.backface = ops.backface || false
ops.className && this.el.classList.add(ops.className)
this.backface && this.el.classList.add("backface-visible")
this.el.classList.add("video")
this.paused = true
this.load()
},
load: function (ops) {
var base = this
var uid = 'player-' + Uid ()
var preload = document.createElement("div")
preload.id = uid
preload.style.backgroundImage = "url(" + this.media.thumbnail + ")"
preload.style.width = this.media.width + "px"
preload.style.height = this.media.height + "px"
preload.style.pointerEvents = "none"
preload.className = "preload"
this.el.appendChild(preload)
this.defer(uid)
},
defer: function (uid){
if (! YT || ! YT.loaded) {
setTimeout(function(){
this.defer(uid)
}.bind(this), 300)
}
else {
this.build(uid)
}
},
build: function(uid){
this.player = new YT.Player(uid, {
videoId: this.media.token,
width: this.width,
height: this.height,
events: {
onReady: this.ready.bind(this),
onError: this.error.bind(this),
onStateChange: this.statechange.bind(this),
},
playerVars: {
autohide: 1,
autoplay: 0,
disablekb: 1,
controls: 0,
enablejsapi: 1,
fs: 0,
modestbranding: 1,
iv_load_policy: 3, // no annotations
loop: 0,
showinfo: 0,
rel: 0,
wmode: 'opaque',
},
})
},
ready: function(){
console.log("youtube ready")
},
error: function(err){
console.log("youtube error", err)
},
statechange: function(e){
switch (e.data) {
case -1: // unstarted
break
case 0: // finished
this.finished()
break
case 1: // play
if (this.paused) {
this.pause()
}
break
case 2: // pause
break
case 3: // buffering
break
case 5: // cued
break
}
},
play: function(){
this.paused = false
this.player.playVideo()
},
pause: function(){
this.paused = true
this.player.pauseVideo()
},
seek: function(n, allowSeekAhead){
if (n < 1) {
n = n * this.duration()
}
allowSeekAhead = typeof allowSeekAhead == "boolean" ? allowSeekAhead : true
this.player.seekTo(n, true) // set to false if seeking manually
},
duration: function(){
return this.player.getDuration()
},
finished: function(){
console.log("youtube finished")
if (this.media.bound) {
$(".playButton").removeClass('playing')
}
}
})
window.onYouTubePlayerAPIReady = function(){
// console.log("youtube api ready")
}
|
