Question

作为开发人员，我希望能够在Famo.us中的VideoSurface上设置控件。通过添加在表面上设置它们的方法，可以设置视频控件，如play（），pause（）和stop（）。

这更像是一个故事...

无论如何，我需要一种方法在Famous中以正确的方式为VideoSurface设置视频控件。

Answer 1

您可以扩展VideoSurface以通过您的选项引入其他属性，甚至添加您自己的方法（功能）以控制视频播放。

以下是扩展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;

以下是另一个例子：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;

如何在Famo.us中向VideoSurface添加控件

1 个答案: