ytbgv
var Videoplayer = Class.create({ // initialize Prototype class
initialize: function(number, options){
this.suppliedOptions = options; // additional options
this.defaultOptions = $H({ //default options (in a hash)
autoPlay: true,
wrapper: 'video'
});
this.getSource(number); //init source (see below)
this.video(); //init video (see below)
this.startObserving(); //observe loop and resize events
},
getSource: function (number) { //receives a number according which video button you’ve clicked on the welcome page
switch(number) { //here the different videos get directed
case 4:
this.srcOne = '/videos/movie_4.m4v';
this.srcTwo = '/videos/movie_4.ogv';
break;
case 3:
this.srcOne = '/videos/movie_3.m4v';
this.srcTwo = '/videos/movie_3.ogv';
break;
case 2:
this.srcOne = '/videos/movie_2.m4v';
this.srcTwo = '/videos/movie_2.ogv';
break;
default:
this.srcOne = '/videos/movie_1.m4v';
this.srcTwo = '/videos/movie_1.ogv';
break;
}
},
video: function () {
var dimensions = this.getVideoDimensions(); //how big shall the video be (see function below)
this.video = new Element('video',{width:dimensions[0],height:dimensions[1]});
this.video.preload = true;this.video.autoplay = true; this.video.loop = true;this.video.autobuffer = true;
var srcOne = new Element('source',{src:this.srcOne,type:'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'});
var srcTwo = new Element('source',{src:this.srcTwo,type:'video/ogg; codecs="theora, vorbis"'});
this.video.insert(srcOne);this.video.insert(srcTwo); $('video').insert(this.video);
}, //insert html5 video code on page
startObserving: function () {
Event.observe(window, 'resize', function(e){ //on resize get and set new video dimensions
dimensions = this.getVideoDimensions();
this.video.width = dimensions[0];
this.video.height = dimensions[1];
}.bind(this));
this.loopVideo(); //for firefox: if the video is finished play again
//$$('.playControl').first().observe('click',this.playControl.bindAsEventListener(this)); //optional (add play / pause)
},
getVideoDimensions: function () {
var windowWidth = document.viewport.getWidth(); var windowHeight = $('content').getHeight(); windowProportion = windowWidth / windowHeight;
var origWidth = 480; origHeight = 270; var origProportion = origWidth / origHeight;
var newWidth = 0; var newHeight = 0;
if (windowProportion >= origProportion) {
proportion = windowWidth / origWidth;
} else {
proportion = windowHeight / origHeight;
}
newWidth = proportion * origWidth; newHeight = proportion * origHeight;
//console.log('Window Height:%s, newWidth: %s, newHeight: %s',windowHeight,newWidth,newHeight);
return [newWidth,newHeight]
},
/*playControl: function () {
if (this.video.paused == false) {
this.video.pause();
$$('.playControl').first().innerHTML = "Play";
} else {
this.video.play();
$$('.playControl').first().innerHTML = "Pause";
}
},*/
loopVideo: function () {
this.t = window.setInterval(function() {
if (this.video.ended == true) {
this.video.play();
}
}.bind(this),500);
}});
Ich danke für mehr als 474976 Besucher (2291759 Hits)
