You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.3 KiB
73 lines
2.3 KiB
console.log('zoomrotate: Start'); |
|
|
|
(function(){ |
|
var defaults, extend; |
|
console.log('zoomrotate: Init defaults'); |
|
defaults = { |
|
zoom: 1, |
|
rotate: 0, |
|
debug: true |
|
}; |
|
extend = function() { |
|
var args, target, i, object, property; |
|
args = Array.prototype.slice.call(arguments); |
|
target = args.shift() || {}; |
|
for (i in args) { |
|
object = args[i]; |
|
for (property in object) { |
|
if (object.hasOwnProperty(property)) { |
|
if (typeof object[property] === 'object') { |
|
target[property] = extend(target[property], object[property]); |
|
} else { |
|
target[property] = object[property]; |
|
} |
|
} |
|
} |
|
} |
|
return target; |
|
}; |
|
|
|
/** |
|
* register the zoomrotate plugin |
|
*/ |
|
videojs.plugin('zoomrotate', function(settings){ |
|
if (defaults.debug) console.log('zoomrotate: Register init'); |
|
|
|
var options, player, video, poster; |
|
options = extend(defaults, settings); |
|
|
|
/* Grab the necessary DOM elements */ |
|
player = this.el(); |
|
video = this.el().getElementsByTagName('video')[0]; |
|
poster = this.el().getElementsByTagName('div')[1]; // div vjs-poster |
|
|
|
if (options.debug) console.log('zoomrotate: '+video.style); |
|
if (options.debug) console.log('zoomrotate: '+poster.style); |
|
if (options.debug) console.log('zoomrotate: '+options.rotate); |
|
if (options.debug) console.log('zoomrotate: '+options.zoom); |
|
|
|
/* Array of possible browser specific settings for transformation */ |
|
var properties = ['transform', 'WebkitTransform', 'MozTransform', |
|
'msTransform', 'OTransform'], |
|
prop = properties[0]; |
|
|
|
/* Iterators */ |
|
var i,j; |
|
|
|
/* Find out which CSS transform the browser supports */ |
|
for(i=0,j=properties.length;i<j;i++){ |
|
if(typeof player.style[properties[i]] !== 'undefined'){ |
|
prop = properties[i]; |
|
break; |
|
} |
|
} |
|
|
|
/* Let's do it */ |
|
player.style.overflow = 'hidden'; |
|
video.style[prop]='scale('+options.zoom+') rotate('+options.rotate+'deg)'; |
|
poster.style[prop]='scale('+options.zoom+') rotate('+options.rotate+'deg)'; |
|
if (options.debug) console.log('zoomrotate: Register end'); |
|
}); |
|
})(); |
|
|
|
console.log('zoomrotate: End'); |