(function($, root) {
// init video object
function zdvideo(opts) {
opts = opts || {};
if (!opts.container || !$('#' + opts.container)) {
throw new error('video container not found!')
}
if (!opts.source || opts.source.length == 0) {
throw new error('no video source found!')
}
this.opts = opts;
this.container = $('#' + this.opts.container); //jquery obj
this.tpl = null;
this.init();
}
function _getvideotype(source) {
var texts = source.split('.');
var type = texts[texts.length -1];
switch(type) {
case "mp4":
return 'video/mp4';
case 'wbbm':
return 'video/webm';
default:
return ''
}
}
function launchfullscreen(elem) {
var requestfullscreen = elem.requestfullscreen || elem.msrequestfullscreen || elem.mozrequestfullscreen || elem.webkitrequestfullscreen;
requestfullscreen.call(elem);
}
zdvideo.prototype.settpl = function() {
var tpl = '\n
\n
\n
\n';
//add controls
tpl += '
';
tpl += '
';
this.container.append($(tpl));
};
zdvideo.prototype.setvideotdimensions = function() {
if (!this.video) {
this.video = this.container.find('video')[0];
}
var width = this.video.width;
var height = this.video.height;
this.container.css('width', width);
if (!this.controls) {
this.controls = this.container.find('.zd-video-controls');
}
this.controls.css('width', width - 0);
};
zdvideo.prototype.setfullscreenstyle = function() {
if (!this.video) {
this.video = this.container.find('video')[0];
}
this.container.css({width: '100%', height: '100%'});
this.video.setattribute('width', '100%');
this.video.setattribute('height', '100%');
this.controls.css('width', '90%');
};
zdvideo.prototype.addevents = function() {
var self = this;
var hovertimeout = null;
var obj = {};
obj.video = this.container.find('video')[0];
this.video = obj.video;
obj.controls = this.container.find('.zd-video-controls');
this.controls = obj.controls;
obj.bigplaybtn = this.container.find('.zd-video-big-play');
obj.playbtn = obj.controls.find('.zd-video-play');
obj.pausebtn = obj.controls.find('.zd-video-pause');
obj.progressbar = obj.controls.find('.zd-video-progress-bar');
obj.volumecon = obj.controls.find('.zd-video-volume');
obj.volumebar = obj.controls.find('.zd-video-volume-bar');
obj.fullscreenbtn = obj.controls.find('.zd-video-fullscreen');
obj.videotime = obj.controls.find('.zd-video-time');
//play
var playhandle = function(e) {
obj.video.play();
obj.playbtn.addclass('hide');
obj.pausebtn.removeclass('hide');
}
obj.playbtn.on('click', playhandle);
obj.bigplaybtn.on('click', playhandle);
//pause
obj.pausebtn.on('click', function(e) {
obj.video.pause();
obj.playbtn.removeclass('hide');
obj.pausebtn.addclass('hide');
});
obj.video.addeventlistener('timeupdate', function() {
//time change
obj.secs = parseint(obj.video.currenttime % 60, 10);
obj.mins = parseint((obj.video.currenttime/60) % 60, 10);
obj.secs = ('0' + obj.secs).slice(-2);
obj.mins = ('0' + obj.mins).slice(-2);
obj.videotime.text(obj.mins + ':' + obj.secs);
//progress bar change
obj.percent = (100 / obj.video.duration) * obj.video.currenttime;
if (obj.percent > 0) {
obj.progressbar.width(obj.percent + '%');
}
}, false);
obj.video.addeventlistener('playing', function() {
self.container.removeclass('zd-video-ispause');
obj.playbtn.css('display', 'none');
obj.pausebtn.css('display', 'inline-block');
}, false);
obj.video.addeventlistener('pause', function() {
self.container.addclass('zd-video-ispause');
obj.controls.addclass('show');
obj.pausebtn.css('display', 'none');
obj.playbtn.css('display', 'inline-block');
}, false);
obj.video.addeventlistener('click', function() {
if (obj.video.paused) {
obj.video.play();
} else {
obj.video.pause();
}
}, false);
obj.video.addeventlistener('mouseover', function() {
obj.controls.addclass('show');
}, false);
obj.video.addeventlistener('mouseout', function() {
if (!obj.video.paused) {
hovertimeout = settimeout(function() {
obj.controls.removeclass('show');
}, 1500);
}
}, false);
obj.controls.on('mouseover', function(e) {
e.preventdefault();
e.stoppropagation();
if (hovertimeout) {
cleartimeout(hovertimeout);
}
if (!obj.controls.hasclass('show')) {
obj.controls.addclass('show');
}
});
//volume set
//
obj.volumecon.on('click', function(e) {
var x = e.clientx;
var offset = obj.volumecon.offset();
var width = obj.volumecon.width();
var ratio = (x-offset.left)/width;
obj.video.volume = ratio;
obj.volumebar.css('width', (ratio * 100) + '%');
});
//full screen
obj.fullscreenbtn.on('click', function(e) {
launchfullscreen(self.video);
});
};
zdvideo.prototype.init = function() {
this.settpl();
this.addevents();
this.setvideotdimensions();
}
zdvideo.version = '0.0.1';
root.zdvideo = zdvideo;
})(jquery, this);