MX.Video = MX.Object3D.extend({ init: function (ops) { this.type = "Video" var layer = this layer.width = ops.width layer.height = ops.height layer.x = ops.x || 0 layer.y = ops.y || 0 layer.z = ops.z || 0 layer.rotationX = ops.rotationX || 0 layer.rotationY = ops.rotationY || 0 layer.rotationZ = ops.rotationZ || 0 layer.scale = ops.scale || 1 layer.backface = ops.backface || false layer.media = ops.media layer.el.classList.add('video') if (layer.backface) { layer.el.classList.add("backface-visible") } if (ops.src) { this.loadVideo(ops) } if (ops.className) { layer.el.classList.add(ops.className) } layer.el.style.backgroundRepeat = 'no-repeat' }, loadVideo: function(ops){ var layer = this var video = document.createElement('video') video.addEventListener("loadedmetadata", function(){ if (ops.autoplay) { video.play() } else { video.currentTime = video.duration / 3 } }) video.width = layer.width video.height = layer.height video.src = ops.src video.load() this.el.appendChild(video) }, move: function(ops){ var layer = this layer.ops = defaults(ops, layer.ops) for (var i in ops) { layer[i] = ops[i] } layer.dirty = true layer.update() } })