From d5f045f5b8f3b35bd7fda5aa39110c544e707de9 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 17 Jul 2014 14:01:30 -0400 Subject: weird youtube defer bug --- public/assets/javascripts/mx/primitives/mx.youtube.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index 47d5507..e9a4578 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -31,6 +31,7 @@ MX.Youtube = MX.Object3D.extend({ var preload = document.createElement("div") preload.id = uid preload.style.backgroundImage = "url(" + this.media.thumbnail + ")" + preload.style.backgroundSize = "cover" preload.style.width = this.media.width + "px" preload.style.height = this.media.height + "px" preload.style.pointerEvents = "none" @@ -47,7 +48,11 @@ MX.Youtube = MX.Object3D.extend({ }.bind(this), 300) } else { - this.build(uid) + // not sure why i need to wait here.. + // stopped working until i added the setTimeout + setTimeout(function(){ + this.build(uid) + }.bind(this), 20) } }, @@ -67,6 +72,7 @@ MX.Youtube = MX.Object3D.extend({ disablekb: 1, controls: 0, enablejsapi: 1, + origin: window.location.origin, fs: 0, modestbranding: 1, iv_load_policy: 3, // no annotations @@ -84,6 +90,9 @@ MX.Youtube = MX.Object3D.extend({ if (this.media.autoplay) { this.play() } + else { + this.pause() + } if (this.media.mute) { this.mute() @@ -123,6 +132,7 @@ MX.Youtube = MX.Object3D.extend({ }, pause: function(){ + console.log(this, bzbz = this.player) this.paused = true this.player.pauseVideo() }, @@ -136,6 +146,7 @@ MX.Youtube = MX.Object3D.extend({ }, duration: function(){ + console.log(this, this.player) return this.player.getDuration() }, @@ -164,5 +175,5 @@ MX.Youtube = MX.Object3D.extend({ }) window.onYouTubePlayerAPIReady = function(){ - // console.log("youtube api ready") + // console.log("youtube api ready") } -- cgit v1.2.3-70-g09d2 From e5911a4760d62b803a166139835e661183850187 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 17 Jul 2014 14:17:35 -0400 Subject: loop issues --- .../assets/javascripts/mx/primitives/mx.video.js | 4 +++ .../assets/javascripts/mx/primitives/mx.vimeo.js | 32 +++++++++++++++++----- .../assets/javascripts/mx/primitives/mx.youtube.js | 7 +++-- .../rectangles/engine/scenery/types/video.js | 4 +++ public/assets/javascripts/ui/editor/MediaEditor.js | 2 +- 5 files changed, 39 insertions(+), 10 deletions(-) (limited to 'public/assets/javascripts/mx') diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index b28204d..cdb92c8 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -83,6 +83,10 @@ MX.Video = MX.Object3D.extend({ this.muted = false }, + setLoop: function(state){ + this.media.loop = state + }, + duration: function(){ return this.player.duration }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index 7a5327e..7bc0a26 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -21,15 +21,17 @@ MX.Vimeo = MX.Object3D.extend({ this.el.classList.add("video") this.paused = !! this.media.autoplay this.muted = app.muted || !! this.media.mute + this.started = false this.load() }, load: function (ops) { var uid = 'player-' + Uid () + var loop = this.media.loop ? 'loop=1' : "" var preload = document.createElement("iframe") preload.id = uid - preload.setAttribute("src", "//player.vimeo.com/video/" + this.media.token + "?api=1&badge=0&controls=0branding=0&byline=0&player_id=" + uid) + preload.setAttribute("src", "//player.vimeo.com/video/" + this.media.token + "?api=1&badge=0&controls=0branding=0&byline=0&portrait=0&title=0&" + loop + "&player_id=" + uid) preload.style.backgroundImage = "url(" + this.media.thumbnail + ")" preload.style.width = this.media.width + "px" preload.style.height = this.media.height + "px" @@ -44,6 +46,7 @@ MX.Vimeo = MX.Object3D.extend({ ready: function(){ console.log("vimeo ready") + this.started = true // wait until ready before binding events. other events: play, pause this.player.addEvent('play', this.onPlay.bind(this)) @@ -65,6 +68,9 @@ MX.Vimeo = MX.Object3D.extend({ if (this.media.autoplay) { this.play() } + else { + this.pause() + } }, error: function(err){ @@ -90,6 +96,11 @@ MX.Vimeo = MX.Object3D.extend({ return } + if (! this.started || n === 0) { + return + } + console.log("fukballz", n) + if (n < 1) { n = n * this.duration() } @@ -97,9 +108,10 @@ MX.Vimeo = MX.Object3D.extend({ if (this.paused) { this.paused = false this.play() + this.pause() setTimeout(function(){ this.pause() - }.bind(this), 1000) + }.bind(this), 100) } }, @@ -117,6 +129,11 @@ MX.Vimeo = MX.Object3D.extend({ this.muted = false }, + setLoop: function(state){ + this.media.loop = state + this.player.api('setLoop', state) + }, + onPlay: function(){ if (this.paused) { this.pause() @@ -130,11 +147,12 @@ MX.Vimeo = MX.Object3D.extend({ }, finished: function(){ - if (this.media.loop) { - this.seek(0) - this.play() - } - else if (this.bound) { +// if (this.media.loop) { +// this.seek(0) +// this.play() +// } +// else if (this.bound) { + if (! this.media.loop && this.bound) { $(".playButton").removeClass('playing') } } diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index e9a4578..5514359 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -146,7 +146,6 @@ MX.Youtube = MX.Object3D.extend({ }, duration: function(){ - console.log(this, this.player) return this.player.getDuration() }, @@ -161,7 +160,11 @@ MX.Youtube = MX.Object3D.extend({ this.muted = false }, - finished: function(){ + setLoop: function(state){ + this.media.loop = state + }, + + finished: function(){ console.log("youtube finished") if (this.media.loop) { this.seek(0) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index d3e2e76..79cfb1c 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -73,6 +73,10 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ this.mx.seek(n) }, + setLoop: function(shouldLoop){ + this.mx.setLoop(shouldLoop) + }, + mute: function(muted){ if (muted) { this.mx.mute() diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index a52bdd0..f4e8071 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -105,7 +105,7 @@ console.log(scenery) }, setLoop: function(){ var checked = this.$loop.prop('checked') - this.scenery.media.loop = checked + this.scenery.setLoop(checked) }, setMute: function(){ var checked = this.$mute.prop('checked') -- cgit v1.2.3-70-g09d2