How to add controls to a VideoSurface in Famo.us

Question

As a developer I would like to be able to set controls on a VideoSurface in Famo.us. By adding a way to set them on a surface, one could set video controls like play(), pause() and stop().

That's more of a story...

Anyway I need a way to set video controls for a VideoSurface the right way in Famous.

score 3 · Accepted Answer · answered Aug 12 '14 at 17:15

You can extend the VideoSurface to bring in other properties through your options and even add your own methods (functions) to be able to control the video playback.

Here is an example of the extended VideoSurface: with native controls

    var VideoSurface = require('famous/surfaces/VideoSurface');

function VideoExtraSurface(options) {
    VideoSurface.apply(this, arguments);
    this.options.controls = options && options.controls ? options.controls : false;
    this._superDeploy = VideoSurface.prototype.deploy;

}

VideoExtraSurface.prototype = Object.create(VideoSurface.prototype);
VideoExtraSurface.prototype.constructor = VideoExtraSurface;

VideoExtraSurface.prototype.deploy = function deploy(target) {
    this._superDeploy(target);
    target.controls = this.options.controls;

    this._videoElement = target;
}

module.exports = VideoExtraSurface;

Here is another example: Your own play/pause

var VideoSurface = require('famous/surfaces/VideoSurface');

function VideoExtraSurface(options) {
    VideoSurface.apply(this, arguments);
    this.options.controls = options && options.controls ? options.controls : false;
    this._superDeploy = VideoSurface.prototype.deploy;

}

VideoExtraSurface.prototype = Object.create(VideoSurface.prototype);
VideoExtraSurface.prototype.constructor = VideoExtraSurface;

VideoExtraSurface.prototype.deploy = function deploy(target) {
    this._superDeploy(target);
    target.controls = this.options.controls;

    this._videoElement = target;
}

VideoExtraSurface.prototype.play = function play() {
    return this._videoElement.play();
}

VideoExtraSurface.prototype.pause = function pause() {
    return this._videoElement.pause();
}

module.exports = VideoExtraSurface;

How to add controls to a VideoSurface in Famo.us

1 Answers1