web/static/res/js/incplayer.js
author Edwin Razafimahatratra <edwin@robotalismsoft.com>
Fri, 05 Oct 2012 13:44:45 +0200
changeset 19 26ab64495127
parent 18 f6232b308fbd
child 36 6cd5bc3dc7a2
permissions -rw-r--r--
premièrs tests d'intégration

function IncPlayer()
{
	// --------------------------------------------------------------------------------------------------------------------
	// Members
	// --------------------------------------------------------------------------------------------------------------------

	// Global
	this.initDone = false;
	this.playerIsReady = false;
	this.iOS = false;

	// Sequences
	this.allSequencesData = [];
	this.sequences = [];

	// Popcorn objects
	this.videoDivIdName = "";
	this.videoExt = "";
	this.preferOgg = true; // debug
	this.popSeq = null;

	// Controls
	this.playButton = null;
	//this.hd = true;
	this.hd = false;
	this.seekTime = 0.0;

	// Tools
	this.logiEnable = true;
	this.jsonData = [];

	// --------------------------------------------------------------------------------------------------------------------
	// Functions
	// --------------------------------------------------------------------------------------------------------------------

	this.init = function(videoDivIdName, playButton, jsonFile, preferOgg)
	{
		this.videoDivIdName = videoDivIdName;
		this.preferOgg = preferOgg;
		this.playButton = $(playButton).get(0);

		// Video extention
		this.videoExt = this.getSupportedVideoExt();
		if (this.videoExt === "") {
			this.loge("your browser don't support HTML5 videos");
			return false;
		}

		// Detect iOS
		this.detectIOS();
		if (this.iOS) {
			this.logi("we are on iOS");
		}

		// Load all sequences data
		this.allSequencesData = this.loadJson(jsonFile);
		this.logi("sequences in part1: " + (this.allSequencesData.part1 !== undefined ? this.allSequencesData.part1.length : 0));
		this.logi("sequences in part2: " + (this.allSequencesData.part2 !== undefined ? this.allSequencesData.part2.length : 0));
		this.logi("sequences in part3: " + (this.allSequencesData.part3 !== undefined ? this.allSequencesData.part3.length : 0));

		this.initDone = true;
		return true;
	};

	this.destroySequence = function()
	{
		if (this.popSeq !== null) {
			for (var i = 0; i < this.sequences.length; ++i) {			
				this.popSeq.eq(i).destroy();			
			}
			this.sequences = [];
			this.popSeq.remove();
		}		
	};

	this.createPopSequence = function()
	{
		if (!this.initDone) {
			this.loge("incplayer not initialized");
			return;
		}

		// Delete previous popcorn objects
		this.destroySequence();

		// Choose the 3 video
		this.choosePopSequence();

		// And cerate the popcorn sequence
		this.initPopSequence();
	};

	this.choosePopSequence = function()
	{
		this.sequences = [];
		if (this.allSequencesData.part1 !== undefined && this.allSequencesData.part1.length) {
			this.sequences.push(this.allSequencesData.part1[this.random(0, this.allSequencesData.part1.length)]);			
		}
		if (this.allSequencesData.part2 !== undefined && this.allSequencesData.part2.length) {
			this.sequences.push(this.allSequencesData.part2[this.random(0, this.allSequencesData.part2.length)]);
		}
		if (this.allSequencesData.part3 !== undefined && this.allSequencesData.part3.length) {
			this.sequences.push(this.allSequencesData.part3[this.random(0, this.allSequencesData.part3.length)]);
		}

		// Set the video file name 
		var i;
		for (i = 0; i < this.sequences.length; ++i) {
			var file = this.sequences[i].src;
			
			// HD
			if(this.hd) {
				file += "hd"; 
			}

			// Extention
			file += "." + this.videoExt;

			// Set the final file
			this.sequences[i].src = file;
		}
		
		this.logi("choosed sequences:");
		for (i = 0; i < this.sequences.length; ++i) {
			this.logi(this.sequenceToString(i));
		}

		// debug
        var message = $("#message");
        if (message !== undefined && this.sequences.length > 0) {
        	if (this.sequences[0].src.search("720") >= 0) {
        		message.html("720");		
        	} else if (this.sequences[0].src.search("480") >= 0) {
        		message.html("480");		
        	} else if (this.sequences[0].src.search("360") >= 0) {
        		message.html("360");		
        	} else {
        		message.html("???");		        		
        	}
        }

	};

	this.initPopSequence = function()
	{
		var self = this;

		// Create the popcorn sequencer
		self.popSeq = Popcorn.sequence(self.videoDivIdName, self.sequences);

		for (var i = 0; i < self.sequences.length; ++i) {
			
			var pop = self.popSeq.eq(i);

			// Hide controls
			pop.controls(false);

			// Mute (debug)
			pop.mute();

			self.listenEvent(pop, "playing", false, function() {
				self.displayPlayButton(false);
				self.logi("play sequence: " + self.sequenceToString(self.popSeq.active));
			});

			self.listenEvent(pop, "pause", false, function() {
				self.displayPlayButton(true);
				self.logi("pause sequence: " + self.sequenceToString(self.popSeq.active));
			});			

			self.listenEvent(pop, "timeupdate", false, function() {
				if (!self.iOS) {
					//self.logi("current: " + self.getCurrentPop().currentTime());
				}
			});

			self.listenEvent(pop, "canplaythrough", true, function() {
			});
		}

		self.popSeq.on("loadedmetadata", function() {

			self.playerIsReady = true;

			if (!self.iOS) {
				// Automatic play
				self.ctrlPlay();

				if (self.seekTime !== 0.0) {
					self.popSeq.jumpTo(self.seekTime);
					self.seekTime = 0.0;
				}
			}

			// Unlisten event
			self.popSeq.off("loadedmetadata");	

			self.logi("the player is ready");
		});	

		self.popSeq.on("cycle", function() {
			self.logi("CYCLE !");
		});	
	};

	this.listenEvent = function(pop, event, unlisten, func)
	{
		pop.on(event, function() {
			// Execute the function
			func();
	
			if (unlisten) {		
				// Unlisten event
				pop.off(event);
			}
		});
	};

	//this.

	this.getCurrentPop = function()
	{
		var index = this.popSeq.active;
		if (index >= this.sequences.length) {
			index = this.sequences.length-1;
		}
		return this.popSeq.eq(index);
	};

	this.ctrlPlay = function()
	{
		if (!this.iOS && !this.playerIsReady) {
			// The video are not ready
			this.logi("can't play, the player is not ready");
			return;
		}

		if (this.getCurrentPop().paused()) {
			// Play
			this.popSeq.play();
		} else {
			// Pause
			this.popSeq.pause();
		}
	};

	this.ctrlForward = function()
	{
		if (!this.playerIsReady) {
			// The video are not ready
			this.logi("can't play, the player is not ready");
			return;
		}

		// Seek 1 second forward
		this.popSeq.jumpTo(this.popSeq.currentTime() + 1);
	};

	this.ctrlBackward = function()
	{
		if (!this.playerIsReady) {
			// The video are not ready
			this.logi("can't play, the player is not ready");
			return;
		}

		// Seek 1 second backward
		this.popSeq.jumpTo(this.popSeq.currentTime() - 1);
	};

	this.ctrlFullScreen = function()
	{
		if (!this.playerIsReady) {
			// The video are not ready
			this.logi("can't play, the player is not ready");
			return;
		}

		this.logi("full screen");
	};
	
	this.ctrlHd = function()
	{
		if (!this.playerIsReady) {
			// The video are not ready
			this.logi("can't play, the player is not ready");
			return;
		}

		this.seekTime = this.popSeq.currentTime();
		this.hd = false;
		this.createPopSequence();

		this.logi("hd");
	};

	this.displayPlayButton = function(playIcon)
	{
		/*
		if (playIcon) {
			// Controller display
			this.playButton.src = 'static/res/img/ctrlplayover.jpg';
	    	this.playButton.onmouseover = function() {this.src='static/res/img/ctrlplayover.jpg';}; 
	    	this.playButton.onmouseout = function() {this.src='static/res/img/ctrlplay.jpg';};
		} else {
			// Controller display
			this.playButton.src = 'static/res/img/ctrlpauseover.jpg';
	    	this.playButton.onmouseover = function() {this.src='static/res/img/ctrlpauseover.jpg';}; 
	    	this.playButton.onmouseout = function() {this.src='static/res/img/ctrlpause.jpg';};
		}
		*/
	};
		 
	// --------------------------------------------------------------------------------------------------------------------
	// Tools Functions
	// --------------------------------------------------------------------------------------------------------------------

	this.logi = function(txt)
	{
		if (this.logiEnable) {
			console.log("info: " + txt);
		}
	};

	this.loge = function(txt)
	{
		console.log("error: " + txt);
	};

	this.loadJson = function(jsonFile)
	{
		var txt = this.loadTxtFile(jsonFile);
		return JSON.parse(txt);
	};

	this.loadTxtFile = function(jsonFile)
	{
		var xhr = new XMLHttpRequest();
		xhr.open("GET", jsonFile, false);  
		xhr.overrideMimeType('text/plain; charset=x-user-defined');

		try {
			xhr.send(null); 
		} catch(e) {
			return "";
		}

		if (xhr.status == 404) {
			return "";
		}
		
		var buffer;
		if (xhr.responseType == "arraybuffer") {
			buffer = xhr.response;
		} else if (xhr.mozResponseArrayBuffer === null) {
			buffer = xhr.mozResponseArrayBuffer;  
		} else {
			buffer = xhr.response;
		}
		return buffer;
	};

	this.random = function(min, max)
	{
		return Math.floor((Math.random()*(max-min))+min);
	};

	this.sequenceToString = function(index)
	{
		return JSON.stringify(this.sequences[index]);
	};

	this.getSupportedVideoExt = function()
	{
		var v = document.createElement("video");

		if (v.canPlayType) {

		    // Check for Ogg support
		    if (this.preferOgg && v.canPlayType('video/ogg; codecs="theora"') !== "") {
		    	return "ogg";
		    }
		    
		    // Check for Webm support
		    if (v.canPlayType('video/webm; codecs="vp8, vorbis"') !== "") {
		    	return "webm";
		    }

		    // Check for MPEG-4 support
		    if (v.canPlayType('video/mp4; codecs="mp4v.20.8"' ) !== "") {
				return "mp4";
		    }

		    // Check for h264 support
		    if ((v.canPlayType('video/mp4; codecs="avc1.42E01E"' ) !== "" || v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'))) {
		    	return "mp4";
		    }
		}

		return "";
	};

	this.detectIOS = function()
	{
		var p = navigator.platform;
		if (p === 'iPad' || p === 'iPhone' || p === 'iPod') {
		    this.iOS = true;
		}		
	};
}

var incPlayer = new IncPlayer();