'use strict';
var Thing = require('./thing.js');
var DEFAULT_WIDTH = 150;
var DEFAULT_HEIGHT = 150;
/**
* @constructor
* @augments Thing
* @param {string} filename - Filepath to the video
*/
function WebVideo(filename) {
if (typeof filename !== 'string') {
throw new TypeError('You must pass a string to <span class="code">' +
'new WebVideo(filename)</span> that has the video\'s location.');
}
Thing.call(this);
var self = this;
var vid = document.createElement('video');
this.width = DEFAULT_WIDTH;
this.height = DEFAULT_HEIGHT;
this.type = 'WebVideo';
this.browserSupportsVideo = !!vid.canPlayType;
if(this.browserSupportsVideo){
this.video = vid;
this.video.src = filename;
this.filename = filename;
this.video.autoplay = true;
this.video.loop = false;
// Treat cross origin URLs as same origin. Allows for videos from different
// origins to be loaded and played, as long as that origin allows us to load
// the given video resource.
this.video.crossOrigin = 'anonymous';
}
}
WebVideo.prototype = new Thing();
WebVideo.prototype.constructor = WebVideo;
/**
* Draws the WebVideo in the canvas.
*
* @param {CodeHSGraphics} __graphics__ - Instance of the __graphics__ module.
*/
WebVideo.prototype.draw = function(__graphics__) {
if(this.browserSupportsVideo){
var context = __graphics__.getContext('2d');
context.drawImage(this.video, this.x, this.y, this.width, this.height);
}
};
/**
* Checks if the passed point is contained in the WebVideo.
*
* @param {number} x - The x coordinate of the point being tested.
* @param {number} y - The y coordinate of the point being tested.
* @returns {boolean} Whether the passed point is contained in the WebVideo.
*/
WebVideo.prototype.containsPoint = function(x, y) {
if(this.browserSupportsVideo){
return x >= this.x && x <= this.x + this.width &&
y >= this.y && y <= this.y + this.height;
}
return false;
};
/**
* Gets the width of the WebVideo.
*
* @returns {number} Width of the WebVideo.
*/
WebVideo.prototype.getWidth = function() {
return this.width;
};
/**
* Gets the height of the WebVideo.
*
* @returns {number} Height of the WebVideo.
*/
WebVideo.prototype.getHeight = function() {
return this.height;
};
/**
* Sets the size of the WebVideo.
*
* @param {number} width - The desired width of the resulting WebVideo.
* @param {number} height - The desired height of the resulting WebVideo.
*/
WebVideo.prototype.setSize = function(width, height) {
this.width = width;
this.height = height;
};
/**
* Sets whether the WebVideo should start playing automatically once loaded.
*
* @param {boolean} autoplay - True/false whether the video should start playing automatically.
*/
WebVideo.prototype.setAutoplay = function(autoplay) {
if(this.browserSupportsVideo){
this.video.autoplay = autoplay;
}
};
/**
* Sets whether the WebVideo should loop and play again once finished.
*
* @param {boolean} loop - True/false whether the video should loop.
*/
WebVideo.prototype.setLoop = function(loop) {
if(this.browserSupportsVideo){
this.video.loop = loop;
}
};
/**
* Sets whether the WebVideo is muted or not.
*
* @param {boolean} muted - True/false whether the video should be muted.
*/
WebVideo.prototype.setMuted = function(muted) {
if(this.browserSupportsVideo){
this.video.muted = muted;
}
};
/**
* Starts playing the WebVideo.
*/
WebVideo.prototype.play = function() {
if(this.browserSupportsVideo){
this.video.play();
}
};
/**
* Pauses the WebVideo.
*/
WebVideo.prototype.pause = function() {
if(this.browserSupportsVideo){
this.video.pause();
}
};
/**
* Stops the WebVideo.
*/
WebVideo.prototype.stop = function() {
if(this.browserSupportsVideo){
this.video.pause();
this.video.currentTime = 0;
}
};
/**
* Returns whether the WebVideo is currently playing.
*
* @returns {boolean} True if the video is playing, false if it is not.
*/
WebVideo.prototype.isPlaying = function() {
if(this.browserSupportsVideo){
return !(this.video.paused || this.video.ended)
}
return false;
};
/**
* Returns whether the WebVideo is currently muted.
*
* @returns {boolean} True if the video is muted, false if it is not.
*/
WebVideo.prototype.isMuted = function() {
if(this.browserSupportsVideo){
return this.video.muted;
}
return false;
};
/**
* Defines a function to call once the video has loaded enough and is ready to play.
* @param {Function} fn A function to call when the video is ready to play.
*/
WebVideo.prototype.onReadyToPlay = function(fn){
if(this.browserSupportsVideo){
this.video.oncanplay = fn;
}
}
module.exports = WebVideo;