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
|
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: $.proxy(this.ready, this),
onError: $.proxy(this.error, this),
onStateChange: $.proxy(this.statechange, 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
this.paused = false
break
case 2: // pause
this.paused = true
break
case 3: // buffering
break
case 5: // cued
break
}
},
play: function(){
this.player.playVideo()
},
pause: function(){
this.player.pauseVideo()
},
seek: function(n, allowSeekAhead){
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")
}
})
window.onYouTubePlayerAPIReady = function(){
// console.log("youtube api ready")
}
|
