playable
Version:
Video player based on HTML5Video
355 lines • 13.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var types_1 = require("../../types");
var state_engine_1 = (0, tslib_1.__importDefault)(require("./state-engine"));
var native_events_broadcaster_1 = (0, tslib_1.__importDefault)(require("./native-events-broadcaster"));
var constants_1 = require("../../../../constants");
var adapters_strategy_1 = (0, tslib_1.__importDefault)(require("./adapters-strategy"));
var video_1 = (0, tslib_1.__importDefault)(require("../../../../constants/events/video"));
var device_detection_1 = require("../../../../utils/device-detection");
var preventDefault = function (e) {
e.preventDefault();
};
var NativeOutput = /** @class */ (function () {
function NativeOutput(_a) {
var eventEmitter = _a.eventEmitter, config = _a.config, _b = _a.availablePlaybackAdapters, availablePlaybackAdapters = _b === void 0 ? [] : _b;
this._createVideoTag(config);
this._eventEmitter = eventEmitter;
this._availablePlaybackAdapters = availablePlaybackAdapters;
this._stateEngine = new state_engine_1.default(this._eventEmitter, this._video);
this._nativeEventsBroadcaster = new native_events_broadcaster_1.default(eventEmitter, this._video);
this._adapterStrategy = new adapters_strategy_1.default(this._eventEmitter, this._video, this._availablePlaybackAdapters);
}
NativeOutput.prototype._createVideoTag = function (_a) {
var videoElement = _a.videoElement, preventContextMenu = _a.preventContextMenu;
if (videoElement && videoElement.tagName === 'VIDEO') {
this._video = videoElement;
}
else {
this._video = document.createElement('video');
}
if (preventContextMenu) {
this._video.addEventListener('contextmenu', preventDefault);
}
};
NativeOutput.prototype.play = function () {
var _this = this;
//Workaround for triggering functionality that requires user event pipe
this._eventEmitter.emitAsync(video_1.default.PLAY_REQUEST);
this._pauseRequested = false;
if (!this._playPromise) {
this._playPromise = this._video.play();
if (this._playPromise !== undefined) {
this._playPromise
.then(function () {
_this._playPromise = null;
if (_this._pauseRequested) {
_this.pause();
}
})
.catch(function (event) {
_this._eventEmitter.emitAsync(video_1.default.PLAY_ABORTED, event);
_this._playPromise = null;
});
}
}
};
NativeOutput.prototype.pause = function () {
if (this._playPromise) {
this._pauseRequested = true;
}
else {
this._video.pause();
this._pauseRequested = false;
}
};
NativeOutput.prototype.setMute = function (mute) {
this._video.muted = mute;
//Workaround for problem with HTML5Video not firing volumechange if source changed right after volume/muted changed
this._nativeEventsBroadcaster.checkVolumeChangeAfterLoadStart();
};
NativeOutput.prototype.setAutoplay = function (isAutoplay) {
this._video.autoplay = isAutoplay;
};
NativeOutput.prototype.setInline = function (isPlaysinline) {
if (isPlaysinline) {
this._video.setAttribute('playsinline', 'true');
}
else {
this._video.removeAttribute('playsinline');
}
};
NativeOutput.prototype.setCrossOrigin = function (crossOrigin) {
if (crossOrigin) {
this._video.setAttribute('crossorigin', crossOrigin);
}
else {
this._video.removeAttribute('crossorigin');
}
};
NativeOutput.prototype.setCurrentTime = function (time) {
this._video.currentTime = time;
};
NativeOutput.prototype.setVolume = function (volume) {
this._video.volume = volume;
//Workaround for problem with HTML5Video not firing volumechange if source changed right after volume/muted changed
this._nativeEventsBroadcaster.checkVolumeChangeAfterLoadStart();
};
NativeOutput.prototype.setLoop = function (isLoop) {
this._video.loop = isLoop;
};
NativeOutput.prototype.setPlaybackRate = function (rate) {
this._video.playbackRate = rate;
};
NativeOutput.prototype.setPreload = function (preload) {
if (preload === void 0) { preload = types_1.PreloadType.AUTO; }
this._video.preload = preload || types_1.PreloadType.AUTO;
};
NativeOutput.prototype.setSrc = function (src, callback) {
this._stateEngine.clearTimestamps();
this._adapterStrategy.connectAdapter(src);
this._stateEngine.setState(constants_1.EngineState.SRC_SET);
if (typeof callback === 'function') {
callback();
}
};
NativeOutput.prototype.syncWithLive = function () {
if (this.attachedAdapter &&
this.attachedAdapter.isDynamicContent &&
!this.attachedAdapter.isDynamicContentEnded &&
!this.isSyncWithLive) {
this.setCurrentTime(this.attachedAdapter.syncWithLiveTime);
this.play();
}
};
NativeOutput.prototype.getElement = function () {
return this._video;
};
NativeOutput.prototype._getViewDimensions = function () {
return {
width: this._video.offsetWidth,
height: this._video.offsetHeight,
};
};
Object.defineProperty(NativeOutput.prototype, "volume", {
get: function () {
return this._video.volume;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "currentTime", {
get: function () {
return this._video.currentTime;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "duration", {
get: function () {
return this._video.duration;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "autoplay", {
get: function () {
return this._video.autoplay;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "crossOrigin", {
get: function () {
return this._video.getAttribute('crossorigin');
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "playbackRate", {
get: function () {
return this._video.playbackRate;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "buffered", {
get: function () {
return this._video.buffered;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "preload", {
get: function () {
return this._video.preload;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "isPaused", {
get: function () {
return this._video.paused;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "isMuted", {
get: function () {
return Boolean(this._video.muted);
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "isEnded", {
get: function () {
return this._video.ended;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "isInline", {
get: function () {
return Boolean(this._video.getAttribute('playsinline'));
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "isAutoplay", {
get: function () {
return this._video.autoplay;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "isLoop", {
get: function () {
return this._video.loop;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "isMetadataLoaded", {
get: function () {
return this._stateEngine.isMetadataLoaded;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "isDynamicContent", {
get: function () {
if (!this.attachedAdapter) {
return false;
}
return this.attachedAdapter.isDynamicContent;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "isDynamicContentEnded", {
get: function () {
if (!this.attachedAdapter) {
return false;
}
return this.attachedAdapter.isDynamicContentEnded;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "isSeekAvailable", {
get: function () {
if (!this.attachedAdapter) {
return false;
}
return this.attachedAdapter.isSeekAvailable;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "isSyncWithLive", {
get: function () {
if (!this.attachedAdapter) {
return false;
}
return this.attachedAdapter.isSyncWithLive;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "isPreloadActive", {
get: function () {
if ((0, device_detection_1.isIPad)() || (0, device_detection_1.isIPhone)() || (0, device_detection_1.isIPod)() || (0, device_detection_1.isAndroid)()) {
return false;
}
return this.preload !== 'none';
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "isAutoPlayActive", {
get: function () {
if ((0, device_detection_1.isIPad)() || (0, device_detection_1.isIPhone)() || (0, device_detection_1.isIPod)() || (0, device_detection_1.isAndroid)()) {
return false;
}
return this.isAutoplay;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "videoHeight", {
get: function () {
return this._video.videoHeight;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "videoWidth", {
get: function () {
return this._video.videoWidth;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "src", {
get: function () {
return this.attachedAdapter && this.attachedAdapter.currentUrl;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "currentState", {
get: function () {
return this._stateEngine.state;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NativeOutput.prototype, "attachedAdapter", {
get: function () {
return this._adapterStrategy.attachedAdapter;
},
enumerable: false,
configurable: true
});
NativeOutput.prototype.getDebugInfo = function () {
var _a = this, duration = _a.duration, currentTime = _a.currentTime;
var adapterDebugInfo;
if (this.attachedAdapter) {
adapterDebugInfo = this.attachedAdapter.debugInfo;
}
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, adapterDebugInfo), { duration: duration, currentTime: currentTime, loadingStateTimestamps: this._stateEngine.stateTimestamps, viewDimensions: this._getViewDimensions(), output: 'html5video' });
};
NativeOutput.prototype.destroy = function () {
this._nativeEventsBroadcaster.destroy();
this._adapterStrategy.destroy();
this._video.removeEventListener('contextmenu', preventDefault);
this._video.parentNode && this._video.parentNode.removeChild(this._video);
this._video = null;
};
NativeOutput.moduleName = 'nativeOutput';
NativeOutput.dependencies = ['eventEmitter', 'config', 'availablePlaybackAdapters'];
return NativeOutput;
}());
exports.default = NativeOutput;
//# sourceMappingURL=html5video-output.js.map