playable
Version:
Video player based on HTML5Video
619 lines • 19.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var player_api_decorator_1 = (0, tslib_1.__importDefault)(require("../../core/player-api-decorator"));
var constants_1 = require("../../constants");
//TODO: Find source of problem with native HLS on Safari, when playing state triggered but actual playing is delayed
var Engine = /** @class */ (function () {
function Engine(_a) {
var eventEmitter = _a.eventEmitter, nativeOutput = _a.nativeOutput, config = _a.config;
this._eventEmitter = eventEmitter;
this._config = config;
this._defaultOutput = nativeOutput;
this._output = nativeOutput;
this._applyConfig(this._config);
}
Engine.prototype._applyConfig = function (config) {
if (config === void 0) { config = {}; }
var preload = config.preload, autoplay = config.autoplay, loop = config.loop, muted = config.muted, volume = config.volume, playsinline = config.playsinline, crossOrigin = config.crossOrigin, src = config.src;
this.setPreload(preload);
this.setAutoplay(autoplay);
this.setLoop(loop);
this.setMute(muted);
this.setVolume(volume);
this.setPlaysinline(playsinline);
this.setCrossOrigin(crossOrigin);
if (src) {
this.setSrc(src);
}
};
Engine.prototype.getElement = function () {
return this._output.getElement();
};
Object.defineProperty(Engine.prototype, "isDynamicContent", {
get: function () {
return this._output.isDynamicContent;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Engine.prototype, "isDynamicContentEnded", {
get: function () {
return this._output.isDynamicContentEnded;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Engine.prototype, "isSeekAvailable", {
get: function () {
return this._output.isSeekAvailable;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Engine.prototype, "isMetadataLoaded", {
get: function () {
return this._output.isMetadataLoaded;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Engine.prototype, "isPreloadActive", {
get: function () {
return this._output.isPreloadActive;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Engine.prototype, "isAutoPlayActive", {
get: function () {
return this._output.isAutoPlayActive;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Engine.prototype, "isSyncWithLive", {
get: function () {
return this._output.isSyncWithLive;
},
enumerable: false,
configurable: true
});
/**
* Method for setting source of video to player.
* @param src Array with multiple sources
* @param callback
* @example
* player.setSrc([
* 'https://my-url/video.mp4',
* 'https://my-url/video.webm',
* 'https://my-url/video.m3u8'
* ]);
* @note
* Read more about [video source](/video-source)
*/
Engine.prototype.setSrc = function (src, callback) {
if (src === this.getSrc()) {
return;
}
this._output.setSrc(src, callback);
};
/**
* Return current source of video
* @example
* player.getSrc(); // ['https://my-url/video.mp4']
*/
Engine.prototype.getSrc = function () {
return this._output.src;
};
Engine.prototype.reset = function () {
this.pause();
this.seekTo(0);
this._eventEmitter.emitAsync(constants_1.VideoEvent.RESET);
};
/**
* Start playback
* @example
* player.play();
*/
Engine.prototype.play = function () {
this._output.play();
};
/**
* Pause playback
* @example
* player.pause();
*/
Engine.prototype.pause = function () {
this._output.pause();
};
/**
* Toggle (play\pause) playback of video
* @example
* player.togglePlayback();
*/
Engine.prototype.togglePlayback = function () {
if (this.isPaused) {
this.play();
}
else {
this.pause();
}
};
/**
* Reset video playback
* @example
* player.play();
* console.log(player.isPaused); // false
* ...
* player.resetPlayback();
* console.log(player.isPaused); // true;
* console.log(player.getCurrentTime()); //0;
*/
Engine.prototype.resetPlayback = function () {
this.pause();
this.seekTo(0);
this._eventEmitter.emitAsync(constants_1.VideoEvent.RESET);
};
Object.defineProperty(Engine.prototype, "isPaused", {
/**
* High level state of video playback. Returns true if playback is paused.
* For more advance state use `getPlaybackState`
* @example
* player.play();
* console.log(player.isPaused);
*/
get: function () {
return this._output.isPaused;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Engine.prototype, "isEnded", {
/**
* High level state of video playback. Returns true if playback is ended. Also note, that `isPaused` will return `true` if playback is ended also.
* For more advance state use `getPlaybackState`
* @example
* player.play();
* console.log(player.isEnded);
*/
get: function () {
return this._output.isEnded;
},
enumerable: false,
configurable: true
});
/**
* Method for synchronize current playback with live point. Available only if you playing live source.
* @example
* player.syncWithLive();
*/
Engine.prototype.syncWithLive = function () {
this._output.syncWithLive();
};
/**
* Method for going forward in playback by your value
* @param sec - Value in seconds
* @example
* player.seekForward(5);
*/
Engine.prototype.seekForward = function (sec) {
var duration = this.getDuration();
if (duration) {
var current = this.getCurrentTime();
this.seekTo(Math.min(current + sec, duration));
}
};
/**
* Method for going backward in playback by your value
* @param sec - Value in seconds
* @example
* player.seekBackward(5);
*/
Engine.prototype.seekBackward = function (sec) {
var duration = this.getDuration();
if (duration) {
var current = this.getCurrentTime();
this.seekTo(Math.max(current - sec, 0));
}
};
/**
* Set volume
* @param volume - Volume value `0..100`
* @example
* player.setVolume(50);
*/
Engine.prototype.setVolume = function (volume) {
var parsedVolume = Number(volume);
var newVolume = isNaN(parsedVolume)
? 1
: Math.max(0, Math.min(Number(volume) / 100, 1));
this._output.setVolume(newVolume);
};
/**
* Get volume
* @example
* player.getVolume(); // 50
*/
Engine.prototype.getVolume = function () {
return this._output.volume * 100;
};
/**
* Method for increasing current volume by value
* @param value - Value from 0 to 100
* @example
* player.increaseVolume(30);
*/
Engine.prototype.increaseVolume = function (value) {
this.setVolume(this.getVolume() + value);
};
/**
* Method for decreasing current volume by value
* @param value - Value from 0 to 100
* @example
* player.decreaseVolume(30);
*/
Engine.prototype.decreaseVolume = function (value) {
this.setVolume(this.getVolume() - value);
};
Engine.prototype.setMute = function (isMuted) {
this._output.setMute(isMuted);
};
/**
* Mute the video
* @example
* player.mute();
*/
Engine.prototype.mute = function () {
this.setMute(true);
};
/**
* Unmute the video
* @example
* player.unmute(true);
*/
Engine.prototype.unmute = function () {
this.setMute(false);
};
Object.defineProperty(Engine.prototype, "isMuted", {
/**
* Get mute flag
* @example
* player.mute();
* player.isMuted; // true
* player.unmute();
* player.isMuted: // false
*/
get: function () {
return this._output.isMuted;
},
enumerable: false,
configurable: true
});
/**
* Set autoplay flag
* @example
* player.setAutoplay();
*/
Engine.prototype.setAutoplay = function (isAutoplay) {
this._output.setAutoplay(isAutoplay);
};
/**
* Get autoplay flag
* @example
* player.getAutoplay(); // true
*/
Engine.prototype.getAutoplay = function () {
return this._output.isAutoplay;
};
/**
* Set loop flag
* @param isLoop - If `true` video will be played again after it will finish
* @example
* player.setLoop(true);
*/
Engine.prototype.setLoop = function (isLoop) {
this._output.setLoop(isLoop);
};
/**
* Get loop flag
* @example
* player.getLoop(); // true
*/
Engine.prototype.getLoop = function () {
return this._output.isLoop;
};
/**
* Method for setting playback rate
*/
Engine.prototype.setPlaybackRate = function (rate) {
this._output.setPlaybackRate(rate);
};
/**
* Return current playback rate
*/
Engine.prototype.getPlaybackRate = function () {
return this._output.playbackRate;
};
/**
* Set preload type
* @example
* player.setPreload('none');
*/
Engine.prototype.setPreload = function (preload) {
this._output.setPreload(preload);
};
/**
* Return preload type
* @example
* player.getPreload(); // none
*/
Engine.prototype.getPreload = function () {
return this._output.preload;
};
/**
* Return current time of video playback
* @example
* player.getCurrentTime(); // 60.139683
*/
Engine.prototype.getCurrentTime = function () {
return this._output.currentTime;
};
/**
* Method for seeking to time in video
* @param time - Time in seconds
* @example
* player.seekTo(34);
*/
Engine.prototype.seekTo = function (time) {
this._output.setCurrentTime(time);
};
/**
* Return duration of video
* @example
* player.getDuration(); // 180.149745
*/
Engine.prototype.getDuration = function () {
return this._output.duration || 0;
};
/**
* Return real width of video from metadata
* @example
* player.getVideoWidth(); // 400
*/
Engine.prototype.getVideoWidth = function () {
return this._output.videoWidth;
};
/**
* Return real height of video from metadata
* @example
* player.getVideoHeight(); // 225
*/
Engine.prototype.getVideoHeight = function () {
return this._output.videoHeight;
};
Engine.prototype.getBuffered = function () {
return this._output.buffered;
};
/**
* Set playsinline flag
* @param isPlaysinline - If `false` - video will be played in full screen, `true` - inline
* @example
* player.setPlaysinline(true);
*/
Engine.prototype.setPlaysinline = function (isPlaysinline) {
this._output.setInline(isPlaysinline);
};
/**
* Get playsinline flag
* @example
* player.getPlaysinline(); // true
*/
Engine.prototype.getPlaysinline = function () {
return this._output.isInline;
};
/**
* Set crossorigin attribute for video
* @example
* player.setCrossOrigin('anonymous');
*/
Engine.prototype.setCrossOrigin = function (crossOrigin) {
this._output.setCrossOrigin(crossOrigin);
};
/**
* Get crossorigin attribute value for video
* @example
* player.getCrossOrigin(); // 'anonymous'
*/
Engine.prototype.getCrossOrigin = function () {
return this._output.crossOrigin;
};
/**
* Return current state of playback
*/
Engine.prototype.getCurrentState = function () {
return this._output.currentState;
};
/**
* Return object with internal debug info
*
* @example
* player.getDebugInfo();
*
* @note
* The above command returns JSON structured like this:
*
* @example
* {
* "type": "HLS",
* "viewDimensions": {
* "width": 700,
* "height": 394
* }
* "url": "https://example.com/video.m3u8",
* "currentTime": 22.092514,
* "duration": 60.139683,
* "loadingStateTimestamps": {
* "metadata-loaded": 76,
* "ready-to-play": 67
* },
* "bitrates": [
* // Available bitrates
* "100000",
* "200000",
* ...
* ],
* // One of available bitrates, that used right now
* "currentBitrate": "100000",
* // Raw estimation of bandwidth, that could be used without playback stall
* "bwEstimate": "120000"
* "overallBufferLength": 60.139683,
* "nearestBufferSegInfo": {
* "start": 0,
* "end": 60.139683
* }
* }
*/
Engine.prototype.getDebugInfo = function () {
return this._output.getDebugInfo();
};
Engine.prototype.destroy = function () {
// all dependencies are modules and will be destroyed from Player.destroy()
return;
};
Engine.prototype.changeOutput = function (output, callback) {
var src = this.getSrc();
this._output.pause();
this._output = output;
this._applyConfig(this._config);
return this._output.setSrc(src, callback);
};
Engine.prototype.resetOutput = function () {
var wasPlaying = !this._output.isPaused;
var currentTime = this._output.currentTime;
this._output = this._defaultOutput;
this._output.setCurrentTime(currentTime);
if (wasPlaying) {
this._output.play();
}
};
Engine.moduleName = 'engine';
Engine.dependencies = ['eventEmitter', 'config', 'nativeOutput'];
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "setSrc", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "getSrc", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "reset", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "play", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "pause", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "togglePlayback", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "resetPlayback", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "isPaused", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "isEnded", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "syncWithLive", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "seekForward", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "seekBackward", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "setVolume", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "getVolume", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "increaseVolume", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "decreaseVolume", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "mute", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "unmute", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "isMuted", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "setAutoplay", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "getAutoplay", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "setLoop", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "getLoop", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "setPlaybackRate", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "getPlaybackRate", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "setPreload", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "getPreload", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "getCurrentTime", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "seekTo", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "getDuration", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)('getVideoRealWidth')
], Engine.prototype, "getVideoWidth", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)('getVideoRealHeight')
], Engine.prototype, "getVideoHeight", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "setPlaysinline", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "getPlaysinline", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "setCrossOrigin", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "getCrossOrigin", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)('getPlaybackState')
], Engine.prototype, "getCurrentState", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Engine.prototype, "getDebugInfo", null);
return Engine;
}());
exports.default = Engine;
//# sourceMappingURL=playback-engine.js.map