(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 1) { var _name = pair[0].replace(/"/g, '').trim(); var value = pair[1].replace(/"/g, '').trim(); object.parameters[_name] = value; } }); return object; }; /** * Replace the old apple-style `avc1.
.
` codec string with the standard * `avc1.` * * @param {Array} codecs an array of codec strings to fix * @return {Array} the translated codec array * @private */ var translateLegacyCodecs = function translateLegacyCodecs(codecs) { return codecs.map(function (codec) { return codec.replace(/avc1\.(\d+)\.(\d+)/i, function (orig, profile, avcLevel) { var profileHex = ('00' + Number(profile).toString(16)).slice(-2); var avcLevelHex = ('00' + Number(avcLevel).toString(16)).slice(-2); return 'avc1.' + profileHex + '00' + avcLevelHex; }); }); }; exports['default'] = { isAudioCodec: isAudioCodec, parseContentType: parseContentType, isVideoCodec: isVideoCodec, translateLegacyCodecs: translateLegacyCodecs }; module.exports = exports['default']; },{}],3:[function(require,module,exports){ /** * @file create-text-tracks-if-necessary.js */ /** * Create text tracks on video.js if they exist on a segment. * * @param {Object} sourceBuffer the VSB or FSB * @param {Object} mediaSource the HTML or Flash media source * @param {Object} segment the segment that may contain the text track * @private */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var createTextTracksIfNecessary = function createTextTracksIfNecessary(sourceBuffer, mediaSource, segment) { var player = mediaSource.player_; // create an in-band caption track if one is present in the segment if (segment.captions && segment.captions.length) { if (!sourceBuffer.inbandTextTracks_) { sourceBuffer.inbandTextTracks_ = {}; } for (var trackId in segment.captionStreams) { if (!sourceBuffer.inbandTextTracks_[trackId]) { player.tech_.trigger({ type: 'usage', name: 'hls-608' }); var track = player.textTracks().getTrackById(trackId); if (track) { // Resuse an existing track with a CC# id because this was // very likely created by videojs-contrib-hls from information // in the m3u8 for us to use sourceBuffer.inbandTextTracks_[trackId] = track; } else { // Otherwise, create a track with the default `CC#` label and // without a language sourceBuffer.inbandTextTracks_[trackId] = player.addRemoteTextTrack({ kind: 'captions', id: trackId, label: trackId }, false).track; } } } } if (segment.metadata && segment.metadata.length && !sourceBuffer.metadataTrack_) { sourceBuffer.metadataTrack_ = player.addRemoteTextTrack({ kind: 'metadata', label: 'Timed Metadata' }, false).track; sourceBuffer.metadataTrack_.inBandMetadataTrackDispatchType = segment.metadata.dispatchType; } }; exports['default'] = createTextTracksIfNecessary; module.exports = exports['default']; },{}],4:[function(require,module,exports){ /** * @file flash-constants.js */ /** * The maximum size in bytes for append operations to the video.js * SWF. Calling through to Flash blocks and can be expensive so * we chunk data and pass through 4KB at a time, yielding to the * browser between chunks. This gives a theoretical maximum rate of * 1MB/s into Flash. Any higher and we begin to drop frames and UI * responsiveness suffers. * * @private */ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var flashConstants = { // times in milliseconds TIME_BETWEEN_CHUNKS: 1, BYTES_PER_CHUNK: 1024 * 32 }; exports["default"] = flashConstants; module.exports = exports["default"]; },{}],5:[function(require,module,exports){ /** * @file flash-media-source.js */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var _globalDocument = require('global/document'); var _globalDocument2 = _interopRequireDefault(_globalDocument); var _videoJs = require('video.js'); var _videoJs2 = _interopRequireDefault(_videoJs); var _flashSourceBuffer = require('./flash-source-buffer'); var _flashSourceBuffer2 = _interopRequireDefault(_flashSourceBuffer); var _flashConstants = require('./flash-constants'); var _flashConstants2 = _interopRequireDefault(_flashConstants); var _codecUtils = require('./codec-utils'); /** * A flash implmentation of HTML MediaSources and a polyfill * for browsers that don't support native or HTML MediaSources.. * * @link https://developer.mozilla.org/en-US/docs/Web/API/MediaSource * @class FlashMediaSource * @extends videojs.EventTarget */ var FlashMediaSource = (function (_videojs$EventTarget) { _inherits(FlashMediaSource, _videojs$EventTarget); function FlashMediaSource() { var _this = this; _classCallCheck(this, FlashMediaSource); _get(Object.getPrototypeOf(FlashMediaSource.prototype), 'constructor', this).call(this); this.sourceBuffers = []; this.readyState = 'closed'; this.on(['sourceopen', 'webkitsourceopen'], function (event) { // find the swf where we will push media data _this.swfObj = _globalDocument2['default'].getElementById(event.swfId); _this.player_ = (0, _videoJs2['default'])(_this.swfObj.parentNode); _this.tech_ = _this.swfObj.tech; _this.readyState = 'open'; _this.tech_.on('seeking', function () { var i = _this.sourceBuffers.length; while (i--) { _this.sourceBuffers[i].abort(); } }); // trigger load events if (_this.swfObj) { _this.swfObj.vjs_load(); } }); } /** * Set or return the presentation duration. * * @param {Double} value the duration of the media in seconds * @param {Double} the current presentation duration * @link http://www.w3.org/TR/media-source/#widl-MediaSource-duration */ /** * We have this function so that the html and flash interfaces * are the same. * * @private */ _createClass(FlashMediaSource, [{ key: 'addSeekableRange_', value: function addSeekableRange_() {} // intentional no-op /** * Create a new flash source buffer and add it to our flash media source. * * @link https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/addSourceBuffer * @param {String} type the content-type of the source * @return {Object} the flash source buffer */ }, { key: 'addSourceBuffer', value: function addSourceBuffer(type) { var parsedType = (0, _codecUtils.parseContentType)(type); var sourceBuffer = undefined; // if this is an FLV type, we'll push data to flash if (parsedType.type === 'video/mp2t' || parsedType.type === 'audio/mp2t') { // Flash source buffers sourceBuffer = new _flashSourceBuffer2['default'](this); } else { throw new Error('NotSupportedError (Video.js)'); } this.sourceBuffers.push(sourceBuffer); return sourceBuffer; } /** * Signals the end of the stream. * * @link https://w3c.github.io/media-source/#widl-MediaSource-endOfStream-void-EndOfStreamError-error * @param {String=} error Signals that a playback error * has occurred. If specified, it must be either "network" or * "decode". */ }, { key: 'endOfStream', value: function endOfStream(error) { if (error === 'network') { // MEDIA_ERR_NETWORK this.tech_.error(2); } else if (error === 'decode') { // MEDIA_ERR_DECODE this.tech_.error(3); } if (this.readyState !== 'ended') { this.readyState = 'ended'; this.swfObj.vjs_endOfStream(); } } }]); return FlashMediaSource; })(_videoJs2['default'].EventTarget); exports['default'] = FlashMediaSource; try { Object.defineProperty(FlashMediaSource.prototype, 'duration', { /** * Return the presentation duration. * * @return {Double} the duration of the media in seconds * @link http://www.w3.org/TR/media-source/#widl-MediaSource-duration */ get: function get() { if (!this.swfObj) { return NaN; } // get the current duration from the SWF return this.swfObj.vjs_getProperty('duration'); }, /** * Set the presentation duration. * * @param {Double} value the duration of the media in seconds * @return {Double} the duration of the media in seconds * @link http://www.w3.org/TR/media-source/#widl-MediaSource-duration */ set: function set(value) { var i = undefined; var oldDuration = this.swfObj.vjs_getProperty('duration'); this.swfObj.vjs_setProperty('duration', value); if (value < oldDuration) { // In MSE, this triggers the range removal algorithm which causes // an update to occur for (i = 0; i < this.sourceBuffers.length; i++) { this.sourceBuffers[i].remove(value, oldDuration); } } return value; } }); } catch (e) { // IE8 throws if defineProperty is called on a non-DOM node. We // don't support IE8 but we shouldn't throw an error if loaded // there. FlashMediaSource.prototype.duration = NaN; } for (var property in _flashConstants2['default']) { FlashMediaSource[property] = _flashConstants2['default'][property]; } module.exports = exports['default']; },{"./codec-utils":2,"./flash-constants":4,"./flash-source-buffer":6,"global/document":15,"video.js":135}],6:[function(require,module,exports){ /** * @file flash-source-buffer.js */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var _globalWindow = require('global/window'); var _globalWindow2 = _interopRequireDefault(_globalWindow); var _videoJs = require('video.js'); var _videoJs2 = _interopRequireDefault(_videoJs); var _muxJsLibFlv = require('mux.js/lib/flv'); var _muxJsLibFlv2 = _interopRequireDefault(_muxJsLibFlv); var _removeCuesFromTrack = require('./remove-cues-from-track'); var _removeCuesFromTrack2 = _interopRequireDefault(_removeCuesFromTrack); var _createTextTracksIfNecessary = require('./create-text-tracks-if-necessary'); var _createTextTracksIfNecessary2 = _interopRequireDefault(_createTextTracksIfNecessary); var _addTextTrackData = require('./add-text-track-data'); var _flashTransmuxerWorker = require('./flash-transmuxer-worker'); var _flashTransmuxerWorker2 = _interopRequireDefault(_flashTransmuxerWorker); var _webwackify = require('webwackify'); var _webwackify2 = _interopRequireDefault(_webwackify); var _flashConstants = require('./flash-constants'); var _flashConstants2 = _interopRequireDefault(_flashConstants); var resolveFlashTransmuxWorker = function resolveFlashTransmuxWorker() { var result = undefined; try { result = require.resolve('./flash-transmuxer-worker'); } catch (e) { // no result } return result; }; /** * A wrapper around the setTimeout function that uses * the flash constant time between ticks value. * * @param {Function} func the function callback to run * @private */ var scheduleTick = function scheduleTick(func) { // Chrome doesn't invoke requestAnimationFrame callbacks // in background tabs, so use setTimeout. _globalWindow2['default'].setTimeout(func, _flashConstants2['default'].TIME_BETWEEN_CHUNKS); }; /** * Generates a random string of max length 6 * * @return {String} the randomly generated string * @function generateRandomString * @private */ var generateRandomString = function generateRandomString() { return Math.random().toString(36).slice(2, 8); }; /** * Round a number to a specified number of places much like * toFixed but return a number instead of a string representation. * * @param {Number} num A number * @param {Number} places The number of decimal places which to * round * @private */ var toDecimalPlaces = function toDecimalPlaces(num, places) { if (typeof places !== 'number' || places < 0) { places = 0; } var scale = Math.pow(10, places); return Math.round(num * scale) / scale; }; /** * A SourceBuffer implementation for Flash rather than HTML. * * @link https://developer.mozilla.org/en-US/docs/Web/API/MediaSource * @param {Object} mediaSource the flash media source * @class FlashSourceBuffer * @extends videojs.EventTarget */ var FlashSourceBuffer = (function (_videojs$EventTarget) { _inherits(FlashSourceBuffer, _videojs$EventTarget); function FlashSourceBuffer(mediaSource) { var _this = this; _classCallCheck(this, FlashSourceBuffer); _get(Object.getPrototypeOf(FlashSourceBuffer.prototype), 'constructor', this).call(this); var encodedHeader = undefined; // Start off using the globally defined value but refine // as we append data into flash this.chunkSize_ = _flashConstants2['default'].BYTES_PER_CHUNK; // byte arrays queued to be appended this.buffer_ = []; // the total number of queued bytes this.bufferSize_ = 0; // to be able to determine the correct position to seek to, we // need to retain information about the mapping between the // media timeline and PTS values this.basePtsOffset_ = NaN; this.mediaSource_ = mediaSource; this.audioBufferEnd_ = NaN; this.videoBufferEnd_ = NaN; // indicates whether the asynchronous continuation of an operation // is still being processed // see https://w3c.github.io/media-source/#widl-SourceBuffer-updating this.updating = false; this.timestampOffset_ = 0; encodedHeader = _globalWindow2['default'].btoa(String.fromCharCode.apply(null, Array.prototype.slice.call(_muxJsLibFlv2['default'].getFlvHeader()))); // create function names with added randomness for the global callbacks flash will use // to get data from javascript into the swf. Random strings are added as a safety // measure for pages with multiple players since these functions will be global // instead of per instance. When making a call to the swf, the browser generates a // try catch code snippet, but just takes the function name and writes out an unquoted // call to that function. If the player id has any special characters, this will result // in an error, so safePlayerId replaces all special characters to '_' var safePlayerId = this.mediaSource_.player_.id().replace(/[^a-zA-Z0-9]/g, '_'); this.flashEncodedHeaderName_ = 'vjs_flashEncodedHeader_' + safePlayerId + generateRandomString(); this.flashEncodedDataName_ = 'vjs_flashEncodedData_' + safePlayerId + generateRandomString(); _globalWindow2['default'][this.flashEncodedHeaderName_] = function () { delete _globalWindow2['default'][_this.flashEncodedHeaderName_]; return encodedHeader; }; this.mediaSource_.swfObj.vjs_appendChunkReady(this.flashEncodedHeaderName_); this.transmuxer_ = (0, _webwackify2['default'])(_flashTransmuxerWorker2['default'], resolveFlashTransmuxWorker()); this.transmuxer_.postMessage({ action: 'init', options: {} }); this.transmuxer_.onmessage = function (event) { if (event.data.action === 'data') { _this.receiveBuffer_(event.data.segment); } }; this.one('updateend', function () { _this.mediaSource_.tech_.trigger('loadedmetadata'); }); Object.defineProperty(this, 'timestampOffset', { get: function get() { return this.timestampOffset_; }, set: function set(val) { if (typeof val === 'number' && val >= 0) { this.timestampOffset_ = val; // We have to tell flash to expect a discontinuity this.mediaSource_.swfObj.vjs_discontinuity(); // the media <-> PTS mapping must be re-established after // the discontinuity this.basePtsOffset_ = NaN; this.audioBufferEnd_ = NaN; this.videoBufferEnd_ = NaN; this.transmuxer_.postMessage({ action: 'reset' }); } } }); Object.defineProperty(this, 'buffered', { get: function get() { if (!this.mediaSource_ || !this.mediaSource_.swfObj || !('vjs_getProperty' in this.mediaSource_.swfObj)) { return _videoJs2['default'].createTimeRange(); } var buffered = this.mediaSource_.swfObj.vjs_getProperty('buffered'); if (buffered && buffered.length) { buffered[0][0] = toDecimalPlaces(buffered[0][0], 3); buffered[0][1] = toDecimalPlaces(buffered[0][1], 3); } return _videoJs2['default'].createTimeRanges(buffered); } }); // On a seek we remove all text track data since flash has no concept // of a buffered-range and everything else is reset on seek this.mediaSource_.player_.on('seeked', function () { (0, _removeCuesFromTrack2['default'])(0, Infinity, _this.metadataTrack_); if (_this.inbandTextTracks_) { for (var track in _this.inbandTextTracks_) { (0, _removeCuesFromTrack2['default'])(0, Infinity, _this.inbandTextTracks_[track]); } } }); var onHlsReset = this.onHlsReset_.bind(this); // hls-reset is fired by videojs.Hls on to the tech after the main SegmentLoader // resets its state and flushes the buffer this.mediaSource_.player_.tech_.on('hls-reset', onHlsReset); this.mediaSource_.player_.tech_.hls.on('dispose', function () { _this.transmuxer_.terminate(); _this.mediaSource_.player_.tech_.off('hls-reset', onHlsReset); }); } /** * Append bytes to the sourcebuffers buffer, in this case we * have to append it to swf object. * * @link https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer/appendBuffer * @param {Array} bytes */ _createClass(FlashSourceBuffer, [{ key: 'appendBuffer', value: function appendBuffer(bytes) { var error = undefined; if (this.updating) { error = new Error('SourceBuffer.append() cannot be called ' + 'while an update is in progress'); error.name = 'InvalidStateError'; error.code = 11; throw error; } this.updating = true; this.mediaSource_.readyState = 'open'; this.trigger({ type: 'update' }); this.transmuxer_.postMessage({ action: 'push', data: bytes.buffer, byteOffset: bytes.byteOffset, byteLength: bytes.byteLength }, [bytes.buffer]); this.transmuxer_.postMessage({ action: 'flush' }); } /** * Reset the parser and remove any data queued to be sent to the SWF. * * @link https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer/abort */ }, { key: 'abort', value: function abort() { this.buffer_ = []; this.bufferSize_ = 0; this.mediaSource_.swfObj.vjs_abort(); // report any outstanding updates have ended if (this.updating) { this.updating = false; this.trigger({ type: 'updateend' }); } } /** * Flash cannot remove ranges already buffered in the NetStream * but seeking clears the buffer entirely. For most purposes, * having this operation act as a no-op is acceptable. * * @link https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer/remove * @param {Double} start start of the section to remove * @param {Double} end end of the section to remove */ }, { key: 'remove', value: function remove(start, end) { (0, _removeCuesFromTrack2['default'])(start, end, this.metadataTrack_); if (this.inbandTextTracks_) { for (var track in this.inbandTextTracks_) { (0, _removeCuesFromTrack2['default'])(start, end, this.inbandTextTracks_[track]); } } this.trigger({ type: 'update' }); this.trigger({ type: 'updateend' }); } /** * Receive a buffer from the flv. * * @param {Object} segment * @private */ }, { key: 'receiveBuffer_', value: function receiveBuffer_(segment) { var _this2 = this; // create an in-band caption track if one is present in the segment (0, _createTextTracksIfNecessary2['default'])(this, this.mediaSource_, segment); (0, _addTextTrackData.addTextTrackData)(this, segment.captions, segment.metadata); // Do this asynchronously since convertTagsToData_ can be time consuming scheduleTick(function () { var flvBytes = _this2.convertTagsToData_(segment); if (_this2.buffer_.length === 0) { scheduleTick(_this2.processBuffer_.bind(_this2)); } if (flvBytes) { _this2.buffer_.push(flvBytes); _this2.bufferSize_ += flvBytes.byteLength; } }); } /** * Append a portion of the current buffer to the SWF. * * @private */ }, { key: 'processBuffer_', value: function processBuffer_() { var _this3 = this; var chunkSize = _flashConstants2['default'].BYTES_PER_CHUNK; if (!this.buffer_.length) { if (this.updating !== false) { this.updating = false; this.trigger({ type: 'updateend' }); } // do nothing if the buffer is empty return; } // concatenate appends up to the max append size var chunk = this.buffer_[0].subarray(0, chunkSize); // requeue any bytes that won't make it this round if (chunk.byteLength < chunkSize || this.buffer_[0].byteLength === chunkSize) { this.buffer_.shift(); } else { this.buffer_[0] = this.buffer_[0].subarray(chunkSize); } this.bufferSize_ -= chunk.byteLength; // base64 encode the bytes var binary = []; var length = chunk.byteLength; for (var i = 0; i < length; i++) { binary.push(String.fromCharCode(chunk[i])); } var b64str = _globalWindow2['default'].btoa(binary.join('')); _globalWindow2['default'][this.flashEncodedDataName_] = function () { // schedule another processBuffer to process any left over data or to // trigger updateend scheduleTick(_this3.processBuffer_.bind(_this3)); delete _globalWindow2['default'][_this3.flashEncodedDataName_]; return b64str; }; // Notify the swf that segment data is ready to be appended this.mediaSource_.swfObj.vjs_appendChunkReady(this.flashEncodedDataName_); } /** * Turns an array of flv tags into a Uint8Array representing the * flv data. Also removes any tags that are before the current * time so that playback begins at or slightly after the right * place on a seek * * @private * @param {Object} segmentData object of segment data */ }, { key: 'convertTagsToData_', value: function convertTagsToData_(segmentData) { var segmentByteLength = 0; var tech = this.mediaSource_.tech_; var videoTargetPts = 0; var segment = undefined; var videoTags = segmentData.tags.videoTags; var audioTags = segmentData.tags.audioTags; // Establish the media timeline to PTS translation if we don't // have one already if (isNaN(this.basePtsOffset_) && (videoTags.length || audioTags.length)) { // We know there is at least one video or audio tag, but since we may not have both, // we use pts: Infinity for the missing tag. The will force the following Math.min // call will to use the proper pts value since it will always be less than Infinity var firstVideoTag = videoTags[0] || { pts: Infinity }; var firstAudioTag = audioTags[0] || { pts: Infinity }; this.basePtsOffset_ = Math.min(firstAudioTag.pts, firstVideoTag.pts); } if (tech.seeking()) { // Do not use previously saved buffer end values while seeking since buffer // is cleared on all seeks this.videoBufferEnd_ = NaN; this.audioBufferEnd_ = NaN; } if (isNaN(this.videoBufferEnd_)) { if (tech.buffered().length) { videoTargetPts = tech.buffered().end(0) - this.timestampOffset; } // Trim to currentTime if seeking if (tech.seeking()) { videoTargetPts = Math.max(videoTargetPts, tech.currentTime() - this.timestampOffset); } // PTS values are represented in milliseconds videoTargetPts *= 1e3; videoTargetPts += this.basePtsOffset_; } else { // Add a fudge factor of 0.1 to the last video pts appended since a rendition change // could append an overlapping segment, in which case there is a high likelyhood // a tag could have a matching pts to videoBufferEnd_, which would cause // that tag to get appended by the tag.pts >= targetPts check below even though it // is a duplicate of what was previously appended videoTargetPts = this.videoBufferEnd_ + 0.1; } // filter complete GOPs with a presentation time less than the seek target/end of buffer var currentIndex = videoTags.length; // if the last tag is beyond videoTargetPts, then do not search the list for a GOP // since our videoTargetPts lies in a future segment if (currentIndex && videoTags[currentIndex - 1].pts >= videoTargetPts) { // Start by walking backwards from the end of the list until we reach a tag that // is equal to or less than videoTargetPts while (--currentIndex) { var currentTag = videoTags[currentIndex]; if (currentTag.pts > videoTargetPts) { continue; } // if we see a keyFrame or metadata tag once we've gone below videoTargetPts, // exit the loop as this is the start of the GOP that we want to append if (currentTag.keyFrame || currentTag.metaDataTag) { break; } } // We need to check if there are any metadata tags that come before currentIndex // as those will be metadata tags associated with the GOP we are appending // There could be 0 to 2 metadata tags that come before the currentIndex depending // on what videoTargetPts is and whether the transmuxer prepended metadata tags to this // key frame while (currentIndex) { var nextTag = videoTags[currentIndex - 1]; if (!nextTag.metaDataTag) { break; } currentIndex--; } } var filteredVideoTags = videoTags.slice(currentIndex); var audioTargetPts = undefined; if (isNaN(this.audioBufferEnd_)) { audioTargetPts = videoTargetPts; } else { // Add a fudge factor of 0.1 to the last video pts appended since a rendition change // could append an overlapping segment, in which case there is a high likelyhood // a tag could have a matching pts to videoBufferEnd_, which would cause // that tag to get appended by the tag.pts >= targetPts check below even though it // is a duplicate of what was previously appended audioTargetPts = this.audioBufferEnd_ + 0.1; } if (filteredVideoTags.length) { // If targetPts intersects a GOP and we appended the tags for the GOP that came // before targetPts, we want to make sure to trim audio tags at the pts // of the first video tag to avoid brief moments of silence audioTargetPts = Math.min(audioTargetPts, filteredVideoTags[0].pts); } // skip tags with a presentation time less than the seek target/end of buffer currentIndex = 0; while (currentIndex < audioTags.length) { if (audioTags[currentIndex].pts >= audioTargetPts) { break; } currentIndex++; } var filteredAudioTags = audioTags.slice(currentIndex); // update the audio and video buffer ends if (filteredAudioTags.length) { this.audioBufferEnd_ = filteredAudioTags[filteredAudioTags.length - 1].pts; } if (filteredVideoTags.length) { this.videoBufferEnd_ = filteredVideoTags[filteredVideoTags.length - 1].pts; } var tags = this.getOrderedTags_(filteredVideoTags, filteredAudioTags); if (tags.length === 0) { return; } // If we are appending data that comes before our target pts, we want to tell // the swf to adjust its notion of current time to account for the extra tags // we are appending to complete the GOP that intersects with targetPts if (tags[0].pts < videoTargetPts && tech.seeking()) { var fudgeFactor = 1 / 30; var currentTime = tech.currentTime(); var diff = (videoTargetPts - tags[0].pts) / 1e3; var adjustedTime = currentTime - diff; if (adjustedTime < fudgeFactor) { adjustedTime = 0; } try { this.mediaSource_.swfObj.vjs_adjustCurrentTime(adjustedTime); } catch (e) { // no-op for backwards compatability of swf. If adjustCurrentTime fails, // the swf may incorrectly report currentTime and buffered ranges // but should not affect playback over than the time displayed on the // progress bar is inaccurate } } // concatenate the bytes into a single segment for (var i = 0; i < tags.length; i++) { segmentByteLength += tags[i].bytes.byteLength; } segment = new Uint8Array(segmentByteLength); for (var i = 0, j = 0; i < tags.length; i++) { segment.set(tags[i].bytes, j); j += tags[i].bytes.byteLength; } return segment; } /** * Assemble the FLV tags in decoder order. * * @private * @param {Array} videoTags list of video tags * @param {Array} audioTags list of audio tags */ }, { key: 'getOrderedTags_', value: function getOrderedTags_(videoTags, audioTags) { var tag = undefined; var tags = []; while (videoTags.length || audioTags.length) { if (!videoTags.length) { // only audio tags remain tag = audioTags.shift(); } else if (!audioTags.length) { // only video tags remain tag = videoTags.shift(); } else if (audioTags[0].dts < videoTags[0].dts) { // audio should be decoded next tag = audioTags.shift(); } else { // video should be decoded next tag = videoTags.shift(); } tags.push(tag); } return tags; } }, { key: 'onHlsReset_', value: function onHlsReset_() { this.transmuxer_.postMessage({ action: 'resetCaptions' }); } }]); return FlashSourceBuffer; })(_videoJs2['default'].EventTarget); exports['default'] = FlashSourceBuffer; module.exports = exports['default']; },{"./add-text-track-data":1,"./create-text-tracks-if-necessary":3,"./flash-constants":4,"./flash-transmuxer-worker":7,"./remove-cues-from-track":9,"global/window":16,"mux.js/lib/flv":25,"video.js":135,"webwackify":142}],7:[function(require,module,exports){ /** * @file flash-transmuxer-worker.js */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } var _globalWindow = require('global/window'); var _globalWindow2 = _interopRequireDefault(_globalWindow); var _muxJsLibFlv = require('mux.js/lib/flv'); var _muxJsLibFlv2 = _interopRequireDefault(_muxJsLibFlv); /** * Re-emits transmuxer events by converting them into messages to the * world outside the worker. * * @param {Object} transmuxer the transmuxer to wire events on * @private */ var wireTransmuxerEvents = function wireTransmuxerEvents(transmuxer) { transmuxer.on('data', function (segment) { _globalWindow2['default'].postMessage({ action: 'data', segment: segment }); }); transmuxer.on('done', function (data) { _globalWindow2['default'].postMessage({ action: 'done' }); }); }; /** * All incoming messages route through this hash. If no function exists * to handle an incoming message, then we ignore the message. * * @class MessageHandlers * @param {Object} options the options to initialize with */ var MessageHandlers = (function () { function MessageHandlers(options) { _classCallCheck(this, MessageHandlers); this.options = options || {}; this.init(); } /** * Our web wroker interface so that things can talk to mux.js * that will be running in a web worker. The scope is passed to this by * webworkify. * * @param {Object} self the scope for the web worker */ /** * initialize our web worker and wire all the events. */ _createClass(MessageHandlers, [{ key: 'init', value: function init() { if (this.transmuxer) { this.transmuxer.dispose(); } this.transmuxer = new _muxJsLibFlv2['default'].Transmuxer(this.options); wireTransmuxerEvents(this.transmuxer); } /** * Adds data (a ts segment) to the start of the transmuxer pipeline for * processing. * * @param {ArrayBuffer} data data to push into the muxer */ }, { key: 'push', value: function push(data) { // Cast array buffer to correct type for transmuxer var segment = new Uint8Array(data.data, data.byteOffset, data.byteLength); this.transmuxer.push(segment); } /** * Recreate the transmuxer so that the next segment added via `push` * start with a fresh transmuxer. */ }, { key: 'reset', value: function reset() { this.init(); } /** * Forces the pipeline to finish processing the last segment and emit its * results. */ }, { key: 'flush', value: function flush() { this.transmuxer.flush(); } }, { key: 'resetCaptions', value: function resetCaptions() { this.transmuxer.resetCaptions(); } }]); return MessageHandlers; })(); var FlashTransmuxerWorker = function FlashTransmuxerWorker(self) { self.onmessage = function (event) { if (event.data.action === 'init' && event.data.options) { this.messageHandlers = new MessageHandlers(event.data.options); return; } if (!this.messageHandlers) { this.messageHandlers = new MessageHandlers(); } if (event.data && event.data.action && event.data.action !== 'init') { if (this.messageHandlers[event.data.action]) { this.messageHandlers[event.data.action](event.data); } } }; }; exports['default'] = function (self) { return new FlashTransmuxerWorker(self); }; module.exports = exports['default']; },{"global/window":16,"mux.js/lib/flv":25}],8:[function(require,module,exports){ /** * @file html-media-source.js */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var _globalWindow = require('global/window'); var _globalWindow2 = _interopRequireDefault(_globalWindow); var _globalDocument = require('global/document'); var _globalDocument2 = _interopRequireDefault(_globalDocument); var _videoJs = require('video.js'); var _videoJs2 = _interopRequireDefault(_videoJs); var _virtualSourceBuffer = require('./virtual-source-buffer'); var _virtualSourceBuffer2 = _interopRequireDefault(_virtualSourceBuffer); var _addTextTrackData = require('./add-text-track-data'); var _codecUtils = require('./codec-utils'); /** * Our MediaSource implementation in HTML, mimics native * MediaSource where/if possible. * * @link https://developer.mozilla.org/en-US/docs/Web/API/MediaSource * @class HtmlMediaSource * @extends videojs.EventTarget */ var HtmlMediaSource = (function (_videojs$EventTarget) { _inherits(HtmlMediaSource, _videojs$EventTarget); function HtmlMediaSource() { var _this = this; _classCallCheck(this, HtmlMediaSource); _get(Object.getPrototypeOf(HtmlMediaSource.prototype), 'constructor', this).call(this); var property = undefined; this.nativeMediaSource_ = new _globalWindow2['default'].MediaSource(); // delegate to the native MediaSource's methods by default for (property in this.nativeMediaSource_) { if (!(property in HtmlMediaSource.prototype) && typeof this.nativeMediaSource_[property] === 'function') { this[property] = this.nativeMediaSource_[property].bind(this.nativeMediaSource_); } } // emulate `duration` and `seekable` until seeking can be // handled uniformly for live streams // see https://github.com/w3c/media-source/issues/5 this.duration_ = NaN; Object.defineProperty(this, 'duration', { get: function get() { if (this.duration_ === Infinity) { return this.duration_; } return this.nativeMediaSource_.duration; }, set: function set(duration) { this.duration_ = duration; if (duration !== Infinity) { this.nativeMediaSource_.duration = duration; return; } } }); Object.defineProperty(this, 'seekable', { get: function get() { if (this.duration_ === Infinity) { return _videoJs2['default'].createTimeRanges([[0, this.nativeMediaSource_.duration]]); } return this.nativeMediaSource_.seekable; } }); Object.defineProperty(this, 'readyState', { get: function get() { return this.nativeMediaSource_.readyState; } }); Object.defineProperty(this, 'activeSourceBuffers', { get: function get() { return this.activeSourceBuffers_; } }); // the list of virtual and native SourceBuffers created by this // MediaSource this.sourceBuffers = []; this.activeSourceBuffers_ = []; /** * update the list of active source buffers based upon various * imformation from HLS and video.js * * @private */ this.updateActiveSourceBuffers_ = function () { // Retain the reference but empty the array _this.activeSourceBuffers_.length = 0; // If there is only one source buffer, then it will always be active and audio will // be disabled based on the codec of the source buffer if (_this.sourceBuffers.length === 1) { var sourceBuffer = _this.sourceBuffers[0]; sourceBuffer.appendAudioInitSegment_ = true; sourceBuffer.audioDisabled_ = !sourceBuffer.audioCodec_; _this.activeSourceBuffers_.push(sourceBuffer); return; } // There are 2 source buffers, a combined (possibly video only) source buffer and // and an audio only source buffer. // By default, the audio in the combined virtual source buffer is enabled // and the audio-only source buffer (if it exists) is disabled. var disableCombined = false; var disableAudioOnly = true; // TODO: maybe we can store the sourcebuffers on the track objects? // safari may do something like this for (var i = 0; i < _this.player_.audioTracks().length; i++) { var track = _this.player_.audioTracks()[i]; if (track.enabled && track.kind !== 'main') { // The enabled track is an alternate audio track so disable the audio in // the combined source buffer and enable the audio-only source buffer. disableCombined = true; disableAudioOnly = false; break; } } _this.sourceBuffers.forEach(function (sourceBuffer) { /* eslinst-disable */ // TODO once codecs are required, we can switch to using the codecs to determine // what stream is the video stream, rather than relying on videoTracks /* eslinst-enable */ sourceBuffer.appendAudioInitSegment_ = true; if (sourceBuffer.videoCodec_ && sourceBuffer.audioCodec_) { // combined sourceBuffer.audioDisabled_ = disableCombined; } else if (sourceBuffer.videoCodec_ && !sourceBuffer.audioCodec_) { // If the "combined" source buffer is video only, then we do not want // disable the audio-only source buffer (this is mostly for demuxed // audio and video hls) sourceBuffer.audioDisabled_ = true; disableAudioOnly = false; } else if (!sourceBuffer.videoCodec_ && sourceBuffer.audioCodec_) { // audio only sourceBuffer.audioDisabled_ = disableAudioOnly; if (disableAudioOnly) { return; } } _this.activeSourceBuffers_.push(sourceBuffer); }); }; this.onPlayerMediachange_ = function () { _this.sourceBuffers.forEach(function (sourceBuffer) { sourceBuffer.appendAudioInitSegment_ = true; }); }; this.onHlsReset_ = function () { _this.sourceBuffers.forEach(function (sourceBuffer) { if (sourceBuffer.transmuxer_) { sourceBuffer.transmuxer_.postMessage({ action: 'resetCaptions' }); } }); }; this.onHlsSegmentTimeMapping_ = function (event) { _this.sourceBuffers.forEach(function (buffer) { return buffer.timeMapping_ = event.mapping; }); }; // Re-emit MediaSource events on the polyfill ['sourceopen', 'sourceclose', 'sourceended'].forEach(function (eventName) { this.nativeMediaSource_.addEventListener(eventName, this.trigger.bind(this)); }, this); // capture the associated player when the MediaSource is // successfully attached this.on('sourceopen', function (event) { // Get the player this MediaSource is attached to var video = _globalDocument2['default'].querySelector('[src="' + _this.url_ + '"]'); if (!video) { return; } _this.player_ = (0, _videoJs2['default'])(video.parentNode); // hls-reset is fired by videojs.Hls on to the tech after the main SegmentLoader // resets its state and flushes the buffer _this.player_.tech_.on('hls-reset', _this.onHlsReset_); // hls-segment-time-mapping is fired by videojs.Hls on to the tech after the main // SegmentLoader inspects an MTS segment and has an accurate stream to display // time mapping _this.player_.tech_.on('hls-segment-time-mapping', _this.onHlsSegmentTimeMapping_); if (_this.player_.audioTracks && _this.player_.audioTracks()) { _this.player_.audioTracks().on('change', _this.updateActiveSourceBuffers_); _this.player_.audioTracks().on('addtrack', _this.updateActiveSourceBuffers_); _this.player_.audioTracks().on('removetrack', _this.updateActiveSourceBuffers_); } _this.player_.on('mediachange', _this.onPlayerMediachange_); }); this.on('sourceended', function (event) { var duration = (0, _addTextTrackData.durationOfVideo)(_this.duration); for (var i = 0; i < _this.sourceBuffers.length; i++) { var sourcebuffer = _this.sourceBuffers[i]; var cues = sourcebuffer.metadataTrack_ && sourcebuffer.metadataTrack_.cues; if (cues && cues.length) { cues[cues.length - 1].endTime = duration; } } }); // explicitly terminate any WebWorkers that were created // by SourceHandlers this.on('sourceclose', function (event) { this.sourceBuffers.forEach(function (sourceBuffer) { if (sourceBuffer.transmuxer_) { sourceBuffer.transmuxer_.terminate(); } }); this.sourceBuffers.length = 0; if (!this.player_) { return; } if (this.player_.audioTracks && this.player_.audioTracks()) { this.player_.audioTracks().off('change', this.updateActiveSourceBuffers_); this.player_.audioTracks().off('addtrack', this.updateActiveSourceBuffers_); this.player_.audioTracks().off('removetrack', this.updateActiveSourceBuffers_); } // We can only change this if the player hasn't been disposed of yet // because `off` eventually tries to use the el_ property. If it has // been disposed of, then don't worry about it because there are no // event handlers left to unbind anyway if (this.player_.el_) { this.player_.off('mediachange', this.onPlayerMediachange_); this.player_.tech_.off('hls-reset', this.onHlsReset_); this.player_.tech_.off('hls-segment-time-mapping', this.onHlsSegmentTimeMapping_); } }); } /** * Add a range that that can now be seeked to. * * @param {Double} start where to start the addition * @param {Double} end where to end the addition * @private */ _createClass(HtmlMediaSource, [{ key: 'addSeekableRange_', value: function addSeekableRange_(start, end) { var error = undefined; if (this.duration !== Infinity) { error = new Error('MediaSource.addSeekableRange() can only be invoked ' + 'when the duration is Infinity'); error.name = 'InvalidStateError'; error.code = 11; throw error; } if (end > this.nativeMediaSource_.duration || isNaN(this.nativeMediaSource_.duration)) { this.nativeMediaSource_.duration = end; } } /** * Add a source buffer to the media source. * * @link https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/addSourceBuffer * @param {String} type the content-type of the content * @return {Object} the created source buffer */ }, { key: 'addSourceBuffer', value: function addSourceBuffer(type) { var buffer = undefined; var parsedType = (0, _codecUtils.parseContentType)(type); // Create a VirtualSourceBuffer to transmux MPEG-2 transport // stream segments into fragmented MP4s if (/^(video|audio)\/mp2t$/i.test(parsedType.type)) { var codecs = []; if (parsedType.parameters && parsedType.parameters.codecs) { codecs = parsedType.parameters.codecs.split(','); codecs = (0, _codecUtils.translateLegacyCodecs)(codecs); codecs = codecs.filter(function (codec) { return (0, _codecUtils.isAudioCodec)(codec) || (0, _codecUtils.isVideoCodec)(codec); }); } if (codecs.length === 0) { codecs = ['avc1.4d400d', 'mp4a.40.2']; } buffer = new _virtualSourceBuffer2['default'](this, codecs); if (this.sourceBuffers.length !== 0) { // If another VirtualSourceBuffer already exists, then we are creating a // SourceBuffer for an alternate audio track and therefore we know that // the source has both an audio and video track. // That means we should trigger the manual creation of the real // SourceBuffers instead of waiting for the transmuxer to return data this.sourceBuffers[0].createRealSourceBuffers_(); buffer.createRealSourceBuffers_(); // Automatically disable the audio on the first source buffer if // a second source buffer is ever created this.sourceBuffers[0].audioDisabled_ = true; } } else { // delegate to the native implementation buffer = this.nativeMediaSource_.addSourceBuffer(type); } this.sourceBuffers.push(buffer); return buffer; } }]); return HtmlMediaSource; })(_videoJs2['default'].EventTarget); exports['default'] = HtmlMediaSource; module.exports = exports['default']; },{"./add-text-track-data":1,"./codec-utils":2,"./virtual-source-buffer":12,"global/document":15,"global/window":16,"video.js":135}],9:[function(require,module,exports){ /** * @file remove-cues-from-track.js */ /** * Remove cues from a track on video.js. * * @param {Double} start start of where we should remove the cue * @param {Double} end end of where the we should remove the cue * @param {Object} track the text track to remove the cues from * @private */ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var removeCuesFromTrack = function removeCuesFromTrack(start, end, track) { var i = undefined; var cue = undefined; if (!track) { return; } if (!track.cues) { return; } i = track.cues.length; while (i--) { cue = track.cues[i]; // Remove any overlapping cue if (cue.startTime <= end && cue.endTime >= start) { track.removeCue(cue); } } }; exports["default"] = removeCuesFromTrack; module.exports = exports["default"]; },{}],10:[function(require,module,exports){ /** * @file transmuxer-worker.js */ /** * videojs-contrib-media-sources * * Copyright (c) 2015 Brightcove * All rights reserved. * * Handles communication between the browser-world and the mux.js * transmuxer running inside of a WebWorker by exposing a simple * message-based interface to a Transmuxer object. */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } var _globalWindow = require('global/window'); var _globalWindow2 = _interopRequireDefault(_globalWindow); var _muxJsLibMp4 = require('mux.js/lib/mp4'); var _muxJsLibMp42 = _interopRequireDefault(_muxJsLibMp4); /** * Re-emits transmuxer events by converting them into messages to the * world outside the worker. * * @param {Object} transmuxer the transmuxer to wire events on * @private */ var wireTransmuxerEvents = function wireTransmuxerEvents(transmuxer) { transmuxer.on('data', function (segment) { // transfer ownership of the underlying ArrayBuffer // instead of doing a copy to save memory // ArrayBuffers are transferable but generic TypedArrays are not // @link https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Passing_data_by_transferring_ownership_(transferable_objects) var initArray = segment.initSegment; segment.initSegment = { data: initArray.buffer, byteOffset: initArray.byteOffset, byteLength: initArray.byteLength }; var typedArray = segment.data; segment.data = typedArray.buffer; _globalWindow2['default'].postMessage({ action: 'data', segment: segment, byteOffset: typedArray.byteOffset, byteLength: typedArray.byteLength }, [segment.data]); }); if (transmuxer.captionStream) { transmuxer.captionStream.on('data', function (caption) { _globalWindow2['default'].postMessage({ action: 'caption', data: caption }); }); } transmuxer.on('done', function (data) { _globalWindow2['default'].postMessage({ action: 'done' }); }); transmuxer.on('gopInfo', function (gopInfo) { _globalWindow2['default'].postMessage({ action: 'gopInfo', gopInfo: gopInfo }); }); }; /** * All incoming messages route through this hash. If no function exists * to handle an incoming message, then we ignore the message. * * @class MessageHandlers * @param {Object} options the options to initialize with */ var MessageHandlers = (function () { function MessageHandlers(options) { _classCallCheck(this, MessageHandlers); this.options = options || {}; this.init(); } /** * Our web wroker interface so that things can talk to mux.js * that will be running in a web worker. the scope is passed to this by * webworkify. * * @param {Object} self the scope for the web worker */ /** * initialize our web worker and wire all the events. */ _createClass(MessageHandlers, [{ key: 'init', value: function init() { if (this.transmuxer) { this.transmuxer.dispose(); } this.transmuxer = new _muxJsLibMp42['default'].Transmuxer(this.options); wireTransmuxerEvents(this.transmuxer); } /** * Adds data (a ts segment) to the start of the transmuxer pipeline for * processing. * * @param {ArrayBuffer} data data to push into the muxer */ }, { key: 'push', value: function push(data) { // Cast array buffer to correct type for transmuxer var segment = new Uint8Array(data.data, data.byteOffset, data.byteLength); this.transmuxer.push(segment); } /** * Recreate the transmuxer so that the next segment added via `push` * start with a fresh transmuxer. */ }, { key: 'reset', value: function reset() { this.init(); } /** * Set the value that will be used as the `baseMediaDecodeTime` time for the * next segment pushed in. Subsequent segments will have their `baseMediaDecodeTime` * set relative to the first based on the PTS values. * * @param {Object} data used to set the timestamp offset in the muxer */ }, { key: 'setTimestampOffset', value: function setTimestampOffset(data) { var timestampOffset = data.timestampOffset || 0; this.transmuxer.setBaseMediaDecodeTime(Math.round(timestampOffset * 90000)); } }, { key: 'setAudioAppendStart', value: function setAudioAppendStart(data) { this.transmuxer.setAudioAppendStart(Math.ceil(data.appendStart * 90000)); } /** * Forces the pipeline to finish processing the last segment and emit it's * results. * * @param {Object} data event data, not really used */ }, { key: 'flush', value: function flush(data) { this.transmuxer.flush(); } }, { key: 'resetCaptions', value: function resetCaptions() { this.transmuxer.resetCaptions(); } }, { key: 'alignGopsWith', value: function alignGopsWith(data) { this.transmuxer.alignGopsWith(data.gopsToAlignWith.slice()); } }]); return MessageHandlers; })(); var TransmuxerWorker = function TransmuxerWorker(self) { self.onmessage = function (event) { if (event.data.action === 'init' && event.data.options) { this.messageHandlers = new MessageHandlers(event.data.options); return; } if (!this.messageHandlers) { this.messageHandlers = new MessageHandlers(); } if (event.data && event.data.action && event.data.action !== 'init') { if (this.messageHandlers[event.data.action]) { this.messageHandlers[event.data.action](event.data); } } }; }; exports['default'] = function (self) { return new TransmuxerWorker(self); }; module.exports = exports['default']; },{"global/window":16,"mux.js/lib/mp4":33}],11:[function(require,module,exports){ /** * @file videojs-contrib-media-sources.js */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } var _globalWindow = require('global/window'); var _globalWindow2 = _interopRequireDefault(_globalWindow); var _flashMediaSource = require('./flash-media-source'); var _flashMediaSource2 = _interopRequireDefault(_flashMediaSource); var _htmlMediaSource = require('./html-media-source'); var _htmlMediaSource2 = _interopRequireDefault(_htmlMediaSource); var _videoJs = require('video.js'); var _videoJs2 = _interopRequireDefault(_videoJs); var urlCount = 0; // ------------ // Media Source // ------------ var defaults = { // how to determine the MediaSource implementation to use. There // are three available modes: // - auto: use native MediaSources where available and Flash // everywhere else // - html5: always use native MediaSources // - flash: always use the Flash MediaSource polyfill mode: 'auto' }; // store references to the media sources so they can be connected // to a video element (a swf object) // TODO: can we store this somewhere local to this module? _videoJs2['default'].mediaSources = {}; /** * Provide a method for a swf object to notify JS that a * media source is now open. * * @param {String} msObjectURL string referencing the MSE Object URL * @param {String} swfId the swf id */ var open = function open(msObjectURL, swfId) { var mediaSource = _videoJs2['default'].mediaSources[msObjectURL]; if (mediaSource) { mediaSource.trigger({ type: 'sourceopen', swfId: swfId }); } else { throw new Error('Media Source not found (Video.js)'); } }; /** * Check to see if the native MediaSource object exists and supports * an MP4 container with both H.264 video and AAC-LC audio. * * @return {Boolean} if native media sources are supported */ var supportsNativeMediaSources = function supportsNativeMediaSources() { return !!_globalWindow2['default'].MediaSource && !!_globalWindow2['default'].MediaSource.isTypeSupported && _globalWindow2['default'].MediaSource.isTypeSupported('video/mp4;codecs="avc1.4d400d,mp4a.40.2"'); }; /** * An emulation of the MediaSource API so that we can support * native and non-native functionality such as flash and * video/mp2t videos. returns an instance of HtmlMediaSource or * FlashMediaSource depending on what is supported and what options * are passed in. * * @link https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/MediaSource * @param {Object} options options to use during setup. */ var MediaSource = function MediaSource(options) { var settings = _videoJs2['default'].mergeOptions(defaults, options); this.MediaSource = { open: open, supportsNativeMediaSources: supportsNativeMediaSources }; // determine whether HTML MediaSources should be used if (settings.mode === 'html5' || settings.mode === 'auto' && supportsNativeMediaSources()) { return new _htmlMediaSource2['default'](); } else if (_videoJs2['default'].getTech('Flash')) { return new _flashMediaSource2['default'](); } throw new Error('Cannot use Flash or Html5 to create a MediaSource for this video'); }; exports.MediaSource = MediaSource; MediaSource.open = open; MediaSource.supportsNativeMediaSources = supportsNativeMediaSources; /** * A wrapper around the native URL for our MSE object * implementation, this object is exposed under videojs.URL * * @link https://developer.mozilla.org/en-US/docs/Web/API/URL/URL */ var URL = { /** * A wrapper around the native createObjectURL for our objects. * This function maps a native or emulated mediaSource to a blob * url so that it can be loaded into video.js * * @link https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL * @param {MediaSource} object the object to create a blob url to */ createObjectURL: function createObjectURL(object) { var objectUrlPrefix = 'blob:vjs-media-source/'; var url = undefined; // use the native MediaSource to generate an object URL if (object instanceof _htmlMediaSource2['default']) { url = _globalWindow2['default'].URL.createObjectURL(object.nativeMediaSource_); object.url_ = url; return url; } // if the object isn't an emulated MediaSource, delegate to the // native implementation if (!(object instanceof _flashMediaSource2['default'])) { url = _globalWindow2['default'].URL.createObjectURL(object); object.url_ = url; return url; } // build a URL that can be used to map back to the emulated // MediaSource url = objectUrlPrefix + urlCount; urlCount++; // setup the mapping back to object _videoJs2['default'].mediaSources[url] = object; return url; } }; exports.URL = URL; _videoJs2['default'].MediaSource = MediaSource; _videoJs2['default'].URL = URL; },{"./flash-media-source":5,"./html-media-source":8,"global/window":16,"video.js":135}],12:[function(require,module,exports){ /** * @file virtual-source-buffer.js */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var _videoJs = require('video.js'); var _videoJs2 = _interopRequireDefault(_videoJs); var _createTextTracksIfNecessary = require('./create-text-tracks-if-necessary'); var _createTextTracksIfNecessary2 = _interopRequireDefault(_createTextTracksIfNecessary); var _removeCuesFromTrack = require('./remove-cues-from-track'); var _removeCuesFromTrack2 = _interopRequireDefault(_removeCuesFromTrack); var _addTextTrackData = require('./add-text-track-data'); var _webwackify = require('webwackify'); var _webwackify2 = _interopRequireDefault(_webwackify); var _transmuxerWorker = require('./transmuxer-worker'); var _transmuxerWorker2 = _interopRequireDefault(_transmuxerWorker); var _codecUtils = require('./codec-utils'); var resolveTransmuxWorker = function resolveTransmuxWorker() { var result = undefined; try { result = require.resolve('./transmuxer-worker'); } catch (e) { // no result } return result; }; // We create a wrapper around the SourceBuffer so that we can manage the // state of the `updating` property manually. We have to do this because // Firefox changes `updating` to false long before triggering `updateend` // events and that was causing strange problems in videojs-contrib-hls var makeWrappedSourceBuffer = function makeWrappedSourceBuffer(mediaSource, mimeType) { var sourceBuffer = mediaSource.addSourceBuffer(mimeType); var wrapper = Object.create(null); wrapper.updating = false; wrapper.realBuffer_ = sourceBuffer; var _loop = function (key) { if (typeof sourceBuffer[key] === 'function') { wrapper[key] = function () { return sourceBuffer[key].apply(sourceBuffer, arguments); }; } else if (typeof wrapper[key] === 'undefined') { Object.defineProperty(wrapper, key, { get: function get() { return sourceBuffer[key]; }, set: function set(v) { return sourceBuffer[key] = v; } }); } }; for (var key in sourceBuffer) { _loop(key); } return wrapper; }; /** * Returns a list of gops in the buffer that have a pts value of 3 seconds or more in * front of current time. * * @param {Array} buffer * The current buffer of gop information * @param {Player} player * The player instance * @param {Double} mapping * Offset to map display time to stream presentation time * @return {Array} * List of gops considered safe to append over */ var gopsSafeToAlignWith = function gopsSafeToAlignWith(buffer, player, mapping) { if (!player || !buffer.length) { return []; } // pts value for current time + 3 seconds to give a bit more wiggle room var currentTimePts = Math.ceil((player.currentTime() - mapping + 3) * 90000); var i = undefined; for (i = 0; i < buffer.length; i++) { if (buffer[i].pts > currentTimePts) { break; } } return buffer.slice(i); }; exports.gopsSafeToAlignWith = gopsSafeToAlignWith; /** * Appends gop information (timing and byteLength) received by the transmuxer for the * gops appended in the last call to appendBuffer * * @param {Array} buffer * The current buffer of gop information * @param {Array} gops * List of new gop information * @param {boolean} replace * If true, replace the buffer with the new gop information. If false, append the * new gop information to the buffer in the right location of time. * @return {Array} * Updated list of gop information */ var updateGopBuffer = function updateGopBuffer(buffer, gops, replace) { if (!gops.length) { return buffer; } if (replace) { // If we are in safe append mode, then completely overwrite the gop buffer // with the most recent appeneded data. This will make sure that when appending // future segments, we only try to align with gops that are both ahead of current // time and in the last segment appended. return gops.slice(); } var start = gops[0].pts; var i = 0; for (i; i < buffer.length; i++) { if (buffer[i].pts >= start) { break; } } return buffer.slice(0, i).concat(gops); }; exports.updateGopBuffer = updateGopBuffer; /** * Removes gop information in buffer that overlaps with provided start and end * * @param {Array} buffer * The current buffer of gop information * @param {Double} start * position to start the remove at * @param {Double} end * position to end the remove at * @param {Double} mapping * Offset to map display time to stream presentation time */ var removeGopBuffer = function removeGopBuffer(buffer, start, end, mapping) { var startPts = Math.ceil((start - mapping) * 90000); var endPts = Math.ceil((end - mapping) * 90000); var updatedBuffer = buffer.slice(); var i = buffer.length; while (i--) { if (buffer[i].pts <= endPts) { break; } } if (i === -1) { // no removal because end of remove range is before start of buffer return updatedBuffer; } var j = i + 1; while (j--) { if (buffer[j].pts <= startPts) { break; } } // clamp remove range start to 0 index j = Math.max(j, 0); updatedBuffer.splice(j, i - j + 1); return updatedBuffer; }; exports.removeGopBuffer = removeGopBuffer; /** * VirtualSourceBuffers exist so that we can transmux non native formats * into a native format, but keep the same api as a native source buffer. * It creates a transmuxer, that works in its own thread (a web worker) and * that transmuxer muxes the data into a native format. VirtualSourceBuffer will * then send all of that data to the naive sourcebuffer so that it is * indestinguishable from a natively supported format. * * @param {HtmlMediaSource} mediaSource the parent mediaSource * @param {Array} codecs array of codecs that we will be dealing with * @class VirtualSourceBuffer * @extends video.js.EventTarget */ var VirtualSourceBuffer = (function (_videojs$EventTarget) { _inherits(VirtualSourceBuffer, _videojs$EventTarget); function VirtualSourceBuffer(mediaSource, codecs) { var _this = this; _classCallCheck(this, VirtualSourceBuffer); _get(Object.getPrototypeOf(VirtualSourceBuffer.prototype), 'constructor', this).call(this, _videoJs2['default'].EventTarget); this.timestampOffset_ = 0; this.pendingBuffers_ = []; this.bufferUpdating_ = false; this.mediaSource_ = mediaSource; this.codecs_ = codecs; this.audioCodec_ = null; this.videoCodec_ = null; this.audioDisabled_ = false; this.appendAudioInitSegment_ = true; this.gopBuffer_ = []; this.timeMapping_ = 0; this.safeAppend_ = _videoJs2['default'].browser.IE_VERSION >= 11; var options = { remux: false, alignGopsAtEnd: this.safeAppend_ }; this.codecs_.forEach(function (codec) { if ((0, _codecUtils.isAudioCodec)(codec)) { _this.audioCodec_ = codec; } else if ((0, _codecUtils.isVideoCodec)(codec)) { _this.videoCodec_ = codec; } }); // append muxed segments to their respective native buffers as // soon as they are available this.transmuxer_ = (0, _webwackify2['default'])(_transmuxerWorker2['default'], resolveTransmuxWorker()); this.transmuxer_.postMessage({ action: 'init', options: options }); this.transmuxer_.onmessage = function (event) { if (event.data.action === 'data') { return _this.data_(event); } if (event.data.action === 'done') { return _this.done_(event); } if (event.data.action === 'gopInfo') { return _this.appendGopInfo_(event); } }; // this timestampOffset is a property with the side-effect of resetting // baseMediaDecodeTime in the transmuxer on the setter Object.defineProperty(this, 'timestampOffset', { get: function get() { return this.timestampOffset_; }, set: function set(val) { if (typeof val === 'number' && val >= 0) { this.timestampOffset_ = val; this.appendAudioInitSegment_ = true; // reset gop buffer on timestampoffset as this signals a change in timeline this.gopBuffer_.length = 0; this.timeMapping_ = 0; // We have to tell the transmuxer to set the baseMediaDecodeTime to // the desired timestampOffset for the next segment this.transmuxer_.postMessage({ action: 'setTimestampOffset', timestampOffset: val }); } } }); // setting the append window affects both source buffers Object.defineProperty(this, 'appendWindowStart', { get: function get() { return (this.videoBuffer_ || this.audioBuffer_).appendWindowStart; }, set: function set(start) { if (this.videoBuffer_) { this.videoBuffer_.appendWindowStart = start; } if (this.audioBuffer_) { this.audioBuffer_.appendWindowStart = start; } } }); // this buffer is "updating" if either of its native buffers are Object.defineProperty(this, 'updating', { get: function get() { return !!(this.bufferUpdating_ || !this.audioDisabled_ && this.audioBuffer_ && this.audioBuffer_.updating || this.videoBuffer_ && this.videoBuffer_.updating); } }); // the buffered property is the intersection of the buffered // ranges of the native source buffers Object.defineProperty(this, 'buffered', { get: function get() { var start = null; var end = null; var arity = 0; var extents = []; var ranges = []; // neither buffer has been created yet if (!this.videoBuffer_ && !this.audioBuffer_) { return _videoJs2['default'].createTimeRange(); } // only one buffer is configured if (!this.videoBuffer_) { return this.audioBuffer_.buffered; } if (!this.audioBuffer_) { return this.videoBuffer_.buffered; } // both buffers are configured if (this.audioDisabled_) { return this.videoBuffer_.buffered; } // both buffers are empty if (this.videoBuffer_.buffered.length === 0 && this.audioBuffer_.buffered.length === 0) { return _videoJs2['default'].createTimeRange(); } // Handle the case where we have both buffers and create an // intersection of the two var videoBuffered = this.videoBuffer_.buffered; var audioBuffered = this.audioBuffer_.buffered; var count = videoBuffered.length; // A) Gather up all start and end times while (count--) { extents.push({ time: videoBuffered.start(count), type: 'start' }); extents.push({ time: videoBuffered.end(count), type: 'end' }); } count = audioBuffered.length; while (count--) { extents.push({ time: audioBuffered.start(count), type: 'start' }); extents.push({ time: audioBuffered.end(count), type: 'end' }); } // B) Sort them by time extents.sort(function (a, b) { return a.time - b.time; }); // C) Go along one by one incrementing arity for start and decrementing // arity for ends for (count = 0; count < extents.length; count++) { if (extents[count].type === 'start') { arity++; // D) If arity is ever incremented to 2 we are entering an // overlapping range if (arity === 2) { start = extents[count].time; } } else if (extents[count].type === 'end') { arity--; // E) If arity is ever decremented to 1 we leaving an // overlapping range if (arity === 1) { end = extents[count].time; } } // F) Record overlapping ranges if (start !== null && end !== null) { ranges.push([start, end]); start = null; end = null; } } return _videoJs2['default'].createTimeRanges(ranges); } }); } /** * When we get a data event from the transmuxer * we call this function and handle the data that * was sent to us * * @private * @param {Event} event the data event from the transmuxer */ _createClass(VirtualSourceBuffer, [{ key: 'data_', value: function data_(event) { var segment = event.data.segment; // Cast ArrayBuffer to TypedArray segment.data = new Uint8Array(segment.data, event.data.byteOffset, event.data.byteLength); segment.initSegment = new Uint8Array(segment.initSegment.data, segment.initSegment.byteOffset, segment.initSegment.byteLength); (0, _createTextTracksIfNecessary2['default'])(this, this.mediaSource_, segment); // Add the segments to the pendingBuffers array this.pendingBuffers_.push(segment); return; } /** * When we get a done event from the transmuxer * we call this function and we process all * of the pending data that we have been saving in the * data_ function * * @private * @param {Event} event the done event from the transmuxer */ }, { key: 'done_', value: function done_(event) { // Don't process and append data if the mediaSource is closed if (this.mediaSource_.readyState === 'closed') { this.pendingBuffers_.length = 0; return; } // All buffers should have been flushed from the muxer // start processing anything we have received this.processPendingSegments_(); return; } /** * Create our internal native audio/video source buffers and add * event handlers to them with the following conditions: * 1. they do not already exist on the mediaSource * 2. this VSB has a codec for them * * @private */ }, { key: 'createRealSourceBuffers_', value: function createRealSourceBuffers_() { var _this2 = this; var types = ['audio', 'video']; types.forEach(function (type) { // Don't create a SourceBuffer of this type if we don't have a // codec for it if (!_this2[type + 'Codec_']) { return; } // Do nothing if a SourceBuffer of this type already exists if (_this2[type + 'Buffer_']) { return; } var buffer = null; // If the mediasource already has a SourceBuffer for the codec // use that if (_this2.mediaSource_[type + 'Buffer_']) { buffer = _this2.mediaSource_[type + 'Buffer_']; // In multiple audio track cases, the audio source buffer is disabled // on the main VirtualSourceBuffer by the HTMLMediaSource much earlier // than createRealSourceBuffers_ is called to create the second // VirtualSourceBuffer because that happens as a side-effect of // videojs-contrib-hls starting the audioSegmentLoader. As a result, // the audioBuffer is essentially "ownerless" and no one will toggle // the `updating` state back to false once the `updateend` event is received // // Setting `updating` to false manually will work around this // situation and allow work to continue buffer.updating = false; } else { var codecProperty = type + 'Codec_'; var mimeType = type + '/mp4;codecs="' + _this2[codecProperty] + '"'; buffer = makeWrappedSourceBuffer(_this2.mediaSource_.nativeMediaSource_, mimeType); _this2.mediaSource_[type + 'Buffer_'] = buffer; } _this2[type + 'Buffer_'] = buffer; // Wire up the events to the SourceBuffer ['update', 'updatestart', 'updateend'].forEach(function (event) { buffer.addEventListener(event, function () { // if audio is disabled if (type === 'audio' && _this2.audioDisabled_) { return; } if (event === 'updateend') { _this2[type + 'Buffer_'].updating = false; } var shouldTrigger = types.every(function (t) { // skip checking audio's updating status if audio // is not enabled if (t === 'audio' && _this2.audioDisabled_) { return true; } // if the other type if updating we don't trigger if (type !== t && _this2[t + 'Buffer_'] && _this2[t + 'Buffer_'].updating) { return false; } return true; }); if (shouldTrigger) { return _this2.trigger(event); } }); }); }); } /** * Emulate the native mediasource function, but our function will * send all of the proposed segments to the transmuxer so that we * can transmux them before we append them to our internal * native source buffers in the correct format. * * @link https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer/appendBuffer * @param {Uint8Array} segment the segment to append to the buffer */ }, { key: 'appendBuffer', value: function appendBuffer(segment) { // Start the internal "updating" state this.bufferUpdating_ = true; if (this.audioBuffer_ && this.audioBuffer_.buffered.length) { var audioBuffered = this.audioBuffer_.buffered; this.transmuxer_.postMessage({ action: 'setAudioAppendStart', appendStart: audioBuffered.end(audioBuffered.length - 1) }); } if (this.videoBuffer_) { this.transmuxer_.postMessage({ action: 'alignGopsWith', gopsToAlignWith: gopsSafeToAlignWith(this.gopBuffer_, this.mediaSource_.player_, this.timeMapping_) }); } this.transmuxer_.postMessage({ action: 'push', // Send the typed-array of data as an ArrayBuffer so that // it can be sent as a "Transferable" and avoid the costly // memory copy data: segment.buffer, // To recreate the original typed-array, we need information // about what portion of the ArrayBuffer it was a view into byteOffset: segment.byteOffset, byteLength: segment.byteLength }, [segment.buffer]); this.transmuxer_.postMessage({ action: 'flush' }); } /** * Appends gop information (timing and byteLength) received by the transmuxer for the * gops appended in the last call to appendBuffer * * @param {Event} event * The gopInfo event from the transmuxer * @param {Array} event.data.gopInfo * List of gop info to append */ }, { key: 'appendGopInfo_', value: function appendGopInfo_(event) { this.gopBuffer_ = updateGopBuffer(this.gopBuffer_, event.data.gopInfo, this.safeAppend_); } /** * Emulate the native mediasource function and remove parts * of the buffer from any of our internal buffers that exist * * @link https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer/remove * @param {Double} start position to start the remove at * @param {Double} end position to end the remove at */ }, { key: 'remove', value: function remove(start, end) { if (this.videoBuffer_) { this.videoBuffer_.updating = true; this.videoBuffer_.remove(start, end); this.gopBuffer_ = removeGopBuffer(this.gopBuffer_, start, end, this.timeMapping_); } if (!this.audioDisabled_ && this.audioBuffer_) { this.audioBuffer_.updating = true; this.audioBuffer_.remove(start, end); } // Remove Metadata Cues (id3) (0, _removeCuesFromTrack2['default'])(start, end, this.metadataTrack_); // Remove Any Captions if (this.inbandTextTracks_) { for (var track in this.inbandTextTracks_) { (0, _removeCuesFromTrack2['default'])(start, end, this.inbandTextTracks_[track]); } } } /** * Process any segments that the muxer has output * Concatenate segments together based on type and append them into * their respective sourceBuffers * * @private */ }, { key: 'processPendingSegments_', value: function processPendingSegments_() { var sortedSegments = { video: { segments: [], bytes: 0 }, audio: { segments: [], bytes: 0 }, captions: [], metadata: [] }; // Sort segments into separate video/audio arrays and // keep track of their total byte lengths sortedSegments = this.pendingBuffers_.reduce(function (segmentObj, segment) { var type = segment.type; var data = segment.data; var initSegment = segment.initSegment; segmentObj[type].segments.push(data); segmentObj[type].bytes += data.byteLength; segmentObj[type].initSegment = initSegment; // Gather any captions into a single array if (segment.captions) { segmentObj.captions = segmentObj.captions.concat(segment.captions); } if (segment.info) { segmentObj[type].info = segment.info; } // Gather any metadata into a single array if (segment.metadata) { segmentObj.metadata = segmentObj.metadata.concat(segment.metadata); } return segmentObj; }, sortedSegments); // Create the real source buffers if they don't exist by now since we // finally are sure what tracks are contained in the source if (!this.videoBuffer_ && !this.audioBuffer_) { // Remove any codecs that may have been specified by default but // are no longer applicable now if (sortedSegments.video.bytes === 0) { this.videoCodec_ = null; } if (sortedSegments.audio.bytes === 0) { this.audioCodec_ = null; } this.createRealSourceBuffers_(); } if (sortedSegments.audio.info) { this.mediaSource_.trigger({ type: 'audioinfo', info: sortedSegments.audio.info }); } if (sortedSegments.video.info) { this.mediaSource_.trigger({ type: 'videoinfo', info: sortedSegments.video.info }); } if (this.appendAudioInitSegment_) { if (!this.audioDisabled_ && this.audioBuffer_) { sortedSegments.audio.segments.unshift(sortedSegments.audio.initSegment); sortedSegments.audio.bytes += sortedSegments.audio.initSegment.byteLength; } this.appendAudioInitSegment_ = false; } var triggerUpdateend = false; // Merge multiple video and audio segments into one and append if (this.videoBuffer_ && sortedSegments.video.bytes) { sortedSegments.video.segments.unshift(sortedSegments.video.initSegment); sortedSegments.video.bytes += sortedSegments.video.initSegment.byteLength; this.concatAndAppendSegments_(sortedSegments.video, this.videoBuffer_); // TODO: are video tracks the only ones with text tracks? (0, _addTextTrackData.addTextTrackData)(this, sortedSegments.captions, sortedSegments.metadata); } else if (this.videoBuffer_ && (this.audioDisabled_ || !this.audioBuffer_)) { // The transmuxer did not return any bytes of video, meaning it was all trimmed // for gop alignment. Since we have a video buffer and audio is disabled, updateend // will never be triggered by this source buffer, which will cause contrib-hls // to be stuck forever waiting for updateend. If audio is not disabled, updateend // will be triggered by the audio buffer, which will be sent upwards since the video // buffer will not be in an updating state. triggerUpdateend = true; } if (!this.audioDisabled_ && this.audioBuffer_) { this.concatAndAppendSegments_(sortedSegments.audio, this.audioBuffer_); } this.pendingBuffers_.length = 0; if (triggerUpdateend) { this.trigger('updateend'); } // We are no longer in the internal "updating" state this.bufferUpdating_ = false; } /** * Combine all segments into a single Uint8Array and then append them * to the destination buffer * * @param {Object} segmentObj * @param {SourceBuffer} destinationBuffer native source buffer to append data to * @private */ }, { key: 'concatAndAppendSegments_', value: function concatAndAppendSegments_(segmentObj, destinationBuffer) { var offset = 0; var tempBuffer = undefined; if (segmentObj.bytes) { tempBuffer = new Uint8Array(segmentObj.bytes); // Combine the individual segments into one large typed-array segmentObj.segments.forEach(function (segment) { tempBuffer.set(segment, offset); offset += segment.byteLength; }); try { destinationBuffer.updating = true; destinationBuffer.appendBuffer(tempBuffer); } catch (error) { if (this.mediaSource_.player_) { this.mediaSource_.player_.error({ code: -3, type: 'APPEND_BUFFER_ERR', message: error.message, originalError: error }); } } } } /** * Emulate the native mediasource function. abort any soureBuffer * actions and throw out any un-appended data. * * @link https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer/abort */ }, { key: 'abort', value: function abort() { if (this.videoBuffer_) { this.videoBuffer_.abort(); } if (!this.audioDisabled_ && this.audioBuffer_) { this.audioBuffer_.abort(); } if (this.transmuxer_) { this.transmuxer_.postMessage({ action: 'reset' }); } this.pendingBuffers_.length = 0; this.bufferUpdating_ = false; } }]); return VirtualSourceBuffer; })(_videoJs2['default'].EventTarget); exports['default'] = VirtualSourceBuffer; },{"./add-text-track-data":1,"./codec-utils":2,"./create-text-tracks-if-necessary":3,"./remove-cues-from-track":9,"./transmuxer-worker":10,"video.js":135,"webwackify":142}],13:[function(require,module,exports){ },{}],14:[function(require,module,exports){ var isFunction = require('is-function') module.exports = forEach var toString = Object.prototype.toString var hasOwnProperty = Object.prototype.hasOwnProperty function forEach(list, iterator, context) { if (!isFunction(iterator)) { throw new TypeError('iterator must be a function') } if (arguments.length < 3) { context = this } if (toString.call(list) === '[object Array]') forEachArray(list, iterator, context) else if (typeof list === 'string') forEachString(list, iterator, context) else forEachObject(list, iterator, context) } function forEachArray(array, iterator, context) { for (var i = 0, len = array.length; i < len; i++) { if (hasOwnProperty.call(array, i)) { iterator.call(context, array[i], i, array) } } } function forEachString(string, iterator, context) { for (var i = 0, len = string.length; i < len; i++) { // no such thing as a sparse string. iterator.call(context, string.charAt(i), i, string) } } function forEachObject(object, iterator, context) { for (var k in object) { if (hasOwnProperty.call(object, k)) { iterator.call(context, object[k], k, object) } } } },{"is-function":17}],15:[function(require,module,exports){ (function (global){ var topLevel = typeof global !== 'undefined' ? global : typeof window !== 'undefined' ? window : {} var minDoc = require('min-document'); var doccy; if (typeof document !== 'undefined') { doccy = document; } else { doccy = topLevel['__GLOBAL_DOCUMENT_CACHE@4']; if (!doccy) { doccy = topLevel['__GLOBAL_DOCUMENT_CACHE@4'] = minDoc; } } module.exports = doccy; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) },{"min-document":13}],16:[function(require,module,exports){ (function (global){ var win; if (typeof window !== "undefined") { win = window; } else if (typeof global !== "undefined") { win = global; } else if (typeof self !== "undefined"){ win = self; } else { win = {}; } module.exports = win; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) },{}],17:[function(require,module,exports){ module.exports = isFunction var toString = Object.prototype.toString function isFunction (fn) { var string = toString.call(fn) return string === '[object Function]' || (typeof fn === 'function' && string !== '[object RegExp]') || (typeof window !== 'undefined' && // IE8 and below (fn === window.setTimeout || fn === window.alert || fn === window.confirm || fn === window.prompt)) }; },{}],18:[function(require,module,exports){ /** * mux.js * * Copyright (c) 2016 Brightcove * All rights reserved. * * A stream-based aac to mp4 converter. This utility can be used to * deliver mp4s to a SourceBuffer on platforms that support native * Media Source Extensions. */ 'use strict'; var Stream = require('../utils/stream.js'); // Constants var AacStream; /** * Splits an incoming stream of binary data into ADTS and ID3 Frames. */ AacStream = function() { var everything = new Uint8Array(), timeStamp = 0; AacStream.prototype.init.call(this); this.setTimestamp = function(timestamp) { timeStamp = timestamp; }; this.parseId3TagSize = function(header, byteIndex) { var returnSize = (header[byteIndex + 6] << 21) | (header[byteIndex + 7] << 14) | (header[byteIndex + 8] << 7) | (header[byteIndex + 9]), flags = header[byteIndex + 5], footerPresent = (flags & 16) >> 4; if (footerPresent) { return returnSize + 20; } return returnSize + 10; }; this.parseAdtsSize = function(header, byteIndex) { var lowThree = (header[byteIndex + 5] & 0xE0) >> 5, middle = header[byteIndex + 4] << 3, highTwo = header[byteIndex + 3] & 0x3 << 11; return (highTwo | middle) | lowThree; }; this.push = function(bytes) { var frameSize = 0, byteIndex = 0, bytesLeft, chunk, packet, tempLength; // If there are bytes remaining from the last segment, prepend them to the // bytes that were pushed in if (everything.length) { tempLength = everything.length; everything = new Uint8Array(bytes.byteLength + tempLength); everything.set(everything.subarray(0, tempLength)); everything.set(bytes, tempLength); } else { everything = bytes; } while (everything.length - byteIndex >= 3) { if ((everything[byteIndex] === 'I'.charCodeAt(0)) && (everything[byteIndex + 1] === 'D'.charCodeAt(0)) && (everything[byteIndex + 2] === '3'.charCodeAt(0))) { // Exit early because we don't have enough to parse // the ID3 tag header if (everything.length - byteIndex < 10) { break; } // check framesize frameSize = this.parseId3TagSize(everything, byteIndex); // Exit early if we don't have enough in the buffer // to emit a full packet if (frameSize > everything.length) { break; } chunk = { type: 'timed-metadata', data: everything.subarray(byteIndex, byteIndex + frameSize) }; this.trigger('data', chunk); byteIndex += frameSize; continue; } else if ((everything[byteIndex] & 0xff === 0xff) && ((everything[byteIndex + 1] & 0xf0) === 0xf0)) { // Exit early because we don't have enough to parse // the ADTS frame header if (everything.length - byteIndex < 7) { break; } frameSize = this.parseAdtsSize(everything, byteIndex); // Exit early if we don't have enough in the buffer // to emit a full packet if (frameSize > everything.length) { break; } packet = { type: 'audio', data: everything.subarray(byteIndex, byteIndex + frameSize), pts: timeStamp, dts: timeStamp }; this.trigger('data', packet); byteIndex += frameSize; continue; } byteIndex++; } bytesLeft = everything.length - byteIndex; if (bytesLeft > 0) { everything = everything.subarray(byteIndex); } else { everything = new Uint8Array(); } }; }; AacStream.prototype = new Stream(); module.exports = AacStream; },{"../utils/stream.js":38}],19:[function(require,module,exports){ 'use strict'; var Stream = require('../utils/stream.js'); var AdtsStream; var ADTS_SAMPLING_FREQUENCIES = [ 96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350 ]; /* * Accepts a ElementaryStream and emits data events with parsed * AAC Audio Frames of the individual packets. Input audio in ADTS * format is unpacked and re-emitted as AAC frames. * * @see http://wiki.multimedia.cx/index.php?title=ADTS * @see http://wiki.multimedia.cx/?title=Understanding_AAC */ AdtsStream = function() { var buffer; AdtsStream.prototype.init.call(this); this.push = function(packet) { var i = 0, frameNum = 0, frameLength, protectionSkipBytes, frameEnd, oldBuffer, sampleCount, adtsFrameDuration; if (packet.type !== 'audio') { // ignore non-audio data return; } // Prepend any data in the buffer to the input data so that we can parse // aac frames the cross a PES packet boundary if (buffer) { oldBuffer = buffer; buffer = new Uint8Array(oldBuffer.byteLength + packet.data.byteLength); buffer.set(oldBuffer); buffer.set(packet.data, oldBuffer.byteLength); } else { buffer = packet.data; } // unpack any ADTS frames which have been fully received // for details on the ADTS header, see http://wiki.multimedia.cx/index.php?title=ADTS while (i + 5 < buffer.length) { // Loook for the start of an ADTS header.. if (buffer[i] !== 0xFF || (buffer[i + 1] & 0xF6) !== 0xF0) { // If a valid header was not found, jump one forward and attempt to // find a valid ADTS header starting at the next byte i++; continue; } // The protection skip bit tells us if we have 2 bytes of CRC data at the // end of the ADTS header protectionSkipBytes = (~buffer[i + 1] & 0x01) * 2; // Frame length is a 13 bit integer starting 16 bits from the // end of the sync sequence frameLength = ((buffer[i + 3] & 0x03) << 11) | (buffer[i + 4] << 3) | ((buffer[i + 5] & 0xe0) >> 5); sampleCount = ((buffer[i + 6] & 0x03) + 1) * 1024; adtsFrameDuration = (sampleCount * 90000) / ADTS_SAMPLING_FREQUENCIES[(buffer[i + 2] & 0x3c) >>> 2]; frameEnd = i + frameLength; // If we don't have enough data to actually finish this ADTS frame, return // and wait for more data if (buffer.byteLength < frameEnd) { return; } // Otherwise, deliver the complete AAC frame this.trigger('data', { pts: packet.pts + (frameNum * adtsFrameDuration), dts: packet.dts + (frameNum * adtsFrameDuration), sampleCount: sampleCount, audioobjecttype: ((buffer[i + 2] >>> 6) & 0x03) + 1, channelcount: ((buffer[i + 2] & 1) << 2) | ((buffer[i + 3] & 0xc0) >>> 6), samplerate: ADTS_SAMPLING_FREQUENCIES[(buffer[i + 2] & 0x3c) >>> 2], samplingfrequencyindex: (buffer[i + 2] & 0x3c) >>> 2, // assume ISO/IEC 14496-12 AudioSampleEntry default of 16 samplesize: 16, data: buffer.subarray(i + 7 + protectionSkipBytes, frameEnd) }); // If the buffer is empty, clear it and return if (buffer.byteLength === frameEnd) { buffer = undefined; return; } frameNum++; // Remove the finished frame from the buffer and start the process again buffer = buffer.subarray(frameEnd); } }; this.flush = function() { this.trigger('done'); }; }; AdtsStream.prototype = new Stream(); module.exports = AdtsStream; },{"../utils/stream.js":38}],20:[function(require,module,exports){ 'use strict'; var Stream = require('../utils/stream.js'); var ExpGolomb = require('../utils/exp-golomb.js'); var H264Stream, NalByteStream; var PROFILES_WITH_OPTIONAL_SPS_DATA; /** * Accepts a NAL unit byte stream and unpacks the embedded NAL units. */ NalByteStream = function() { var syncPoint = 0, i, buffer; NalByteStream.prototype.init.call(this); this.push = function(data) { var swapBuffer; if (!buffer) { buffer = data.data; } else { swapBuffer = new Uint8Array(buffer.byteLength + data.data.byteLength); swapBuffer.set(buffer); swapBuffer.set(data.data, buffer.byteLength); buffer = swapBuffer; } // Rec. ITU-T H.264, Annex B // scan for NAL unit boundaries // a match looks like this: // 0 0 1 .. NAL .. 0 0 1 // ^ sync point ^ i // or this: // 0 0 1 .. NAL .. 0 0 0 // ^ sync point ^ i // advance the sync point to a NAL start, if necessary for (; syncPoint < buffer.byteLength - 3; syncPoint++) { if (buffer[syncPoint + 2] === 1) { // the sync point is properly aligned i = syncPoint + 5; break; } } while (i < buffer.byteLength) { // look at the current byte to determine if we've hit the end of // a NAL unit boundary switch (buffer[i]) { case 0: // skip past non-sync sequences if (buffer[i - 1] !== 0) { i += 2; break; } else if (buffer[i - 2] !== 0) { i++; break; } // deliver the NAL unit if it isn't empty if (syncPoint + 3 !== i - 2) { this.trigger('data', buffer.subarray(syncPoint + 3, i - 2)); } // drop trailing zeroes do { i++; } while (buffer[i] !== 1 && i < buffer.length); syncPoint = i - 2; i += 3; break; case 1: // skip past non-sync sequences if (buffer[i - 1] !== 0 || buffer[i - 2] !== 0) { i += 3; break; } // deliver the NAL unit this.trigger('data', buffer.subarray(syncPoint + 3, i - 2)); syncPoint = i - 2; i += 3; break; default: // the current byte isn't a one or zero, so it cannot be part // of a sync sequence i += 3; break; } } // filter out the NAL units that were delivered buffer = buffer.subarray(syncPoint); i -= syncPoint; syncPoint = 0; }; this.flush = function() { // deliver the last buffered NAL unit if (buffer && buffer.byteLength > 3) { this.trigger('data', buffer.subarray(syncPoint + 3)); } // reset the stream state buffer = null; syncPoint = 0; this.trigger('done'); }; }; NalByteStream.prototype = new Stream(); // values of profile_idc that indicate additional fields are included in the SPS // see Recommendation ITU-T H.264 (4/2013), // 7.3.2.1.1 Sequence parameter set data syntax PROFILES_WITH_OPTIONAL_SPS_DATA = { 100: true, 110: true, 122: true, 244: true, 44: true, 83: true, 86: true, 118: true, 128: true, 138: true, 139: true, 134: true }; /** * Accepts input from a ElementaryStream and produces H.264 NAL unit data * events. */ H264Stream = function() { var nalByteStream = new NalByteStream(), self, trackId, currentPts, currentDts, discardEmulationPreventionBytes, readSequenceParameterSet, skipScalingList; H264Stream.prototype.init.call(this); self = this; this.push = function(packet) { if (packet.type !== 'video') { return; } trackId = packet.trackId; currentPts = packet.pts; currentDts = packet.dts; nalByteStream.push(packet); }; nalByteStream.on('data', function(data) { var event = { trackId: trackId, pts: currentPts, dts: currentDts, data: data }; switch (data[0] & 0x1f) { case 0x05: event.nalUnitType = 'slice_layer_without_partitioning_rbsp_idr'; break; case 0x06: event.nalUnitType = 'sei_rbsp'; event.escapedRBSP = discardEmulationPreventionBytes(data.subarray(1)); break; case 0x07: event.nalUnitType = 'seq_parameter_set_rbsp'; event.escapedRBSP = discardEmulationPreventionBytes(data.subarray(1)); event.config = readSequenceParameterSet(event.escapedRBSP); break; case 0x08: event.nalUnitType = 'pic_parameter_set_rbsp'; break; case 0x09: event.nalUnitType = 'access_unit_delimiter_rbsp'; break; default: break; } self.trigger('data', event); }); nalByteStream.on('done', function() { self.trigger('done'); }); this.flush = function() { nalByteStream.flush(); }; /** * Advance the ExpGolomb decoder past a scaling list. The scaling * list is optionally transmitted as part of a sequence parameter * set and is not relevant to transmuxing. * @param count {number} the number of entries in this scaling list * @param expGolombDecoder {object} an ExpGolomb pointed to the * start of a scaling list * @see Recommendation ITU-T H.264, Section 7.3.2.1.1.1 */ skipScalingList = function(count, expGolombDecoder) { var lastScale = 8, nextScale = 8, j, deltaScale; for (j = 0; j < count; j++) { if (nextScale !== 0) { deltaScale = expGolombDecoder.readExpGolomb(); nextScale = (lastScale + deltaScale + 256) % 256; } lastScale = (nextScale === 0) ? lastScale : nextScale; } }; /** * Expunge any "Emulation Prevention" bytes from a "Raw Byte * Sequence Payload" * @param data {Uint8Array} the bytes of a RBSP from a NAL * unit * @return {Uint8Array} the RBSP without any Emulation * Prevention Bytes */ discardEmulationPreventionBytes = function(data) { var length = data.byteLength, emulationPreventionBytesPositions = [], i = 1, newLength, newData; // Find all `Emulation Prevention Bytes` while (i < length - 2) { if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0x03) { emulationPreventionBytesPositions.push(i + 2); i += 2; } else { i++; } } // If no Emulation Prevention Bytes were found just return the original // array if (emulationPreventionBytesPositions.length === 0) { return data; } // Create a new array to hold the NAL unit data newLength = length - emulationPreventionBytesPositions.length; newData = new Uint8Array(newLength); var sourceIndex = 0; for (i = 0; i < newLength; sourceIndex++, i++) { if (sourceIndex === emulationPreventionBytesPositions[0]) { // Skip this byte sourceIndex++; // Remove this position index emulationPreventionBytesPositions.shift(); } newData[i] = data[sourceIndex]; } return newData; }; /** * Read a sequence parameter set and return some interesting video * properties. A sequence parameter set is the H264 metadata that * describes the properties of upcoming video frames. * @param data {Uint8Array} the bytes of a sequence parameter set * @return {object} an object with configuration parsed from the * sequence parameter set, including the dimensions of the * associated video frames. */ readSequenceParameterSet = function(data) { var frameCropLeftOffset = 0, frameCropRightOffset = 0, frameCropTopOffset = 0, frameCropBottomOffset = 0, sarScale = 1, expGolombDecoder, profileIdc, levelIdc, profileCompatibility, chromaFormatIdc, picOrderCntType, numRefFramesInPicOrderCntCycle, picWidthInMbsMinus1, picHeightInMapUnitsMinus1, frameMbsOnlyFlag, scalingListCount, sarRatio, aspectRatioIdc, i; expGolombDecoder = new ExpGolomb(data); profileIdc = expGolombDecoder.readUnsignedByte(); // profile_idc profileCompatibility = expGolombDecoder.readUnsignedByte(); // constraint_set[0-5]_flag levelIdc = expGolombDecoder.readUnsignedByte(); // level_idc u(8) expGolombDecoder.skipUnsignedExpGolomb(); // seq_parameter_set_id // some profiles have more optional data we don't need if (PROFILES_WITH_OPTIONAL_SPS_DATA[profileIdc]) { chromaFormatIdc = expGolombDecoder.readUnsignedExpGolomb(); if (chromaFormatIdc === 3) { expGolombDecoder.skipBits(1); // separate_colour_plane_flag } expGolombDecoder.skipUnsignedExpGolomb(); // bit_depth_luma_minus8 expGolombDecoder.skipUnsignedExpGolomb(); // bit_depth_chroma_minus8 expGolombDecoder.skipBits(1); // qpprime_y_zero_transform_bypass_flag if (expGolombDecoder.readBoolean()) { // seq_scaling_matrix_present_flag scalingListCount = (chromaFormatIdc !== 3) ? 8 : 12; for (i = 0; i < scalingListCount; i++) { if (expGolombDecoder.readBoolean()) { // seq_scaling_list_present_flag[ i ] if (i < 6) { skipScalingList(16, expGolombDecoder); } else { skipScalingList(64, expGolombDecoder); } } } } } expGolombDecoder.skipUnsignedExpGolomb(); // log2_max_frame_num_minus4 picOrderCntType = expGolombDecoder.readUnsignedExpGolomb(); if (picOrderCntType === 0) { expGolombDecoder.readUnsignedExpGolomb(); // log2_max_pic_order_cnt_lsb_minus4 } else if (picOrderCntType === 1) { expGolombDecoder.skipBits(1); // delta_pic_order_always_zero_flag expGolombDecoder.skipExpGolomb(); // offset_for_non_ref_pic expGolombDecoder.skipExpGolomb(); // offset_for_top_to_bottom_field numRefFramesInPicOrderCntCycle = expGolombDecoder.readUnsignedExpGolomb(); for (i = 0; i < numRefFramesInPicOrderCntCycle; i++) { expGolombDecoder.skipExpGolomb(); // offset_for_ref_frame[ i ] } } expGolombDecoder.skipUnsignedExpGolomb(); // max_num_ref_frames expGolombDecoder.skipBits(1); // gaps_in_frame_num_value_allowed_flag picWidthInMbsMinus1 = expGolombDecoder.readUnsignedExpGolomb(); picHeightInMapUnitsMinus1 = expGolombDecoder.readUnsignedExpGolomb(); frameMbsOnlyFlag = expGolombDecoder.readBits(1); if (frameMbsOnlyFlag === 0) { expGolombDecoder.skipBits(1); // mb_adaptive_frame_field_flag } expGolombDecoder.skipBits(1); // direct_8x8_inference_flag if (expGolombDecoder.readBoolean()) { // frame_cropping_flag frameCropLeftOffset = expGolombDecoder.readUnsignedExpGolomb(); frameCropRightOffset = expGolombDecoder.readUnsignedExpGolomb(); frameCropTopOffset = expGolombDecoder.readUnsignedExpGolomb(); frameCropBottomOffset = expGolombDecoder.readUnsignedExpGolomb(); } if (expGolombDecoder.readBoolean()) { // vui_parameters_present_flag if (expGolombDecoder.readBoolean()) { // aspect_ratio_info_present_flag aspectRatioIdc = expGolombDecoder.readUnsignedByte(); switch (aspectRatioIdc) { case 1: sarRatio = [1, 1]; break; case 2: sarRatio = [12, 11]; break; case 3: sarRatio = [10, 11]; break; case 4: sarRatio = [16, 11]; break; case 5: sarRatio = [40, 33]; break; case 6: sarRatio = [24, 11]; break; case 7: sarRatio = [20, 11]; break; case 8: sarRatio = [32, 11]; break; case 9: sarRatio = [80, 33]; break; case 10: sarRatio = [18, 11]; break; case 11: sarRatio = [15, 11]; break; case 12: sarRatio = [64, 33]; break; case 13: sarRatio = [160, 99]; break; case 14: sarRatio = [4, 3]; break; case 15: sarRatio = [3, 2]; break; case 16: sarRatio = [2, 1]; break; case 255: { sarRatio = [expGolombDecoder.readUnsignedByte() << 8 | expGolombDecoder.readUnsignedByte(), expGolombDecoder.readUnsignedByte() << 8 | expGolombDecoder.readUnsignedByte() ]; break; } } if (sarRatio) { sarScale = sarRatio[0] / sarRatio[1]; } } } return { profileIdc: profileIdc, levelIdc: levelIdc, profileCompatibility: profileCompatibility, width: Math.ceil((((picWidthInMbsMinus1 + 1) * 16) - frameCropLeftOffset * 2 - frameCropRightOffset * 2) * sarScale), height: ((2 - frameMbsOnlyFlag) * (picHeightInMapUnitsMinus1 + 1) * 16) - (frameCropTopOffset * 2) - (frameCropBottomOffset * 2) }; }; }; H264Stream.prototype = new Stream(); module.exports = { H264Stream: H264Stream, NalByteStream: NalByteStream }; },{"../utils/exp-golomb.js":37,"../utils/stream.js":38}],21:[function(require,module,exports){ var highPrefix = [33, 16, 5, 32, 164, 27]; var lowPrefix = [33, 65, 108, 84, 1, 2, 4, 8, 168, 2, 4, 8, 17, 191, 252]; var zeroFill = function(count) { var a = []; while (count--) { a.push(0); } return a; }; var makeTable = function(metaTable) { return Object.keys(metaTable).reduce(function(obj, key) { obj[key] = new Uint8Array(metaTable[key].reduce(function(arr, part) { return arr.concat(part); }, [])); return obj; }, {}); }; // Frames-of-silence to use for filling in missing AAC frames var coneOfSilence = { 96000: [highPrefix, [227, 64], zeroFill(154), [56]], 88200: [highPrefix, [231], zeroFill(170), [56]], 64000: [highPrefix, [248, 192], zeroFill(240), [56]], 48000: [highPrefix, [255, 192], zeroFill(268), [55, 148, 128], zeroFill(54), [112]], 44100: [highPrefix, [255, 192], zeroFill(268), [55, 163, 128], zeroFill(84), [112]], 32000: [highPrefix, [255, 192], zeroFill(268), [55, 234], zeroFill(226), [112]], 24000: [highPrefix, [255, 192], zeroFill(268), [55, 255, 128], zeroFill(268), [111, 112], zeroFill(126), [224]], 16000: [highPrefix, [255, 192], zeroFill(268), [55, 255, 128], zeroFill(268), [111, 255], zeroFill(269), [223, 108], zeroFill(195), [1, 192]], 12000: [lowPrefix, zeroFill(268), [3, 127, 248], zeroFill(268), [6, 255, 240], zeroFill(268), [13, 255, 224], zeroFill(268), [27, 253, 128], zeroFill(259), [56]], 11025: [lowPrefix, zeroFill(268), [3, 127, 248], zeroFill(268), [6, 255, 240], zeroFill(268), [13, 255, 224], zeroFill(268), [27, 255, 192], zeroFill(268), [55, 175, 128], zeroFill(108), [112]], 8000: [lowPrefix, zeroFill(268), [3, 121, 16], zeroFill(47), [7]] }; module.exports = makeTable(coneOfSilence); },{}],22:[function(require,module,exports){ 'use strict'; var Stream = require('../utils/stream.js'); /** * The final stage of the transmuxer that emits the flv tags * for audio, video, and metadata. Also tranlates in time and * outputs caption data and id3 cues. */ var CoalesceStream = function(options) { // Number of Tracks per output segment // If greater than 1, we combine multiple // tracks into a single segment this.numberOfTracks = 0; this.metadataStream = options.metadataStream; this.videoTags = []; this.audioTags = []; this.videoTrack = null; this.audioTrack = null; this.pendingCaptions = []; this.pendingMetadata = []; this.pendingTracks = 0; this.processedTracks = 0; CoalesceStream.prototype.init.call(this); // Take output from multiple this.push = function(output) { // buffer incoming captions until the associated video segment // finishes if (output.text) { return this.pendingCaptions.push(output); } // buffer incoming id3 tags until the final flush if (output.frames) { return this.pendingMetadata.push(output); } if (output.track.type === 'video') { this.videoTrack = output.track; this.videoTags = output.tags; this.pendingTracks++; } if (output.track.type === 'audio') { this.audioTrack = output.track; this.audioTags = output.tags; this.pendingTracks++; } }; }; CoalesceStream.prototype = new Stream(); CoalesceStream.prototype.flush = function(flushSource) { var id3, caption, i, timelineStartPts, event = { tags: {}, captions: [], captionStreams: {}, metadata: [] }; if (this.pendingTracks < this.numberOfTracks) { if (flushSource !== 'VideoSegmentStream' && flushSource !== 'AudioSegmentStream') { // Return because we haven't received a flush from a data-generating // portion of the segment (meaning that we have only recieved meta-data // or captions.) return; } else if (this.pendingTracks === 0) { // In the case where we receive a flush without any data having been // received we consider it an emitted track for the purposes of coalescing // `done` events. // We do this for the case where there is an audio and video track in the // segment but no audio data. (seen in several playlists with alternate // audio tracks and no audio present in the main TS segments.) this.processedTracks++; if (this.processedTracks < this.numberOfTracks) { return; } } } this.processedTracks += this.pendingTracks; this.pendingTracks = 0; if (this.processedTracks < this.numberOfTracks) { return; } if (this.videoTrack) { timelineStartPts = this.videoTrack.timelineStartInfo.pts; } else if (this.audioTrack) { timelineStartPts = this.audioTrack.timelineStartInfo.pts; } event.tags.videoTags = this.videoTags; event.tags.audioTags = this.audioTags; // Translate caption PTS times into second offsets into the // video timeline for the segment, and add track info for (i = 0; i < this.pendingCaptions.length; i++) { caption = this.pendingCaptions[i]; caption.startTime = caption.startPts - timelineStartPts; caption.startTime /= 90e3; caption.endTime = caption.endPts - timelineStartPts; caption.endTime /= 90e3; event.captionStreams[caption.stream] = true; event.captions.push(caption); } // Translate ID3 frame PTS times into second offsets into the // video timeline for the segment for (i = 0; i < this.pendingMetadata.length; i++) { id3 = this.pendingMetadata[i]; id3.cueTime = id3.pts - timelineStartPts; id3.cueTime /= 90e3; event.metadata.push(id3); } // We add this to every single emitted segment even though we only need // it for the first event.metadata.dispatchType = this.metadataStream.dispatchType; // Reset stream state this.videoTrack = null; this.audioTrack = null; this.videoTags = []; this.audioTags = []; this.pendingCaptions.length = 0; this.pendingMetadata.length = 0; this.pendingTracks = 0; this.processedTracks = 0; // Emit the final segment this.trigger('data', event); this.trigger('done'); }; module.exports = CoalesceStream; },{"../utils/stream.js":38}],23:[function(require,module,exports){ 'use strict'; var FlvTag = require('./flv-tag.js'); // For information on the FLV format, see // http://download.macromedia.com/f4v/video_file_format_spec_v10_1.pdf. // Technically, this function returns the header and a metadata FLV tag // if duration is greater than zero // duration in seconds // @return {object} the bytes of the FLV header as a Uint8Array var getFlvHeader = function(duration, audio, video) { // :ByteArray { var headBytes = new Uint8Array(3 + 1 + 1 + 4), head = new DataView(headBytes.buffer), metadata, result, metadataLength; // default arguments duration = duration || 0; audio = audio === undefined ? true : audio; video = video === undefined ? true : video; // signature head.setUint8(0, 0x46); // 'F' head.setUint8(1, 0x4c); // 'L' head.setUint8(2, 0x56); // 'V' // version head.setUint8(3, 0x01); // flags head.setUint8(4, (audio ? 0x04 : 0x00) | (video ? 0x01 : 0x00)); // data offset, should be 9 for FLV v1 head.setUint32(5, headBytes.byteLength); // init the first FLV tag if (duration <= 0) { // no duration available so just write the first field of the first // FLV tag result = new Uint8Array(headBytes.byteLength + 4); result.set(headBytes); result.set([0, 0, 0, 0], headBytes.byteLength); return result; } // write out the duration metadata tag metadata = new FlvTag(FlvTag.METADATA_TAG); metadata.pts = metadata.dts = 0; metadata.writeMetaDataDouble('duration', duration); metadataLength = metadata.finalize().length; result = new Uint8Array(headBytes.byteLength + metadataLength); result.set(headBytes); result.set(head.byteLength, metadataLength); return result; }; module.exports = getFlvHeader; },{"./flv-tag.js":24}],24:[function(require,module,exports){ /** * An object that stores the bytes of an FLV tag and methods for * querying and manipulating that data. * @see http://download.macromedia.com/f4v/video_file_format_spec_v10_1.pdf */ 'use strict'; var FlvTag; // (type:uint, extraData:Boolean = false) extends ByteArray FlvTag = function(type, extraData) { var // Counter if this is a metadata tag, nal start marker if this is a video // tag. unused if this is an audio tag adHoc = 0, // :uint // The default size is 16kb but this is not enough to hold iframe // data and the resizing algorithm costs a bit so we create a larger // starting buffer for video tags bufferStartSize = 16384, // checks whether the FLV tag has enough capacity to accept the proposed // write and re-allocates the internal buffers if necessary prepareWrite = function(flv, count) { var bytes, minLength = flv.position + count; if (minLength < flv.bytes.byteLength) { // there's enough capacity so do nothing return; } // allocate a new buffer and copy over the data that will not be modified bytes = new Uint8Array(minLength * 2); bytes.set(flv.bytes.subarray(0, flv.position), 0); flv.bytes = bytes; flv.view = new DataView(flv.bytes.buffer); }, // commonly used metadata properties widthBytes = FlvTag.widthBytes || new Uint8Array('width'.length), heightBytes = FlvTag.heightBytes || new Uint8Array('height'.length), videocodecidBytes = FlvTag.videocodecidBytes || new Uint8Array('videocodecid'.length), i; if (!FlvTag.widthBytes) { // calculating the bytes of common metadata names ahead of time makes the // corresponding writes faster because we don't have to loop over the // characters // re-test with test/perf.html if you're planning on changing this for (i = 0; i < 'width'.length; i++) { widthBytes[i] = 'width'.charCodeAt(i); } for (i = 0; i < 'height'.length; i++) { heightBytes[i] = 'height'.charCodeAt(i); } for (i = 0; i < 'videocodecid'.length; i++) { videocodecidBytes[i] = 'videocodecid'.charCodeAt(i); } FlvTag.widthBytes = widthBytes; FlvTag.heightBytes = heightBytes; FlvTag.videocodecidBytes = videocodecidBytes; } this.keyFrame = false; // :Boolean switch (type) { case FlvTag.VIDEO_TAG: this.length = 16; // Start the buffer at 256k bufferStartSize *= 6; break; case FlvTag.AUDIO_TAG: this.length = 13; this.keyFrame = true; break; case FlvTag.METADATA_TAG: this.length = 29; this.keyFrame = true; break; default: throw new Error('Unknown FLV tag type'); } this.bytes = new Uint8Array(bufferStartSize); this.view = new DataView(this.bytes.buffer); this.bytes[0] = type; this.position = this.length; this.keyFrame = extraData; // Defaults to false // presentation timestamp this.pts = 0; // decoder timestamp this.dts = 0; // ByteArray#writeBytes(bytes:ByteArray, offset:uint = 0, length:uint = 0) this.writeBytes = function(bytes, offset, length) { var start = offset || 0, end; length = length || bytes.byteLength; end = start + length; prepareWrite(this, length); this.bytes.set(bytes.subarray(start, end), this.position); this.position += length; this.length = Math.max(this.length, this.position); }; // ByteArray#writeByte(value:int):void this.writeByte = function(byte) { prepareWrite(this, 1); this.bytes[this.position] = byte; this.position++; this.length = Math.max(this.length, this.position); }; // ByteArray#writeShort(value:int):void this.writeShort = function(short) { prepareWrite(this, 2); this.view.setUint16(this.position, short); this.position += 2; this.length = Math.max(this.length, this.position); }; // Negative index into array // (pos:uint):int this.negIndex = function(pos) { return this.bytes[this.length - pos]; }; // The functions below ONLY work when this[0] == VIDEO_TAG. // We are not going to check for that because we dont want the overhead // (nal:ByteArray = null):int this.nalUnitSize = function() { if (adHoc === 0) { return 0; } return this.length - (adHoc + 4); }; this.startNalUnit = function() { // remember position and add 4 bytes if (adHoc > 0) { throw new Error('Attempted to create new NAL wihout closing the old one'); } // reserve 4 bytes for nal unit size adHoc = this.length; this.length += 4; this.position = this.length; }; // (nal:ByteArray = null):void this.endNalUnit = function(nalContainer) { var nalStart, // :uint nalLength; // :uint // Rewind to the marker and write the size if (this.length === adHoc + 4) { // we started a nal unit, but didnt write one, so roll back the 4 byte size value this.length -= 4; } else if (adHoc > 0) { nalStart = adHoc + 4; nalLength = this.length - nalStart; this.position = adHoc; this.view.setUint32(this.position, nalLength); this.position = this.length; if (nalContainer) { // Add the tag to the NAL unit nalContainer.push(this.bytes.subarray(nalStart, nalStart + nalLength)); } } adHoc = 0; }; /** * Write out a 64-bit floating point valued metadata property. This method is * called frequently during a typical parse and needs to be fast. */ // (key:String, val:Number):void this.writeMetaDataDouble = function(key, val) { var i; prepareWrite(this, 2 + key.length + 9); // write size of property name this.view.setUint16(this.position, key.length); this.position += 2; // this next part looks terrible but it improves parser throughput by // 10kB/s in my testing // write property name if (key === 'width') { this.bytes.set(widthBytes, this.position); this.position += 5; } else if (key === 'height') { this.bytes.set(heightBytes, this.position); this.position += 6; } else if (key === 'videocodecid') { this.bytes.set(videocodecidBytes, this.position); this.position += 12; } else { for (i = 0; i < key.length; i++) { this.bytes[this.position] = key.charCodeAt(i); this.position++; } } // skip null byte this.position++; // write property value this.view.setFloat64(this.position, val); this.position += 8; // update flv tag length this.length = Math.max(this.length, this.position); ++adHoc; }; // (key:String, val:Boolean):void this.writeMetaDataBoolean = function(key, val) { var i; prepareWrite(this, 2); this.view.setUint16(this.position, key.length); this.position += 2; for (i = 0; i < key.length; i++) { // if key.charCodeAt(i) >= 255, handle error prepareWrite(this, 1); this.bytes[this.position] = key.charCodeAt(i); this.position++; } prepareWrite(this, 2); this.view.setUint8(this.position, 0x01); this.position++; this.view.setUint8(this.position, val ? 0x01 : 0x00); this.position++; this.length = Math.max(this.length, this.position); ++adHoc; }; // ():ByteArray this.finalize = function() { var dtsDelta, // :int len; // :int switch (this.bytes[0]) { // Video Data case FlvTag.VIDEO_TAG: // We only support AVC, 1 = key frame (for AVC, a seekable // frame), 2 = inter frame (for AVC, a non-seekable frame) this.bytes[11] = ((this.keyFrame || extraData) ? 0x10 : 0x20) | 0x07; this.bytes[12] = extraData ? 0x00 : 0x01; dtsDelta = this.pts - this.dts; this.bytes[13] = (dtsDelta & 0x00FF0000) >>> 16; this.bytes[14] = (dtsDelta & 0x0000FF00) >>> 8; this.bytes[15] = (dtsDelta & 0x000000FF) >>> 0; break; case FlvTag.AUDIO_TAG: this.bytes[11] = 0xAF; // 44 kHz, 16-bit stereo this.bytes[12] = extraData ? 0x00 : 0x01; break; case FlvTag.METADATA_TAG: this.position = 11; this.view.setUint8(this.position, 0x02); // String type this.position++; this.view.setUint16(this.position, 0x0A); // 10 Bytes this.position += 2; // set "onMetaData" this.bytes.set([0x6f, 0x6e, 0x4d, 0x65, 0x74, 0x61, 0x44, 0x61, 0x74, 0x61], this.position); this.position += 10; this.bytes[this.position] = 0x08; // Array type this.position++; this.view.setUint32(this.position, adHoc); this.position = this.length; this.bytes.set([0, 0, 9], this.position); this.position += 3; // End Data Tag this.length = this.position; break; } len = this.length - 11; // write the DataSize field this.bytes[ 1] = (len & 0x00FF0000) >>> 16; this.bytes[ 2] = (len & 0x0000FF00) >>> 8; this.bytes[ 3] = (len & 0x000000FF) >>> 0; // write the Timestamp this.bytes[ 4] = (this.dts & 0x00FF0000) >>> 16; this.bytes[ 5] = (this.dts & 0x0000FF00) >>> 8; this.bytes[ 6] = (this.dts & 0x000000FF) >>> 0; this.bytes[ 7] = (this.dts & 0xFF000000) >>> 24; // write the StreamID this.bytes[ 8] = 0; this.bytes[ 9] = 0; this.bytes[10] = 0; // Sometimes we're at the end of the view and have one slot to write a // uint32, so, prepareWrite of count 4, since, view is uint8 prepareWrite(this, 4); this.view.setUint32(this.length, this.length); this.length += 4; this.position += 4; // trim down the byte buffer to what is actually being used this.bytes = this.bytes.subarray(0, this.length); this.frameTime = FlvTag.frameTime(this.bytes); // if bytes.bytelength isn't equal to this.length, handle error return this; }; }; FlvTag.AUDIO_TAG = 0x08; // == 8, :uint FlvTag.VIDEO_TAG = 0x09; // == 9, :uint FlvTag.METADATA_TAG = 0x12; // == 18, :uint // (tag:ByteArray):Boolean { FlvTag.isAudioFrame = function(tag) { return FlvTag.AUDIO_TAG === tag[0]; }; // (tag:ByteArray):Boolean { FlvTag.isVideoFrame = function(tag) { return FlvTag.VIDEO_TAG === tag[0]; }; // (tag:ByteArray):Boolean { FlvTag.isMetaData = function(tag) { return FlvTag.METADATA_TAG === tag[0]; }; // (tag:ByteArray):Boolean { FlvTag.isKeyFrame = function(tag) { if (FlvTag.isVideoFrame(tag)) { return tag[11] === 0x17; } if (FlvTag.isAudioFrame(tag)) { return true; } if (FlvTag.isMetaData(tag)) { return true; } return false; }; // (tag:ByteArray):uint { FlvTag.frameTime = function(tag) { var pts = tag[ 4] << 16; // :uint pts |= tag[ 5] << 8; pts |= tag[ 6] << 0; pts |= tag[ 7] << 24; return pts; }; module.exports = FlvTag; },{}],25:[function(require,module,exports){ module.exports = { tag: require('./flv-tag'), Transmuxer: require('./transmuxer'), getFlvHeader: require('./flv-header') }; },{"./flv-header":23,"./flv-tag":24,"./transmuxer":27}],26:[function(require,module,exports){ 'use strict'; var TagList = function() { var self = this; this.list = []; this.push = function(tag) { this.list.push({ bytes: tag.bytes, dts: tag.dts, pts: tag.pts, keyFrame: tag.keyFrame, metaDataTag: tag.metaDataTag }); }; Object.defineProperty(this, 'length', { get: function() { return self.list.length; } }); }; module.exports = TagList; },{}],27:[function(require,module,exports){ 'use strict'; var Stream = require('../utils/stream.js'); var FlvTag = require('./flv-tag.js'); var m2ts = require('../m2ts/m2ts.js'); var AdtsStream = require('../codecs/adts.js'); var H264Stream = require('../codecs/h264').H264Stream; var CoalesceStream = require('./coalesce-stream.js'); var TagList = require('./tag-list.js'); var Transmuxer, VideoSegmentStream, AudioSegmentStream, collectTimelineInfo, metaDataTag, extraDataTag; /** * Store information about the start and end of the tracka and the * duration for each frame/sample we process in order to calculate * the baseMediaDecodeTime */ collectTimelineInfo = function(track, data) { if (typeof data.pts === 'number') { if (track.timelineStartInfo.pts === undefined) { track.timelineStartInfo.pts = data.pts; } else { track.timelineStartInfo.pts = Math.min(track.timelineStartInfo.pts, data.pts); } } if (typeof data.dts === 'number') { if (track.timelineStartInfo.dts === undefined) { track.timelineStartInfo.dts = data.dts; } else { track.timelineStartInfo.dts = Math.min(track.timelineStartInfo.dts, data.dts); } } }; metaDataTag = function(track, pts) { var tag = new FlvTag(FlvTag.METADATA_TAG); // :FlvTag tag.dts = pts; tag.pts = pts; tag.writeMetaDataDouble('videocodecid', 7); tag.writeMetaDataDouble('width', track.width); tag.writeMetaDataDouble('height', track.height); return tag; }; extraDataTag = function(track, pts) { var i, tag = new FlvTag(FlvTag.VIDEO_TAG, true); tag.dts = pts; tag.pts = pts; tag.writeByte(0x01);// version tag.writeByte(track.profileIdc);// profile tag.writeByte(track.profileCompatibility);// compatibility tag.writeByte(track.levelIdc);// level tag.writeByte(0xFC | 0x03); // reserved (6 bits), NULA length size - 1 (2 bits) tag.writeByte(0xE0 | 0x01); // reserved (3 bits), num of SPS (5 bits) tag.writeShort(track.sps[0].length); // data of SPS tag.writeBytes(track.sps[0]); // SPS tag.writeByte(track.pps.length); // num of PPS (will there ever be more that 1 PPS?) for (i = 0; i < track.pps.length; ++i) { tag.writeShort(track.pps[i].length); // 2 bytes for length of PPS tag.writeBytes(track.pps[i]); // data of PPS } return tag; }; /** * Constructs a single-track, media segment from AAC data * events. The output of this stream can be fed to flash. */ AudioSegmentStream = function(track) { var adtsFrames = [], videoKeyFrames = [], oldExtraData; AudioSegmentStream.prototype.init.call(this); this.push = function(data) { collectTimelineInfo(track, data); if (track) { track.audioobjecttype = data.audioobjecttype; track.channelcount = data.channelcount; track.samplerate = data.samplerate; track.samplingfrequencyindex = data.samplingfrequencyindex; track.samplesize = data.samplesize; track.extraData = (track.audioobjecttype << 11) | (track.samplingfrequencyindex << 7) | (track.channelcount << 3); } data.pts = Math.round(data.pts / 90); data.dts = Math.round(data.dts / 90); // buffer audio data until end() is called adtsFrames.push(data); }; this.flush = function() { var currentFrame, adtsFrame, lastMetaPts, tags = new TagList(); // return early if no audio data has been observed if (adtsFrames.length === 0) { this.trigger('done', 'AudioSegmentStream'); return; } lastMetaPts = -Infinity; while (adtsFrames.length) { currentFrame = adtsFrames.shift(); // write out a metadata frame at every video key frame if (videoKeyFrames.length && currentFrame.pts >= videoKeyFrames[0]) { lastMetaPts = videoKeyFrames.shift(); this.writeMetaDataTags(tags, lastMetaPts); } // also write out metadata tags every 1 second so that the decoder // is re-initialized quickly after seeking into a different // audio configuration. if (track.extraData !== oldExtraData || currentFrame.pts - lastMetaPts >= 1000) { this.writeMetaDataTags(tags, currentFrame.pts); oldExtraData = track.extraData; lastMetaPts = currentFrame.pts; } adtsFrame = new FlvTag(FlvTag.AUDIO_TAG); adtsFrame.pts = currentFrame.pts; adtsFrame.dts = currentFrame.dts; adtsFrame.writeBytes(currentFrame.data); tags.push(adtsFrame.finalize()); } videoKeyFrames.length = 0; oldExtraData = null; this.trigger('data', {track: track, tags: tags.list}); this.trigger('done', 'AudioSegmentStream'); }; this.writeMetaDataTags = function(tags, pts) { var adtsFrame; adtsFrame = new FlvTag(FlvTag.METADATA_TAG); // For audio, DTS is always the same as PTS. We want to set the DTS // however so we can compare with video DTS to determine approximate // packet order adtsFrame.pts = pts; adtsFrame.dts = pts; // AAC is always 10 adtsFrame.writeMetaDataDouble('audiocodecid', 10); adtsFrame.writeMetaDataBoolean('stereo', track.channelcount === 2); adtsFrame.writeMetaDataDouble('audiosamplerate', track.samplerate); // Is AAC always 16 bit? adtsFrame.writeMetaDataDouble('audiosamplesize', 16); tags.push(adtsFrame.finalize()); adtsFrame = new FlvTag(FlvTag.AUDIO_TAG, true); // For audio, DTS is always the same as PTS. We want to set the DTS // however so we can compare with video DTS to determine approximate // packet order adtsFrame.pts = pts; adtsFrame.dts = pts; adtsFrame.view.setUint16(adtsFrame.position, track.extraData); adtsFrame.position += 2; adtsFrame.length = Math.max(adtsFrame.length, adtsFrame.position); tags.push(adtsFrame.finalize()); }; this.onVideoKeyFrame = function(pts) { videoKeyFrames.push(pts); }; }; AudioSegmentStream.prototype = new Stream(); /** * Store FlvTags for the h264 stream * @param track {object} track metadata configuration */ VideoSegmentStream = function(track) { var nalUnits = [], config, h264Frame; VideoSegmentStream.prototype.init.call(this); this.finishFrame = function(tags, frame) { if (!frame) { return; } // Check if keyframe and the length of tags. // This makes sure we write metadata on the first frame of a segment. if (config && track && track.newMetadata && (frame.keyFrame || tags.length === 0)) { // Push extra data on every IDR frame in case we did a stream change + seek var metaTag = metaDataTag(config, frame.dts).finalize(); var extraTag = extraDataTag(track, frame.dts).finalize(); metaTag.metaDataTag = extraTag.metaDataTag = true; tags.push(metaTag); tags.push(extraTag); track.newMetadata = false; this.trigger('keyframe', frame.dts); } frame.endNalUnit(); tags.push(frame.finalize()); h264Frame = null; }; this.push = function(data) { collectTimelineInfo(track, data); data.pts = Math.round(data.pts / 90); data.dts = Math.round(data.dts / 90); // buffer video until flush() is called nalUnits.push(data); }; this.flush = function() { var currentNal, tags = new TagList(); // Throw away nalUnits at the start of the byte stream until we find // the first AUD while (nalUnits.length) { if (nalUnits[0].nalUnitType === 'access_unit_delimiter_rbsp') { break; } nalUnits.shift(); } // return early if no video data has been observed if (nalUnits.length === 0) { this.trigger('done', 'VideoSegmentStream'); return; } while (nalUnits.length) { currentNal = nalUnits.shift(); // record the track config if (currentNal.nalUnitType === 'seq_parameter_set_rbsp') { track.newMetadata = true; config = currentNal.config; track.width = config.width; track.height = config.height; track.sps = [currentNal.data]; track.profileIdc = config.profileIdc; track.levelIdc = config.levelIdc; track.profileCompatibility = config.profileCompatibility; h264Frame.endNalUnit(); } else if (currentNal.nalUnitType === 'pic_parameter_set_rbsp') { track.newMetadata = true; track.pps = [currentNal.data]; h264Frame.endNalUnit(); } else if (currentNal.nalUnitType === 'access_unit_delimiter_rbsp') { if (h264Frame) { this.finishFrame(tags, h264Frame); } h264Frame = new FlvTag(FlvTag.VIDEO_TAG); h264Frame.pts = currentNal.pts; h264Frame.dts = currentNal.dts; } else { if (currentNal.nalUnitType === 'slice_layer_without_partitioning_rbsp_idr') { // the current sample is a key frame h264Frame.keyFrame = true; } h264Frame.endNalUnit(); } h264Frame.startNalUnit(); h264Frame.writeBytes(currentNal.data); } if (h264Frame) { this.finishFrame(tags, h264Frame); } this.trigger('data', {track: track, tags: tags.list}); // Continue with the flush process now this.trigger('done', 'VideoSegmentStream'); }; }; VideoSegmentStream.prototype = new Stream(); /** * An object that incrementally transmuxes MPEG2 Trasport Stream * chunks into an FLV. */ Transmuxer = function(options) { var self = this, packetStream, parseStream, elementaryStream, videoTimestampRolloverStream, audioTimestampRolloverStream, timedMetadataTimestampRolloverStream, adtsStream, h264Stream, videoSegmentStream, audioSegmentStream, captionStream, coalesceStream; Transmuxer.prototype.init.call(this); options = options || {}; // expose the metadata stream this.metadataStream = new m2ts.MetadataStream(); options.metadataStream = this.metadataStream; // set up the parsing pipeline packetStream = new m2ts.TransportPacketStream(); parseStream = new m2ts.TransportParseStream(); elementaryStream = new m2ts.ElementaryStream(); videoTimestampRolloverStream = new m2ts.TimestampRolloverStream('video'); audioTimestampRolloverStream = new m2ts.TimestampRolloverStream('audio'); timedMetadataTimestampRolloverStream = new m2ts.TimestampRolloverStream('timed-metadata'); adtsStream = new AdtsStream(); h264Stream = new H264Stream(); coalesceStream = new CoalesceStream(options); // disassemble MPEG2-TS packets into elementary streams packetStream .pipe(parseStream) .pipe(elementaryStream); // !!THIS ORDER IS IMPORTANT!! // demux the streams elementaryStream .pipe(videoTimestampRolloverStream) .pipe(h264Stream); elementaryStream .pipe(audioTimestampRolloverStream) .pipe(adtsStream); elementaryStream .pipe(timedMetadataTimestampRolloverStream) .pipe(this.metadataStream) .pipe(coalesceStream); // if CEA-708 parsing is available, hook up a caption stream captionStream = new m2ts.CaptionStream(); h264Stream.pipe(captionStream) .pipe(coalesceStream); // hook up the segment streams once track metadata is delivered elementaryStream.on('data', function(data) { var i, videoTrack, audioTrack; if (data.type === 'metadata') { i = data.tracks.length; // scan the tracks listed in the metadata while (i--) { if (data.tracks[i].type === 'video') { videoTrack = data.tracks[i]; } else if (data.tracks[i].type === 'audio') { audioTrack = data.tracks[i]; } } // hook up the video segment stream to the first track with h264 data if (videoTrack && !videoSegmentStream) { coalesceStream.numberOfTracks++; videoSegmentStream = new VideoSegmentStream(videoTrack); // Set up the final part of the video pipeline h264Stream .pipe(videoSegmentStream) .pipe(coalesceStream); } if (audioTrack && !audioSegmentStream) { // hook up the audio segment stream to the first track with aac data coalesceStream.numberOfTracks++; audioSegmentStream = new AudioSegmentStream(audioTrack); // Set up the final part of the audio pipeline adtsStream .pipe(audioSegmentStream) .pipe(coalesceStream); if (videoSegmentStream) { videoSegmentStream.on('keyframe', audioSegmentStream.onVideoKeyFrame); } } } }); // feed incoming data to the front of the parsing pipeline this.push = function(data) { packetStream.push(data); }; // flush any buffered data this.flush = function() { // Start at the top of the pipeline and flush all pending work packetStream.flush(); }; // Caption data has to be reset when seeking outside buffered range this.resetCaptions = function() { captionStream.reset(); }; // Re-emit any data coming from the coalesce stream to the outside world coalesceStream.on('data', function(event) { self.trigger('data', event); }); // Let the consumer know we have finished flushing the entire pipeline coalesceStream.on('done', function() { self.trigger('done'); }); }; Transmuxer.prototype = new Stream(); // forward compatibility module.exports = Transmuxer; },{"../codecs/adts.js":19,"../codecs/h264":20,"../m2ts/m2ts.js":29,"../utils/stream.js":38,"./coalesce-stream.js":22,"./flv-tag.js":24,"./tag-list.js":26}],28:[function(require,module,exports){ /** * mux.js * * Copyright (c) 2015 Brightcove * All rights reserved. * * Reads in-band caption information from a video elementary * stream. Captions must follow the CEA-708 standard for injection * into an MPEG-2 transport streams. * @see https://en.wikipedia.org/wiki/CEA-708 * @see https://www.gpo.gov/fdsys/pkg/CFR-2007-title47-vol1/pdf/CFR-2007-title47-vol1-sec15-119.pdf */ 'use strict'; // ----------------- // Link To Transport // ----------------- // Supplemental enhancement information (SEI) NAL units have a // payload type field to indicate how they are to be // interpreted. CEAS-708 caption content is always transmitted with // payload type 0x04. var USER_DATA_REGISTERED_ITU_T_T35 = 4, RBSP_TRAILING_BITS = 128, Stream = require('../utils/stream'); /** * Parse a supplemental enhancement information (SEI) NAL unit. * Stops parsing once a message of type ITU T T35 has been found. * * @param bytes {Uint8Array} the bytes of a SEI NAL unit * @return {object} the parsed SEI payload * @see Rec. ITU-T H.264, 7.3.2.3.1 */ var parseSei = function(bytes) { var i = 0, result = { payloadType: -1, payloadSize: 0 }, payloadType = 0, payloadSize = 0; // go through the sei_rbsp parsing each each individual sei_message while (i < bytes.byteLength) { // stop once we have hit the end of the sei_rbsp if (bytes[i] === RBSP_TRAILING_BITS) { break; } // Parse payload type while (bytes[i] === 0xFF) { payloadType += 255; i++; } payloadType += bytes[i++]; // Parse payload size while (bytes[i] === 0xFF) { payloadSize += 255; i++; } payloadSize += bytes[i++]; // this sei_message is a 608/708 caption so save it and break // there can only ever be one caption message in a frame's sei if (!result.payload && payloadType === USER_DATA_REGISTERED_ITU_T_T35) { result.payloadType = payloadType; result.payloadSize = payloadSize; result.payload = bytes.subarray(i, i + payloadSize); break; } // skip the payload and parse the next message i += payloadSize; payloadType = 0; payloadSize = 0; } return result; }; // see ANSI/SCTE 128-1 (2013), section 8.1 var parseUserData = function(sei) { // itu_t_t35_contry_code must be 181 (United States) for // captions if (sei.payload[0] !== 181) { return null; } // itu_t_t35_provider_code should be 49 (ATSC) for captions if (((sei.payload[1] << 8) | sei.payload[2]) !== 49) { return null; } // the user_identifier should be "GA94" to indicate ATSC1 data if (String.fromCharCode(sei.payload[3], sei.payload[4], sei.payload[5], sei.payload[6]) !== 'GA94') { return null; } // finally, user_data_type_code should be 0x03 for caption data if (sei.payload[7] !== 0x03) { return null; } // return the user_data_type_structure and strip the trailing // marker bits return sei.payload.subarray(8, sei.payload.length - 1); }; // see CEA-708-D, section 4.4 var parseCaptionPackets = function(pts, userData) { var results = [], i, count, offset, data; // if this is just filler, return immediately if (!(userData[0] & 0x40)) { return results; } // parse out the cc_data_1 and cc_data_2 fields count = userData[0] & 0x1f; for (i = 0; i < count; i++) { offset = i * 3; data = { type: userData[offset + 2] & 0x03, pts: pts }; // capture cc data when cc_valid is 1 if (userData[offset + 2] & 0x04) { data.ccData = (userData[offset + 3] << 8) | userData[offset + 4]; results.push(data); } } return results; }; var CaptionStream = function() { CaptionStream.prototype.init.call(this); this.captionPackets_ = []; this.ccStreams_ = [ new Cea608Stream(0, 0), // eslint-disable-line no-use-before-define new Cea608Stream(0, 1), // eslint-disable-line no-use-before-define new Cea608Stream(1, 0), // eslint-disable-line no-use-before-define new Cea608Stream(1, 1) // eslint-disable-line no-use-before-define ]; this.reset(); // forward data and done events from CCs to this CaptionStream this.ccStreams_.forEach(function(cc) { cc.on('data', this.trigger.bind(this, 'data')); cc.on('done', this.trigger.bind(this, 'done')); }, this); }; CaptionStream.prototype = new Stream(); CaptionStream.prototype.push = function(event) { var sei, userData; // only examine SEI NALs if (event.nalUnitType !== 'sei_rbsp') { return; } // parse the sei sei = parseSei(event.escapedRBSP); // ignore everything but user_data_registered_itu_t_t35 if (sei.payloadType !== USER_DATA_REGISTERED_ITU_T_T35) { return; } // parse out the user data payload userData = parseUserData(sei); // ignore unrecognized userData if (!userData) { return; } // Sometimes, the same segment # will be downloaded twice. To stop the // caption data from being processed twice, we track the latest dts we've // received and ignore everything with a dts before that. However, since // data for a specific dts can be split across 2 packets on either side of // a segment boundary, we need to make sure we *don't* ignore the second // dts packet we receive that has dts === this.latestDts_. And thus, the // ignoreNextEqualDts_ flag was born. if (event.dts < this.latestDts_) { // We've started getting older data, so set the flag. this.ignoreNextEqualDts_ = true; return; } else if ((event.dts === this.latestDts_) && (this.ignoreNextEqualDts_)) { // We've received the last duplicate packet, time to start processing again this.ignoreNextEqualDts_ = false; return; } // parse out CC data packets and save them for later this.captionPackets_ = this.captionPackets_.concat(parseCaptionPackets(event.pts, userData)); this.latestDts_ = event.dts; }; CaptionStream.prototype.flush = function() { // make sure we actually parsed captions before proceeding if (!this.captionPackets_.length) { this.ccStreams_.forEach(function(cc) { cc.flush(); }, this); return; } // In Chrome, the Array#sort function is not stable so add a // presortIndex that we can use to ensure we get a stable-sort this.captionPackets_.forEach(function(elem, idx) { elem.presortIndex = idx; }); // sort caption byte-pairs based on their PTS values this.captionPackets_.sort(function(a, b) { if (a.pts === b.pts) { return a.presortIndex - b.presortIndex; } return a.pts - b.pts; }); this.captionPackets_.forEach(function(packet) { if (packet.type < 2) { // Dispatch packet to the right Cea608Stream this.dispatchCea608Packet(packet); } // this is where an 'else' would go for a dispatching packets // to a theoretical Cea708Stream that handles SERVICEn data }, this); this.captionPackets_.length = 0; this.ccStreams_.forEach(function(cc) { cc.flush(); }, this); return; }; CaptionStream.prototype.reset = function() { this.latestDts_ = null; this.ignoreNextEqualDts_ = false; this.activeCea608Channel_ = [null, null]; this.ccStreams_.forEach(function(ccStream) { ccStream.reset(); }); }; CaptionStream.prototype.dispatchCea608Packet = function(packet) { // NOTE: packet.type is the CEA608 field if (this.setsChannel1Active(packet)) { this.activeCea608Channel_[packet.type] = 0; } else if (this.setsChannel2Active(packet)) { this.activeCea608Channel_[packet.type] = 1; } if (this.activeCea608Channel_[packet.type] === null) { // If we haven't received anything to set the active channel, discard the // data; we don't want jumbled captions return; } this.ccStreams_[(packet.type << 1) + this.activeCea608Channel_[packet.type]].push(packet); }; CaptionStream.prototype.setsChannel1Active = function(packet) { return ((packet.ccData & 0x7800) === 0x1000); }; CaptionStream.prototype.setsChannel2Active = function(packet) { return ((packet.ccData & 0x7800) === 0x1800); }; // ---------------------- // Session to Application // ---------------------- var CHARACTER_TRANSLATION = { 0x2a: 0xe1, // á 0x5c: 0xe9, // é 0x5e: 0xed, // í 0x5f: 0xf3, // ó 0x60: 0xfa, // ú 0x7b: 0xe7, // ç 0x7c: 0xf7, // ÷ 0x7d: 0xd1, // Ñ 0x7e: 0xf1, // ñ 0x7f: 0x2588, // █ 0x0130: 0xae, // ® 0x0131: 0xb0, // ° 0x0132: 0xbd, // ½ 0x0133: 0xbf, // ¿ 0x0134: 0x2122, // ™ 0x0135: 0xa2, // ¢ 0x0136: 0xa3, // £ 0x0137: 0x266a, // ♪ 0x0138: 0xe0, // à 0x0139: 0xa0, // 0x013a: 0xe8, // è 0x013b: 0xe2, // â 0x013c: 0xea, // ê 0x013d: 0xee, // î 0x013e: 0xf4, // ô 0x013f: 0xfb, // û 0x0220: 0xc1, // Á 0x0221: 0xc9, // É 0x0222: 0xd3, // Ó 0x0223: 0xda, // Ú 0x0224: 0xdc, // Ü 0x0225: 0xfc, // ü 0x0226: 0x2018, // ‘ 0x0227: 0xa1, // ¡ 0x0228: 0x2a, // * 0x0229: 0x27, // ' 0x022a: 0x2014, // — 0x022b: 0xa9, // © 0x022c: 0x2120, // ℠ 0x022d: 0x2022, // • 0x022e: 0x201c, // “ 0x022f: 0x201d, // ” 0x0230: 0xc0, // À 0x0231: 0xc2, // Â 0x0232: 0xc7, // Ç 0x0233: 0xc8, // È 0x0234: 0xca, // Ê 0x0235: 0xcb, // Ë 0x0236: 0xeb, // ë 0x0237: 0xce, // Î 0x0238: 0xcf, // Ï 0x0239: 0xef, // ï 0x023a: 0xd4, // Ô 0x023b: 0xd9, // Ù 0x023c: 0xf9, // ù 0x023d: 0xdb, // Û 0x023e: 0xab, // « 0x023f: 0xbb, // » 0x0320: 0xc3, // Ã 0x0321: 0xe3, // ã 0x0322: 0xcd, // Í 0x0323: 0xcc, // Ì 0x0324: 0xec, // ì 0x0325: 0xd2, // Ò 0x0326: 0xf2, // ò 0x0327: 0xd5, // Õ 0x0328: 0xf5, // õ 0x0329: 0x7b, // { 0x032a: 0x7d, // } 0x032b: 0x5c, // \ 0x032c: 0x5e, // ^ 0x032d: 0x5f, // _ 0x032e: 0x7c, // | 0x032f: 0x7e, // ~ 0x0330: 0xc4, // Ä 0x0331: 0xe4, // ä 0x0332: 0xd6, // Ö 0x0333: 0xf6, // ö 0x0334: 0xdf, // ß 0x0335: 0xa5, // ¥ 0x0336: 0xa4, // ¤ 0x0337: 0x2502, // │ 0x0338: 0xc5, // Å 0x0339: 0xe5, // å 0x033a: 0xd8, // Ø 0x033b: 0xf8, // ø 0x033c: 0x250c, // ┌ 0x033d: 0x2510, // ┐ 0x033e: 0x2514, // └ 0x033f: 0x2518 // ┘ }; var getCharFromCode = function(code) { if (code === null) { return ''; } code = CHARACTER_TRANSLATION[code] || code; return String.fromCharCode(code); }; // the index of the last row in a CEA-608 display buffer var BOTTOM_ROW = 14; // This array is used for mapping PACs -> row #, since there's no way of // getting it through bit logic. var ROWS = [0x1100, 0x1120, 0x1200, 0x1220, 0x1500, 0x1520, 0x1600, 0x1620, 0x1700, 0x1720, 0x1000, 0x1300, 0x1320, 0x1400, 0x1420]; // CEA-608 captions are rendered onto a 34x15 matrix of character // cells. The "bottom" row is the last element in the outer array. var createDisplayBuffer = function() { var result = [], i = BOTTOM_ROW + 1; while (i--) { result.push(''); } return result; }; var Cea608Stream = function(field, dataChannel) { Cea608Stream.prototype.init.call(this); this.field_ = field || 0; this.dataChannel_ = dataChannel || 0; this.name_ = 'CC' + (((this.field_ << 1) | this.dataChannel_) + 1); this.setConstants(); this.reset(); this.push = function(packet) { var data, swap, char0, char1, text; // remove the parity bits data = packet.ccData & 0x7f7f; // ignore duplicate control codes; the spec demands they're sent twice if (data === this.lastControlCode_) { this.lastControlCode_ = null; return; } // Store control codes if ((data & 0xf000) === 0x1000) { this.lastControlCode_ = data; } else if (data !== this.PADDING_) { this.lastControlCode_ = null; } char0 = data >>> 8; char1 = data & 0xff; if (data === this.PADDING_) { return; } else if (data === this.RESUME_CAPTION_LOADING_) { this.mode_ = 'popOn'; } else if (data === this.END_OF_CAPTION_) { this.clearFormatting(packet.pts); // if a caption was being displayed, it's gone now this.flushDisplayed(packet.pts); // flip memory swap = this.displayed_; this.displayed_ = this.nonDisplayed_; this.nonDisplayed_ = swap; // start measuring the time to display the caption this.startPts_ = packet.pts; } else if (data === this.ROLL_UP_2_ROWS_) { this.topRow_ = BOTTOM_ROW - 1; this.mode_ = 'rollUp'; } else if (data === this.ROLL_UP_3_ROWS_) { this.topRow_ = BOTTOM_ROW - 2; this.mode_ = 'rollUp'; } else if (data === this.ROLL_UP_4_ROWS_) { this.topRow_ = BOTTOM_ROW - 3; this.mode_ = 'rollUp'; } else if (data === this.CARRIAGE_RETURN_) { this.clearFormatting(packet.pts); this.flushDisplayed(packet.pts); this.shiftRowsUp_(); this.startPts_ = packet.pts; } else if (data === this.BACKSPACE_) { if (this.mode_ === 'popOn') { this.nonDisplayed_[BOTTOM_ROW] = this.nonDisplayed_[BOTTOM_ROW].slice(0, -1); } else { this.displayed_[BOTTOM_ROW] = this.displayed_[BOTTOM_ROW].slice(0, -1); } } else if (data === this.ERASE_DISPLAYED_MEMORY_) { this.flushDisplayed(packet.pts); this.displayed_ = createDisplayBuffer(); } else if (data === this.ERASE_NON_DISPLAYED_MEMORY_) { this.nonDisplayed_ = createDisplayBuffer(); } else if (data === this.RESUME_DIRECT_CAPTIONING_) { this.mode_ = 'paintOn'; // Append special characters to caption text } else if (this.isSpecialCharacter(char0, char1)) { // Bitmask char0 so that we can apply character transformations // regardless of field and data channel. // Then byte-shift to the left and OR with char1 so we can pass the // entire character code to `getCharFromCode`. char0 = (char0 & 0x03) << 8; text = getCharFromCode(char0 | char1); this[this.mode_](packet.pts, text); this.column_++; // Append extended characters to caption text } else if (this.isExtCharacter(char0, char1)) { // Extended characters always follow their "non-extended" equivalents. // IE if a "è" is desired, you'll always receive "eè"; non-compliant // decoders are supposed to drop the "è", while compliant decoders // backspace the "e" and insert "è". // Delete the previous character if (this.mode_ === 'popOn') { this.nonDisplayed_[this.row_] = this.nonDisplayed_[this.row_].slice(0, -1); } else { this.displayed_[BOTTOM_ROW] = this.displayed_[BOTTOM_ROW].slice(0, -1); } // Bitmask char0 so that we can apply character transformations // regardless of field and data channel. // Then byte-shift to the left and OR with char1 so we can pass the // entire character code to `getCharFromCode`. char0 = (char0 & 0x03) << 8; text = getCharFromCode(char0 | char1); this[this.mode_](packet.pts, text); this.column_++; // Process mid-row codes } else if (this.isMidRowCode(char0, char1)) { // Attributes are not additive, so clear all formatting this.clearFormatting(packet.pts); // According to the standard, mid-row codes // should be replaced with spaces, so add one now this[this.mode_](packet.pts, ' '); this.column_++; if ((char1 & 0xe) === 0xe) { this.addFormatting(packet.pts, ['i']); } if ((char1 & 0x1) === 0x1) { this.addFormatting(packet.pts, ['u']); } // Detect offset control codes and adjust cursor } else if (this.isOffsetControlCode(char0, char1)) { // Cursor position is set by indent PAC (see below) in 4-column // increments, with an additional offset code of 1-3 to reach any // of the 32 columns specified by CEA-608. So all we need to do // here is increment the column cursor by the given offset. this.column_ += (char1 & 0x03); // Detect PACs (Preamble Address Codes) } else if (this.isPAC(char0, char1)) { // There's no logic for PAC -> row mapping, so we have to just // find the row code in an array and use its index :( var row = ROWS.indexOf(data & 0x1f20); if (row !== this.row_) { // formatting is only persistent for current row this.clearFormatting(packet.pts); this.row_ = row; } // All PACs can apply underline, so detect and apply // (All odd-numbered second bytes set underline) if ((char1 & 0x1) && (this.formatting_.indexOf('u') === -1)) { this.addFormatting(packet.pts, ['u']); } if ((data & 0x10) === 0x10) { // We've got an indent level code. Each successive even number // increments the column cursor by 4, so we can get the desired // column position by bit-shifting to the right (to get n/2) // and multiplying by 4. this.column_ = ((data & 0xe) >> 1) * 4; } if (this.isColorPAC(char1)) { // it's a color code, though we only support white, which // can be either normal or italicized. white italics can be // either 0x4e or 0x6e depending on the row, so we just // bitwise-and with 0xe to see if italics should be turned on if ((char1 & 0xe) === 0xe) { this.addFormatting(packet.pts, ['i']); } } // We have a normal character in char0, and possibly one in char1 } else if (this.isNormalChar(char0)) { if (char1 === 0x00) { char1 = null; } text = getCharFromCode(char0); text += getCharFromCode(char1); this[this.mode_](packet.pts, text); this.column_ += text.length; } // finish data processing }; }; Cea608Stream.prototype = new Stream(); // Trigger a cue point that captures the current state of the // display buffer Cea608Stream.prototype.flushDisplayed = function(pts) { var content = this.displayed_ // remove spaces from the start and end of the string .map(function(row) { return row.trim(); }) // combine all text rows to display in one cue .join('\n') // and remove blank rows from the start and end, but not the middle .replace(/^\n+|\n+$/g, ''); if (content.length) { this.trigger('data', { startPts: this.startPts_, endPts: pts, text: content, stream: this.name_ }); } }; /** * Zero out the data, used for startup and on seek */ Cea608Stream.prototype.reset = function() { this.mode_ = 'popOn'; // When in roll-up mode, the index of the last row that will // actually display captions. If a caption is shifted to a row // with a lower index than this, it is cleared from the display // buffer this.topRow_ = 0; this.startPts_ = 0; this.displayed_ = createDisplayBuffer(); this.nonDisplayed_ = createDisplayBuffer(); this.lastControlCode_ = null; // Track row and column for proper line-breaking and spacing this.column_ = 0; this.row_ = BOTTOM_ROW; // This variable holds currently-applied formatting this.formatting_ = []; }; /** * Sets up control code and related constants for this instance */ Cea608Stream.prototype.setConstants = function() { // The following attributes have these uses: // ext_ : char0 for mid-row codes, and the base for extended // chars (ext_+0, ext_+1, and ext_+2 are char0s for // extended codes) // control_: char0 for control codes, except byte-shifted to the // left so that we can do this.control_ | CONTROL_CODE // offset_: char0 for tab offset codes // // It's also worth noting that control codes, and _only_ control codes, // differ between field 1 and field2. Field 2 control codes are always // their field 1 value plus 1. That's why there's the "| field" on the // control value. if (this.dataChannel_ === 0) { this.BASE_ = 0x10; this.EXT_ = 0x11; this.CONTROL_ = (0x14 | this.field_) << 8; this.OFFSET_ = 0x17; } else if (this.dataChannel_ === 1) { this.BASE_ = 0x18; this.EXT_ = 0x19; this.CONTROL_ = (0x1c | this.field_) << 8; this.OFFSET_ = 0x1f; } // Constants for the LSByte command codes recognized by Cea608Stream. This // list is not exhaustive. For a more comprehensive listing and semantics see // http://www.gpo.gov/fdsys/pkg/CFR-2010-title47-vol1/pdf/CFR-2010-title47-vol1-sec15-119.pdf // Padding this.PADDING_ = 0x0000; // Pop-on Mode this.RESUME_CAPTION_LOADING_ = this.CONTROL_ | 0x20; this.END_OF_CAPTION_ = this.CONTROL_ | 0x2f; // Roll-up Mode this.ROLL_UP_2_ROWS_ = this.CONTROL_ | 0x25; this.ROLL_UP_3_ROWS_ = this.CONTROL_ | 0x26; this.ROLL_UP_4_ROWS_ = this.CONTROL_ | 0x27; this.CARRIAGE_RETURN_ = this.CONTROL_ | 0x2d; // paint-on mode (not supported) this.RESUME_DIRECT_CAPTIONING_ = this.CONTROL_ | 0x29; // Erasure this.BACKSPACE_ = this.CONTROL_ | 0x21; this.ERASE_DISPLAYED_MEMORY_ = this.CONTROL_ | 0x2c; this.ERASE_NON_DISPLAYED_MEMORY_ = this.CONTROL_ | 0x2e; }; /** * Detects if the 2-byte packet data is a special character * * Special characters have a second byte in the range 0x30 to 0x3f, * with the first byte being 0x11 (for data channel 1) or 0x19 (for * data channel 2). * * @param {Integer} char0 The first byte * @param {Integer} char1 The second byte * @return {Boolean} Whether the 2 bytes are an special character */ Cea608Stream.prototype.isSpecialCharacter = function(char0, char1) { return (char0 === this.EXT_ && char1 >= 0x30 && char1 <= 0x3f); }; /** * Detects if the 2-byte packet data is an extended character * * Extended characters have a second byte in the range 0x20 to 0x3f, * with the first byte being 0x12 or 0x13 (for data channel 1) or * 0x1a or 0x1b (for data channel 2). * * @param {Integer} char0 The first byte * @param {Integer} char1 The second byte * @return {Boolean} Whether the 2 bytes are an extended character */ Cea608Stream.prototype.isExtCharacter = function(char0, char1) { return ((char0 === (this.EXT_ + 1) || char0 === (this.EXT_ + 2)) && (char1 >= 0x20 && char1 <= 0x3f)); }; /** * Detects if the 2-byte packet is a mid-row code * * Mid-row codes have a second byte in the range 0x20 to 0x2f, with * the first byte being 0x11 (for data channel 1) or 0x19 (for data * channel 2). * * @param {Integer} char0 The first byte * @param {Integer} char1 The second byte * @return {Boolean} Whether the 2 bytes are a mid-row code */ Cea608Stream.prototype.isMidRowCode = function(char0, char1) { return (char0 === this.EXT_ && (char1 >= 0x20 && char1 <= 0x2f)); }; /** * Detects if the 2-byte packet is an offset control code * * Offset control codes have a second byte in the range 0x21 to 0x23, * with the first byte being 0x17 (for data channel 1) or 0x1f (for * data channel 2). * * @param {Integer} char0 The first byte * @param {Integer} char1 The second byte * @return {Boolean} Whether the 2 bytes are an offset control code */ Cea608Stream.prototype.isOffsetControlCode = function(char0, char1) { return (char0 === this.OFFSET_ && (char1 >= 0x21 && char1 <= 0x23)); }; /** * Detects if the 2-byte packet is a Preamble Address Code * * PACs have a first byte in the range 0x10 to 0x17 (for data channel 1) * or 0x18 to 0x1f (for data channel 2), with the second byte in the * range 0x40 to 0x7f. * * @param {Integer} char0 The first byte * @param {Integer} char1 The second byte * @return {Boolean} Whether the 2 bytes are a PAC */ Cea608Stream.prototype.isPAC = function(char0, char1) { return (char0 >= this.BASE_ && char0 < (this.BASE_ + 8) && (char1 >= 0x40 && char1 <= 0x7f)); }; /** * Detects if a packet's second byte is in the range of a PAC color code * * PAC color codes have the second byte be in the range 0x40 to 0x4f, or * 0x60 to 0x6f. * * @param {Integer} char1 The second byte * @return {Boolean} Whether the byte is a color PAC */ Cea608Stream.prototype.isColorPAC = function(char1) { return ((char1 >= 0x40 && char1 <= 0x4f) || (char1 >= 0x60 && char1 <= 0x7f)); }; /** * Detects if a single byte is in the range of a normal character * * Normal text bytes are in the range 0x20 to 0x7f. * * @param {Integer} char The byte * @return {Boolean} Whether the byte is a normal character */ Cea608Stream.prototype.isNormalChar = function(char) { return (char >= 0x20 && char <= 0x7f); }; // Adds the opening HTML tag for the passed character to the caption text, // and keeps track of it for later closing Cea608Stream.prototype.addFormatting = function(pts, format) { this.formatting_ = this.formatting_.concat(format); var text = format.reduce(function(text, format) { return text + '<' + format + '>'; }, ''); this[this.mode_](pts, text); }; // Adds HTML closing tags for current formatting to caption text and // clears remembered formatting Cea608Stream.prototype.clearFormatting = function(pts) { if (!this.formatting_.length) { return; } var text = this.formatting_.reverse().reduce(function(text, format) { return text + ''; }, ''); this.formatting_ = []; this[this.mode_](pts, text); }; // Mode Implementations Cea608Stream.prototype.popOn = function(pts, text) { var baseRow = this.nonDisplayed_[this.row_]; // buffer characters baseRow += text; this.nonDisplayed_[this.row_] = baseRow; }; Cea608Stream.prototype.rollUp = function(pts, text) { var baseRow = this.displayed_[BOTTOM_ROW]; baseRow += text; this.displayed_[BOTTOM_ROW] = baseRow; }; Cea608Stream.prototype.shiftRowsUp_ = function() { var i; // clear out inactive rows for (i = 0; i < this.topRow_; i++) { this.displayed_[i] = ''; } // shift displayed rows up for (i = this.topRow_; i < BOTTOM_ROW; i++) { this.displayed_[i] = this.displayed_[i + 1]; } // clear out the bottom row this.displayed_[BOTTOM_ROW] = ''; }; // paintOn mode is not implemented Cea608Stream.prototype.paintOn = function() {}; // exports module.exports = { CaptionStream: CaptionStream, Cea608Stream: Cea608Stream }; },{"../utils/stream":38}],29:[function(require,module,exports){ /** * mux.js * * Copyright (c) 2015 Brightcove * All rights reserved. * * A stream-based mp2t to mp4 converter. This utility can be used to * deliver mp4s to a SourceBuffer on platforms that support native * Media Source Extensions. */ 'use strict'; var Stream = require('../utils/stream.js'), CaptionStream = require('./caption-stream'), StreamTypes = require('./stream-types'), TimestampRolloverStream = require('./timestamp-rollover-stream').TimestampRolloverStream; var m2tsStreamTypes = require('./stream-types.js'); // object types var TransportPacketStream, TransportParseStream, ElementaryStream; // constants var MP2T_PACKET_LENGTH = 188, // bytes SYNC_BYTE = 0x47; /** * Splits an incoming stream of binary data into MPEG-2 Transport * Stream packets. */ TransportPacketStream = function() { var buffer = new Uint8Array(MP2T_PACKET_LENGTH), bytesInBuffer = 0; TransportPacketStream.prototype.init.call(this); // Deliver new bytes to the stream. this.push = function(bytes) { var startIndex = 0, endIndex = MP2T_PACKET_LENGTH, everything; // If there are bytes remaining from the last segment, prepend them to the // bytes that were pushed in if (bytesInBuffer) { everything = new Uint8Array(bytes.byteLength + bytesInBuffer); everything.set(buffer.subarray(0, bytesInBuffer)); everything.set(bytes, bytesInBuffer); bytesInBuffer = 0; } else { everything = bytes; } // While we have enough data for a packet while (endIndex < everything.byteLength) { // Look for a pair of start and end sync bytes in the data.. if (everything[startIndex] === SYNC_BYTE && everything[endIndex] === SYNC_BYTE) { // We found a packet so emit it and jump one whole packet forward in // the stream this.trigger('data', everything.subarray(startIndex, endIndex)); startIndex += MP2T_PACKET_LENGTH; endIndex += MP2T_PACKET_LENGTH; continue; } // If we get here, we have somehow become de-synchronized and we need to step // forward one byte at a time until we find a pair of sync bytes that denote // a packet startIndex++; endIndex++; } // If there was some data left over at the end of the segment that couldn't // possibly be a whole packet, keep it because it might be the start of a packet // that continues in the next segment if (startIndex < everything.byteLength) { buffer.set(everything.subarray(startIndex), 0); bytesInBuffer = everything.byteLength - startIndex; } }; this.flush = function() { // If the buffer contains a whole packet when we are being flushed, emit it // and empty the buffer. Otherwise hold onto the data because it may be // important for decoding the next segment if (bytesInBuffer === MP2T_PACKET_LENGTH && buffer[0] === SYNC_BYTE) { this.trigger('data', buffer); bytesInBuffer = 0; } this.trigger('done'); }; }; TransportPacketStream.prototype = new Stream(); /** * Accepts an MP2T TransportPacketStream and emits data events with parsed * forms of the individual transport stream packets. */ TransportParseStream = function() { var parsePsi, parsePat, parsePmt, self; TransportParseStream.prototype.init.call(this); self = this; this.packetsWaitingForPmt = []; this.programMapTable = undefined; parsePsi = function(payload, psi) { var offset = 0; // PSI packets may be split into multiple sections and those // sections may be split into multiple packets. If a PSI // section starts in this packet, the payload_unit_start_indicator // will be true and the first byte of the payload will indicate // the offset from the current position to the start of the // section. if (psi.payloadUnitStartIndicator) { offset += payload[offset] + 1; } if (psi.type === 'pat') { parsePat(payload.subarray(offset), psi); } else { parsePmt(payload.subarray(offset), psi); } }; parsePat = function(payload, pat) { pat.section_number = payload[7]; // eslint-disable-line camelcase pat.last_section_number = payload[8]; // eslint-disable-line camelcase // skip the PSI header and parse the first PMT entry self.pmtPid = (payload[10] & 0x1F) << 8 | payload[11]; pat.pmtPid = self.pmtPid; }; /** * Parse out the relevant fields of a Program Map Table (PMT). * @param payload {Uint8Array} the PMT-specific portion of an MP2T * packet. The first byte in this array should be the table_id * field. * @param pmt {object} the object that should be decorated with * fields parsed from the PMT. */ parsePmt = function(payload, pmt) { var sectionLength, tableEnd, programInfoLength, offset; // PMTs can be sent ahead of the time when they should actually // take effect. We don't believe this should ever be the case // for HLS but we'll ignore "forward" PMT declarations if we see // them. Future PMT declarations have the current_next_indicator // set to zero. if (!(payload[5] & 0x01)) { return; } // overwrite any existing program map table self.programMapTable = { video: null, audio: null, 'timed-metadata': {} }; // the mapping table ends at the end of the current section sectionLength = (payload[1] & 0x0f) << 8 | payload[2]; tableEnd = 3 + sectionLength - 4; // to determine where the table is, we have to figure out how // long the program info descriptors are programInfoLength = (payload[10] & 0x0f) << 8 | payload[11]; // advance the offset to the first entry in the mapping table offset = 12 + programInfoLength; while (offset < tableEnd) { var streamType = payload[offset]; var pid = (payload[offset + 1] & 0x1F) << 8 | payload[offset + 2]; // only map a single elementary_pid for audio and video stream types // TODO: should this be done for metadata too? for now maintain behavior of // multiple metadata streams if (streamType === StreamTypes.H264_STREAM_TYPE && self.programMapTable.video === null) { self.programMapTable.video = pid; } else if (streamType === StreamTypes.ADTS_STREAM_TYPE && self.programMapTable.audio === null) { self.programMapTable.audio = pid; } else if (streamType === StreamTypes.METADATA_STREAM_TYPE) { // map pid to stream type for metadata streams self.programMapTable['timed-metadata'][pid] = streamType; } // move to the next table entry // skip past the elementary stream descriptors, if present offset += ((payload[offset + 3] & 0x0F) << 8 | payload[offset + 4]) + 5; } // record the map on the packet as well pmt.programMapTable = self.programMapTable; }; /** * Deliver a new MP2T packet to the stream. */ this.push = function(packet) { var result = {}, offset = 4; result.payloadUnitStartIndicator = !!(packet[1] & 0x40); // pid is a 13-bit field starting at the last bit of packet[1] result.pid = packet[1] & 0x1f; result.pid <<= 8; result.pid |= packet[2]; // if an adaption field is present, its length is specified by the // fifth byte of the TS packet header. The adaptation field is // used to add stuffing to PES packets that don't fill a complete // TS packet, and to specify some forms of timing and control data // that we do not currently use. if (((packet[3] & 0x30) >>> 4) > 0x01) { offset += packet[offset] + 1; } // parse the rest of the packet based on the type if (result.pid === 0) { result.type = 'pat'; parsePsi(packet.subarray(offset), result); this.trigger('data', result); } else if (result.pid === this.pmtPid) { result.type = 'pmt'; parsePsi(packet.subarray(offset), result); this.trigger('data', result); // if there are any packets waiting for a PMT to be found, process them now while (this.packetsWaitingForPmt.length) { this.processPes_.apply(this, this.packetsWaitingForPmt.shift()); } } else if (this.programMapTable === undefined) { // When we have not seen a PMT yet, defer further processing of // PES packets until one has been parsed this.packetsWaitingForPmt.push([packet, offset, result]); } else { this.processPes_(packet, offset, result); } }; this.processPes_ = function(packet, offset, result) { // set the appropriate stream type if (result.pid === this.programMapTable.video) { result.streamType = StreamTypes.H264_STREAM_TYPE; } else if (result.pid === this.programMapTable.audio) { result.streamType = StreamTypes.ADTS_STREAM_TYPE; } else { // if not video or audio, it is timed-metadata or unknown // if unknown, streamType will be undefined result.streamType = this.programMapTable['timed-metadata'][result.pid]; } result.type = 'pes'; result.data = packet.subarray(offset); this.trigger('data', result); }; }; TransportParseStream.prototype = new Stream(); TransportParseStream.STREAM_TYPES = { h264: 0x1b, adts: 0x0f }; /** * Reconsistutes program elementary stream (PES) packets from parsed * transport stream packets. That is, if you pipe an * mp2t.TransportParseStream into a mp2t.ElementaryStream, the output * events will be events which capture the bytes for individual PES * packets plus relevant metadata that has been extracted from the * container. */ ElementaryStream = function() { var self = this, // PES packet fragments video = { data: [], size: 0 }, audio = { data: [], size: 0 }, timedMetadata = { data: [], size: 0 }, parsePes = function(payload, pes) { var ptsDtsFlags; // get the packet length, this will be 0 for video pes.packetLength = 6 + ((payload[4] << 8) | payload[5]); // find out if this packets starts a new keyframe pes.dataAlignmentIndicator = (payload[6] & 0x04) !== 0; // PES packets may be annotated with a PTS value, or a PTS value // and a DTS value. Determine what combination of values is // available to work with. ptsDtsFlags = payload[7]; // PTS and DTS are normally stored as a 33-bit number. Javascript // performs all bitwise operations on 32-bit integers but javascript // supports a much greater range (52-bits) of integer using standard // mathematical operations. // We construct a 31-bit value using bitwise operators over the 31 // most significant bits and then multiply by 4 (equal to a left-shift // of 2) before we add the final 2 least significant bits of the // timestamp (equal to an OR.) if (ptsDtsFlags & 0xC0) { // the PTS and DTS are not written out directly. For information // on how they are encoded, see // http://dvd.sourceforge.net/dvdinfo/pes-hdr.html pes.pts = (payload[9] & 0x0E) << 27 | (payload[10] & 0xFF) << 20 | (payload[11] & 0xFE) << 12 | (payload[12] & 0xFF) << 5 | (payload[13] & 0xFE) >>> 3; pes.pts *= 4; // Left shift by 2 pes.pts += (payload[13] & 0x06) >>> 1; // OR by the two LSBs pes.dts = pes.pts; if (ptsDtsFlags & 0x40) { pes.dts = (payload[14] & 0x0E) << 27 | (payload[15] & 0xFF) << 20 | (payload[16] & 0xFE) << 12 | (payload[17] & 0xFF) << 5 | (payload[18] & 0xFE) >>> 3; pes.dts *= 4; // Left shift by 2 pes.dts += (payload[18] & 0x06) >>> 1; // OR by the two LSBs } } // the data section starts immediately after the PES header. // pes_header_data_length specifies the number of header bytes // that follow the last byte of the field. pes.data = payload.subarray(9 + payload[8]); }, flushStream = function(stream, type, forceFlush) { var packetData = new Uint8Array(stream.size), event = { type: type }, i = 0, offset = 0, packetFlushable = false, fragment; // do nothing if there is not enough buffered data for a complete // PES header if (!stream.data.length || stream.size < 9) { return; } event.trackId = stream.data[0].pid; // reassemble the packet for (i = 0; i < stream.data.length; i++) { fragment = stream.data[i]; packetData.set(fragment.data, offset); offset += fragment.data.byteLength; } // parse assembled packet's PES header parsePes(packetData, event); // non-video PES packets MUST have a non-zero PES_packet_length // check that there is enough stream data to fill the packet packetFlushable = type === 'video' || event.packetLength <= stream.size; // flush pending packets if the conditions are right if (forceFlush || packetFlushable) { stream.size = 0; stream.data.length = 0; } // only emit packets that are complete. this is to avoid assembling // incomplete PES packets due to poor segmentation if (packetFlushable) { self.trigger('data', event); } }; ElementaryStream.prototype.init.call(this); this.push = function(data) { ({ pat: function() { // we have to wait for the PMT to arrive as well before we // have any meaningful metadata }, pes: function() { var stream, streamType; switch (data.streamType) { case StreamTypes.H264_STREAM_TYPE: case m2tsStreamTypes.H264_STREAM_TYPE: stream = video; streamType = 'video'; break; case StreamTypes.ADTS_STREAM_TYPE: stream = audio; streamType = 'audio'; break; case StreamTypes.METADATA_STREAM_TYPE: stream = timedMetadata; streamType = 'timed-metadata'; break; default: // ignore unknown stream types return; } // if a new packet is starting, we can flush the completed // packet if (data.payloadUnitStartIndicator) { flushStream(stream, streamType, true); } // buffer this fragment until we are sure we've received the // complete payload stream.data.push(data); stream.size += data.data.byteLength; }, pmt: function() { var event = { type: 'metadata', tracks: [] }, programMapTable = data.programMapTable; // translate audio and video streams to tracks if (programMapTable.video !== null) { event.tracks.push({ timelineStartInfo: { baseMediaDecodeTime: 0 }, id: +programMapTable.video, codec: 'avc', type: 'video' }); } if (programMapTable.audio !== null) { event.tracks.push({ timelineStartInfo: { baseMediaDecodeTime: 0 }, id: +programMapTable.audio, codec: 'adts', type: 'audio' }); } self.trigger('data', event); } })[data.type](); }; /** * Flush any remaining input. Video PES packets may be of variable * length. Normally, the start of a new video packet can trigger the * finalization of the previous packet. That is not possible if no * more video is forthcoming, however. In that case, some other * mechanism (like the end of the file) has to be employed. When it is * clear that no additional data is forthcoming, calling this method * will flush the buffered packets. */ this.flush = function() { // !!THIS ORDER IS IMPORTANT!! // video first then audio flushStream(video, 'video'); flushStream(audio, 'audio'); flushStream(timedMetadata, 'timed-metadata'); this.trigger('done'); }; }; ElementaryStream.prototype = new Stream(); var m2ts = { PAT_PID: 0x0000, MP2T_PACKET_LENGTH: MP2T_PACKET_LENGTH, TransportPacketStream: TransportPacketStream, TransportParseStream: TransportParseStream, ElementaryStream: ElementaryStream, TimestampRolloverStream: TimestampRolloverStream, CaptionStream: CaptionStream.CaptionStream, Cea608Stream: CaptionStream.Cea608Stream, MetadataStream: require('./metadata-stream') }; for (var type in StreamTypes) { if (StreamTypes.hasOwnProperty(type)) { m2ts[type] = StreamTypes[type]; } } module.exports = m2ts; },{"../utils/stream.js":38,"./caption-stream":28,"./metadata-stream":30,"./stream-types":31,"./stream-types.js":31,"./timestamp-rollover-stream":32}],30:[function(require,module,exports){ /** * Accepts program elementary stream (PES) data events and parses out * ID3 metadata from them, if present. * @see http://id3.org/id3v2.3.0 */ 'use strict'; var Stream = require('../utils/stream'), StreamTypes = require('./stream-types'), // return a percent-encoded representation of the specified byte range // @see http://en.wikipedia.org/wiki/Percent-encoding percentEncode = function(bytes, start, end) { var i, result = ''; for (i = start; i < end; i++) { result += '%' + ('00' + bytes[i].toString(16)).slice(-2); } return result; }, // return the string representation of the specified byte range, // interpreted as UTf-8. parseUtf8 = function(bytes, start, end) { return decodeURIComponent(percentEncode(bytes, start, end)); }, // return the string representation of the specified byte range, // interpreted as ISO-8859-1. parseIso88591 = function(bytes, start, end) { return unescape(percentEncode(bytes, start, end)); // jshint ignore:line }, parseSyncSafeInteger = function(data) { return (data[0] << 21) | (data[1] << 14) | (data[2] << 7) | (data[3]); }, tagParsers = { TXXX: function(tag) { var i; if (tag.data[0] !== 3) { // ignore frames with unrecognized character encodings return; } for (i = 1; i < tag.data.length; i++) { if (tag.data[i] === 0) { // parse the text fields tag.description = parseUtf8(tag.data, 1, i); // do not include the null terminator in the tag value tag.value = parseUtf8(tag.data, i + 1, tag.data.length).replace(/\0*$/, ''); break; } } tag.data = tag.value; }, WXXX: function(tag) { var i; if (tag.data[0] !== 3) { // ignore frames with unrecognized character encodings return; } for (i = 1; i < tag.data.length; i++) { if (tag.data[i] === 0) { // parse the description and URL fields tag.description = parseUtf8(tag.data, 1, i); tag.url = parseUtf8(tag.data, i + 1, tag.data.length); break; } } }, PRIV: function(tag) { var i; for (i = 0; i < tag.data.length; i++) { if (tag.data[i] === 0) { // parse the description and URL fields tag.owner = parseIso88591(tag.data, 0, i); break; } } tag.privateData = tag.data.subarray(i + 1); tag.data = tag.privateData; } }, MetadataStream; MetadataStream = function(options) { var settings = { debug: !!(options && options.debug), // the bytes of the program-level descriptor field in MP2T // see ISO/IEC 13818-1:2013 (E), section 2.6 "Program and // program element descriptors" descriptor: options && options.descriptor }, // the total size in bytes of the ID3 tag being parsed tagSize = 0, // tag data that is not complete enough to be parsed buffer = [], // the total number of bytes currently in the buffer bufferSize = 0, i; MetadataStream.prototype.init.call(this); // calculate the text track in-band metadata track dispatch type // https://html.spec.whatwg.org/multipage/embedded-content.html#steps-to-expose-a-media-resource-specific-text-track this.dispatchType = StreamTypes.METADATA_STREAM_TYPE.toString(16); if (settings.descriptor) { for (i = 0; i < settings.descriptor.length; i++) { this.dispatchType += ('00' + settings.descriptor[i].toString(16)).slice(-2); } } this.push = function(chunk) { var tag, frameStart, frameSize, frame, i, frameHeader; if (chunk.type !== 'timed-metadata') { return; } // if data_alignment_indicator is set in the PES header, // we must have the start of a new ID3 tag. Assume anything // remaining in the buffer was malformed and throw it out if (chunk.dataAlignmentIndicator) { bufferSize = 0; buffer.length = 0; } // ignore events that don't look like ID3 data if (buffer.length === 0 && (chunk.data.length < 10 || chunk.data[0] !== 'I'.charCodeAt(0) || chunk.data[1] !== 'D'.charCodeAt(0) || chunk.data[2] !== '3'.charCodeAt(0))) { if (settings.debug) { // eslint-disable-next-line no-console console.log('Skipping unrecognized metadata packet'); } return; } // add this chunk to the data we've collected so far buffer.push(chunk); bufferSize += chunk.data.byteLength; // grab the size of the entire frame from the ID3 header if (buffer.length === 1) { // the frame size is transmitted as a 28-bit integer in the // last four bytes of the ID3 header. // The most significant bit of each byte is dropped and the // results concatenated to recover the actual value. tagSize = parseSyncSafeInteger(chunk.data.subarray(6, 10)); // ID3 reports the tag size excluding the header but it's more // convenient for our comparisons to include it tagSize += 10; } // if the entire frame has not arrived, wait for more data if (bufferSize < tagSize) { return; } // collect the entire frame so it can be parsed tag = { data: new Uint8Array(tagSize), frames: [], pts: buffer[0].pts, dts: buffer[0].dts }; for (i = 0; i < tagSize;) { tag.data.set(buffer[0].data.subarray(0, tagSize - i), i); i += buffer[0].data.byteLength; bufferSize -= buffer[0].data.byteLength; buffer.shift(); } // find the start of the first frame and the end of the tag frameStart = 10; if (tag.data[5] & 0x40) { // advance the frame start past the extended header frameStart += 4; // header size field frameStart += parseSyncSafeInteger(tag.data.subarray(10, 14)); // clip any padding off the end tagSize -= parseSyncSafeInteger(tag.data.subarray(16, 20)); } // parse one or more ID3 frames // http://id3.org/id3v2.3.0#ID3v2_frame_overview do { // determine the number of bytes in this frame frameSize = parseSyncSafeInteger(tag.data.subarray(frameStart + 4, frameStart + 8)); if (frameSize < 1) { // eslint-disable-next-line no-console return console.log('Malformed ID3 frame encountered. Skipping metadata parsing.'); } frameHeader = String.fromCharCode(tag.data[frameStart], tag.data[frameStart + 1], tag.data[frameStart + 2], tag.data[frameStart + 3]); frame = { id: frameHeader, data: tag.data.subarray(frameStart + 10, frameStart + frameSize + 10) }; frame.key = frame.id; if (tagParsers[frame.id]) { tagParsers[frame.id](frame); // handle the special PRIV frame used to indicate the start // time for raw AAC data if (frame.owner === 'com.apple.streaming.transportStreamTimestamp') { var d = frame.data, size = ((d[3] & 0x01) << 30) | (d[4] << 22) | (d[5] << 14) | (d[6] << 6) | (d[7] >>> 2); size *= 4; size += d[7] & 0x03; frame.timeStamp = size; // in raw AAC, all subsequent data will be timestamped based // on the value of this frame // we couldn't have known the appropriate pts and dts before // parsing this ID3 tag so set those values now if (tag.pts === undefined && tag.dts === undefined) { tag.pts = frame.timeStamp; tag.dts = frame.timeStamp; } this.trigger('timestamp', frame); } } tag.frames.push(frame); frameStart += 10; // advance past the frame header frameStart += frameSize; // advance past the frame body } while (frameStart < tagSize); this.trigger('data', tag); }; }; MetadataStream.prototype = new Stream(); module.exports = MetadataStream; },{"../utils/stream":38,"./stream-types":31}],31:[function(require,module,exports){ 'use strict'; module.exports = { H264_STREAM_TYPE: 0x1B, ADTS_STREAM_TYPE: 0x0F, METADATA_STREAM_TYPE: 0x15 }; },{}],32:[function(require,module,exports){ /** * mux.js * * Copyright (c) 2016 Brightcove * All rights reserved. * * Accepts program elementary stream (PES) data events and corrects * decode and presentation time stamps to account for a rollover * of the 33 bit value. */ 'use strict'; var Stream = require('../utils/stream'); var MAX_TS = 8589934592; var RO_THRESH = 4294967296; var handleRollover = function(value, reference) { var direction = 1; if (value > reference) { // If the current timestamp value is greater than our reference timestamp and we detect a // timestamp rollover, this means the roll over is happening in the opposite direction. // Example scenario: Enter a long stream/video just after a rollover occurred. The reference // point will be set to a small number, e.g. 1. The user then seeks backwards over the // rollover point. In loading this segment, the timestamp values will be very large, // e.g. 2^33 - 1. Since this comes before the data we loaded previously, we want to adjust // the time stamp to be `value - 2^33`. direction = -1; } // Note: A seek forwards or back that is greater than the RO_THRESH (2^32, ~13 hours) will // cause an incorrect adjustment. while (Math.abs(reference - value) > RO_THRESH) { value += (direction * MAX_TS); } return value; }; var TimestampRolloverStream = function(type) { var lastDTS, referenceDTS; TimestampRolloverStream.prototype.init.call(this); this.type_ = type; this.push = function(data) { if (data.type !== this.type_) { return; } if (referenceDTS === undefined) { referenceDTS = data.dts; } data.dts = handleRollover(data.dts, referenceDTS); data.pts = handleRollover(data.pts, referenceDTS); lastDTS = data.dts; this.trigger('data', data); }; this.flush = function() { referenceDTS = lastDTS; this.trigger('done'); }; this.discontinuity = function() { referenceDTS = void 0; lastDTS = void 0; }; }; TimestampRolloverStream.prototype = new Stream(); module.exports = { TimestampRolloverStream: TimestampRolloverStream, handleRollover: handleRollover }; },{"../utils/stream":38}],33:[function(require,module,exports){ module.exports = { generator: require('./mp4-generator'), Transmuxer: require('./transmuxer').Transmuxer, AudioSegmentStream: require('./transmuxer').AudioSegmentStream, VideoSegmentStream: require('./transmuxer').VideoSegmentStream }; },{"./mp4-generator":34,"./transmuxer":35}],34:[function(require,module,exports){ /** * mux.js * * Copyright (c) 2015 Brightcove * All rights reserved. * * Functions that generate fragmented MP4s suitable for use with Media * Source Extensions. */ 'use strict'; var UINT32_MAX = Math.pow(2, 32) - 1; var box, dinf, esds, ftyp, mdat, mfhd, minf, moof, moov, mvex, mvhd, trak, tkhd, mdia, mdhd, hdlr, sdtp, stbl, stsd, traf, trex, trun, types, MAJOR_BRAND, MINOR_VERSION, AVC1_BRAND, VIDEO_HDLR, AUDIO_HDLR, HDLR_TYPES, VMHD, SMHD, DREF, STCO, STSC, STSZ, STTS; // pre-calculate constants (function() { var i; types = { avc1: [], // codingname avcC: [], btrt: [], dinf: [], dref: [], esds: [], ftyp: [], hdlr: [], mdat: [], mdhd: [], mdia: [], mfhd: [], minf: [], moof: [], moov: [], mp4a: [], // codingname mvex: [], mvhd: [], sdtp: [], smhd: [], stbl: [], stco: [], stsc: [], stsd: [], stsz: [], stts: [], styp: [], tfdt: [], tfhd: [], traf: [], trak: [], trun: [], trex: [], tkhd: [], vmhd: [] }; // In environments where Uint8Array is undefined (e.g., IE8), skip set up so that we // don't throw an error if (typeof Uint8Array === 'undefined') { return; } for (i in types) { if (types.hasOwnProperty(i)) { types[i] = [ i.charCodeAt(0), i.charCodeAt(1), i.charCodeAt(2), i.charCodeAt(3) ]; } } MAJOR_BRAND = new Uint8Array([ 'i'.charCodeAt(0), 's'.charCodeAt(0), 'o'.charCodeAt(0), 'm'.charCodeAt(0) ]); AVC1_BRAND = new Uint8Array([ 'a'.charCodeAt(0), 'v'.charCodeAt(0), 'c'.charCodeAt(0), '1'.charCodeAt(0) ]); MINOR_VERSION = new Uint8Array([0, 0, 0, 1]); VIDEO_HDLR = new Uint8Array([ 0x00, // version 0 0x00, 0x00, 0x00, // flags 0x00, 0x00, 0x00, 0x00, // pre_defined 0x76, 0x69, 0x64, 0x65, // handler_type: 'vide' 0x00, 0x00, 0x00, 0x00, // reserved 0x00, 0x00, 0x00, 0x00, // reserved 0x00, 0x00, 0x00, 0x00, // reserved 0x56, 0x69, 0x64, 0x65, 0x6f, 0x48, 0x61, 0x6e, 0x64, 0x6c, 0x65, 0x72, 0x00 // name: 'VideoHandler' ]); AUDIO_HDLR = new Uint8Array([ 0x00, // version 0 0x00, 0x00, 0x00, // flags 0x00, 0x00, 0x00, 0x00, // pre_defined 0x73, 0x6f, 0x75, 0x6e, // handler_type: 'soun' 0x00, 0x00, 0x00, 0x00, // reserved 0x00, 0x00, 0x00, 0x00, // reserved 0x00, 0x00, 0x00, 0x00, // reserved 0x53, 0x6f, 0x75, 0x6e, 0x64, 0x48, 0x61, 0x6e, 0x64, 0x6c, 0x65, 0x72, 0x00 // name: 'SoundHandler' ]); HDLR_TYPES = { video: VIDEO_HDLR, audio: AUDIO_HDLR }; DREF = new Uint8Array([ 0x00, // version 0 0x00, 0x00, 0x00, // flags 0x00, 0x00, 0x00, 0x01, // entry_count 0x00, 0x00, 0x00, 0x0c, // entry_size 0x75, 0x72, 0x6c, 0x20, // 'url' type 0x00, // version 0 0x00, 0x00, 0x01 // entry_flags ]); SMHD = new Uint8Array([ 0x00, // version 0x00, 0x00, 0x00, // flags 0x00, 0x00, // balance, 0 means centered 0x00, 0x00 // reserved ]); STCO = new Uint8Array([ 0x00, // version 0x00, 0x00, 0x00, // flags 0x00, 0x00, 0x00, 0x00 // entry_count ]); STSC = STCO; STSZ = new Uint8Array([ 0x00, // version 0x00, 0x00, 0x00, // flags 0x00, 0x00, 0x00, 0x00, // sample_size 0x00, 0x00, 0x00, 0x00 // sample_count ]); STTS = STCO; VMHD = new Uint8Array([ 0x00, // version 0x00, 0x00, 0x01, // flags 0x00, 0x00, // graphicsmode 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 // opcolor ]); }()); box = function(type) { var payload = [], size = 0, i, result, view; for (i = 1; i < arguments.length; i++) { payload.push(arguments[i]); } i = payload.length; // calculate the total size we need to allocate while (i--) { size += payload[i].byteLength; } result = new Uint8Array(size + 8); view = new DataView(result.buffer, result.byteOffset, result.byteLength); view.setUint32(0, result.byteLength); result.set(type, 4); // copy the payload into the result for (i = 0, size = 8; i < payload.length; i++) { result.set(payload[i], size); size += payload[i].byteLength; } return result; }; dinf = function() { return box(types.dinf, box(types.dref, DREF)); }; esds = function(track) { return box(types.esds, new Uint8Array([ 0x00, // version 0x00, 0x00, 0x00, // flags // ES_Descriptor 0x03, // tag, ES_DescrTag 0x19, // length 0x00, 0x00, // ES_ID 0x00, // streamDependenceFlag, URL_flag, reserved, streamPriority // DecoderConfigDescriptor 0x04, // tag, DecoderConfigDescrTag 0x11, // length 0x40, // object type 0x15, // streamType 0x00, 0x06, 0x00, // bufferSizeDB 0x00, 0x00, 0xda, 0xc0, // maxBitrate 0x00, 0x00, 0xda, 0xc0, // avgBitrate // DecoderSpecificInfo 0x05, // tag, DecoderSpecificInfoTag 0x02, // length // ISO/IEC 14496-3, AudioSpecificConfig // for samplingFrequencyIndex see ISO/IEC 13818-7:2006, 8.1.3.2.2, Table 35 (track.audioobjecttype << 3) | (track.samplingfrequencyindex >>> 1), (track.samplingfrequencyindex << 7) | (track.channelcount << 3), 0x06, 0x01, 0x02 // GASpecificConfig ])); }; ftyp = function() { return box(types.ftyp, MAJOR_BRAND, MINOR_VERSION, MAJOR_BRAND, AVC1_BRAND); }; hdlr = function(type) { return box(types.hdlr, HDLR_TYPES[type]); }; mdat = function(data) { return box(types.mdat, data); }; mdhd = function(track) { var result = new Uint8Array([ 0x00, // version 0 0x00, 0x00, 0x00, // flags 0x00, 0x00, 0x00, 0x02, // creation_time 0x00, 0x00, 0x00, 0x03, // modification_time 0x00, 0x01, 0x5f, 0x90, // timescale, 90,000 "ticks" per second (track.duration >>> 24) & 0xFF, (track.duration >>> 16) & 0xFF, (track.duration >>> 8) & 0xFF, track.duration & 0xFF, // duration 0x55, 0xc4, // 'und' language (undetermined) 0x00, 0x00 ]); // Use the sample rate from the track metadata, when it is // defined. The sample rate can be parsed out of an ADTS header, for // instance. if (track.samplerate) { result[12] = (track.samplerate >>> 24) & 0xFF; result[13] = (track.samplerate >>> 16) & 0xFF; result[14] = (track.samplerate >>> 8) & 0xFF; result[15] = (track.samplerate) & 0xFF; } return box(types.mdhd, result); }; mdia = function(track) { return box(types.mdia, mdhd(track), hdlr(track.type), minf(track)); }; mfhd = function(sequenceNumber) { return box(types.mfhd, new Uint8Array([ 0x00, 0x00, 0x00, 0x00, // flags (sequenceNumber & 0xFF000000) >> 24, (sequenceNumber & 0xFF0000) >> 16, (sequenceNumber & 0xFF00) >> 8, sequenceNumber & 0xFF // sequence_number ])); }; minf = function(track) { return box(types.minf, track.type === 'video' ? box(types.vmhd, VMHD) : box(types.smhd, SMHD), dinf(), stbl(track)); }; moof = function(sequenceNumber, tracks) { var trackFragments = [], i = tracks.length; // build traf boxes for each track fragment while (i--) { trackFragments[i] = traf(tracks[i]); } return box.apply(null, [ types.moof, mfhd(sequenceNumber) ].concat(trackFragments)); }; /** * Returns a movie box. * @param tracks {array} the tracks associated with this movie * @see ISO/IEC 14496-12:2012(E), section 8.2.1 */ moov = function(tracks) { var i = tracks.length, boxes = []; while (i--) { boxes[i] = trak(tracks[i]); } return box.apply(null, [types.moov, mvhd(0xffffffff)].concat(boxes).concat(mvex(tracks))); }; mvex = function(tracks) { var i = tracks.length, boxes = []; while (i--) { boxes[i] = trex(tracks[i]); } return box.apply(null, [types.mvex].concat(boxes)); }; mvhd = function(duration) { var bytes = new Uint8Array([ 0x00, // version 0 0x00, 0x00, 0x00, // flags 0x00, 0x00, 0x00, 0x01, // creation_time 0x00, 0x00, 0x00, 0x02, // modification_time 0x00, 0x01, 0x5f, 0x90, // timescale, 90,000 "ticks" per second (duration & 0xFF000000) >> 24, (duration & 0xFF0000) >> 16, (duration & 0xFF00) >> 8, duration & 0xFF, // duration 0x00, 0x01, 0x00, 0x00, // 1.0 rate 0x01, 0x00, // 1.0 volume 0x00, 0x00, // reserved 0x00, 0x00, 0x00, 0x00, // reserved 0x00, 0x00, 0x00, 0x00, // reserved 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00, // transformation: unity matrix 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, // pre_defined 0xff, 0xff, 0xff, 0xff // next_track_ID ]); return box(types.mvhd, bytes); }; sdtp = function(track) { var samples = track.samples || [], bytes = new Uint8Array(4 + samples.length), flags, i; // leave the full box header (4 bytes) all zero // write the sample table for (i = 0; i < samples.length; i++) { flags = samples[i].flags; bytes[i + 4] = (flags.dependsOn << 4) | (flags.isDependedOn << 2) | (flags.hasRedundancy); } return box(types.sdtp, bytes); }; stbl = function(track) { return box(types.stbl, stsd(track), box(types.stts, STTS), box(types.stsc, STSC), box(types.stsz, STSZ), box(types.stco, STCO)); }; (function() { var videoSample, audioSample; stsd = function(track) { return box(types.stsd, new Uint8Array([ 0x00, // version 0 0x00, 0x00, 0x00, // flags 0x00, 0x00, 0x00, 0x01 ]), track.type === 'video' ? videoSample(track) : audioSample(track)); }; videoSample = function(track) { var sps = track.sps || [], pps = track.pps || [], sequenceParameterSets = [], pictureParameterSets = [], i; // assemble the SPSs for (i = 0; i < sps.length; i++) { sequenceParameterSets.push((sps[i].byteLength & 0xFF00) >>> 8); sequenceParameterSets.push((sps[i].byteLength & 0xFF)); // sequenceParameterSetLength sequenceParameterSets = sequenceParameterSets.concat(Array.prototype.slice.call(sps[i])); // SPS } // assemble the PPSs for (i = 0; i < pps.length; i++) { pictureParameterSets.push((pps[i].byteLength & 0xFF00) >>> 8); pictureParameterSets.push((pps[i].byteLength & 0xFF)); pictureParameterSets = pictureParameterSets.concat(Array.prototype.slice.call(pps[i])); } return box(types.avc1, new Uint8Array([ 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, // reserved 0x00, 0x01, // data_reference_index 0x00, 0x00, // pre_defined 0x00, 0x00, // reserved 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, // pre_defined (track.width & 0xff00) >> 8, track.width & 0xff, // width (track.height & 0xff00) >> 8, track.height & 0xff, // height 0x00, 0x48, 0x00, 0x00, // horizresolution 0x00, 0x48, 0x00, 0x00, // vertresolution 0x00, 0x00, 0x00, 0x00, // reserved 0x00, 0x01, // frame_count 0x13, 0x76, 0x69, 0x64, 0x65, 0x6f, 0x6a, 0x73, 0x2d, 0x63, 0x6f, 0x6e, 0x74, 0x72, 0x69, 0x62, 0x2d, 0x68, 0x6c, 0x73, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, // compressorname 0x00, 0x18, // depth = 24 0x11, 0x11 // pre_defined = -1 ]), box(types.avcC, new Uint8Array([ 0x01, // configurationVersion track.profileIdc, // AVCProfileIndication track.profileCompatibility, // profile_compatibility track.levelIdc, // AVCLevelIndication 0xff // lengthSizeMinusOne, hard-coded to 4 bytes ].concat([ sps.length // numOfSequenceParameterSets ]).concat(sequenceParameterSets).concat([ pps.length // numOfPictureParameterSets ]).concat(pictureParameterSets))), // "PPS" box(types.btrt, new Uint8Array([ 0x00, 0x1c, 0x9c, 0x80, // bufferSizeDB 0x00, 0x2d, 0xc6, 0xc0, // maxBitrate 0x00, 0x2d, 0xc6, 0xc0 ])) // avgBitrate ); }; audioSample = function(track) { return box(types.mp4a, new Uint8Array([ // SampleEntry, ISO/IEC 14496-12 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, // reserved 0x00, 0x01, // data_reference_index // AudioSampleEntry, ISO/IEC 14496-12 0x00, 0x00, 0x00, 0x00, // reserved 0x00, 0x00, 0x00, 0x00, // reserved (track.channelcount & 0xff00) >> 8, (track.channelcount & 0xff), // channelcount (track.samplesize & 0xff00) >> 8, (track.samplesize & 0xff), // samplesize 0x00, 0x00, // pre_defined 0x00, 0x00, // reserved (track.samplerate & 0xff00) >> 8, (track.samplerate & 0xff), 0x00, 0x00 // samplerate, 16.16 // MP4AudioSampleEntry, ISO/IEC 14496-14 ]), esds(track)); }; }()); tkhd = function(track) { var result = new Uint8Array([ 0x00, // version 0 0x00, 0x00, 0x07, // flags 0x00, 0x00, 0x00, 0x00, // creation_time 0x00, 0x00, 0x00, 0x00, // modification_time (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, track.id & 0xFF, // track_ID 0x00, 0x00, 0x00, 0x00, // reserved (track.duration & 0xFF000000) >> 24, (track.duration & 0xFF0000) >> 16, (track.duration & 0xFF00) >> 8, track.duration & 0xFF, // duration 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, // reserved 0x00, 0x00, // layer 0x00, 0x00, // alternate_group 0x01, 0x00, // non-audio track volume 0x00, 0x00, // reserved 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00, // transformation: unity matrix (track.width & 0xFF00) >> 8, track.width & 0xFF, 0x00, 0x00, // width (track.height & 0xFF00) >> 8, track.height & 0xFF, 0x00, 0x00 // height ]); return box(types.tkhd, result); }; /** * Generate a track fragment (traf) box. A traf box collects metadata * about tracks in a movie fragment (moof) box. */ traf = function(track) { var trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun, sampleDependencyTable, dataOffset, upperWordBaseMediaDecodeTime, lowerWordBaseMediaDecodeTime; trackFragmentHeader = box(types.tfhd, new Uint8Array([ 0x00, // version 0 0x00, 0x00, 0x3a, // flags (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, (track.id & 0xFF), // track_ID 0x00, 0x00, 0x00, 0x01, // sample_description_index 0x00, 0x00, 0x00, 0x00, // default_sample_duration 0x00, 0x00, 0x00, 0x00, // default_sample_size 0x00, 0x00, 0x00, 0x00 // default_sample_flags ])); upperWordBaseMediaDecodeTime = Math.floor(track.baseMediaDecodeTime / (UINT32_MAX + 1)); lowerWordBaseMediaDecodeTime = Math.floor(track.baseMediaDecodeTime % (UINT32_MAX + 1)); trackFragmentDecodeTime = box(types.tfdt, new Uint8Array([ 0x01, // version 1 0x00, 0x00, 0x00, // flags // baseMediaDecodeTime (upperWordBaseMediaDecodeTime >>> 24) & 0xFF, (upperWordBaseMediaDecodeTime >>> 16) & 0xFF, (upperWordBaseMediaDecodeTime >>> 8) & 0xFF, upperWordBaseMediaDecodeTime & 0xFF, (lowerWordBaseMediaDecodeTime >>> 24) & 0xFF, (lowerWordBaseMediaDecodeTime >>> 16) & 0xFF, (lowerWordBaseMediaDecodeTime >>> 8) & 0xFF, lowerWordBaseMediaDecodeTime & 0xFF ])); // the data offset specifies the number of bytes from the start of // the containing moof to the first payload byte of the associated // mdat dataOffset = (32 + // tfhd 20 + // tfdt 8 + // traf header 16 + // mfhd 8 + // moof header 8); // mdat header // audio tracks require less metadata if (track.type === 'audio') { trackFragmentRun = trun(track, dataOffset); return box(types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun); } // video tracks should contain an independent and disposable samples // box (sdtp) // generate one and adjust offsets to match sampleDependencyTable = sdtp(track); trackFragmentRun = trun(track, sampleDependencyTable.length + dataOffset); return box(types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun, sampleDependencyTable); }; /** * Generate a track box. * @param track {object} a track definition * @return {Uint8Array} the track box */ trak = function(track) { track.duration = track.duration || 0xffffffff; return box(types.trak, tkhd(track), mdia(track)); }; trex = function(track) { var result = new Uint8Array([ 0x00, // version 0 0x00, 0x00, 0x00, // flags (track.id & 0xFF000000) >> 24, (track.id & 0xFF0000) >> 16, (track.id & 0xFF00) >> 8, (track.id & 0xFF), // track_ID 0x00, 0x00, 0x00, 0x01, // default_sample_description_index 0x00, 0x00, 0x00, 0x00, // default_sample_duration 0x00, 0x00, 0x00, 0x00, // default_sample_size 0x00, 0x01, 0x00, 0x01 // default_sample_flags ]); // the last two bytes of default_sample_flags is the sample // degradation priority, a hint about the importance of this sample // relative to others. Lower the degradation priority for all sample // types other than video. if (track.type !== 'video') { result[result.length - 1] = 0x00; } return box(types.trex, result); }; (function() { var audioTrun, videoTrun, trunHeader; // This method assumes all samples are uniform. That is, if a // duration is present for the first sample, it will be present for // all subsequent samples. // see ISO/IEC 14496-12:2012, Section 8.8.8.1 trunHeader = function(samples, offset) { var durationPresent = 0, sizePresent = 0, flagsPresent = 0, compositionTimeOffset = 0; // trun flag constants if (samples.length) { if (samples[0].duration !== undefined) { durationPresent = 0x1; } if (samples[0].size !== undefined) { sizePresent = 0x2; } if (samples[0].flags !== undefined) { flagsPresent = 0x4; } if (samples[0].compositionTimeOffset !== undefined) { compositionTimeOffset = 0x8; } } return [ 0x00, // version 0 0x00, durationPresent | sizePresent | flagsPresent | compositionTimeOffset, 0x01, // flags (samples.length & 0xFF000000) >>> 24, (samples.length & 0xFF0000) >>> 16, (samples.length & 0xFF00) >>> 8, samples.length & 0xFF, // sample_count (offset & 0xFF000000) >>> 24, (offset & 0xFF0000) >>> 16, (offset & 0xFF00) >>> 8, offset & 0xFF // data_offset ]; }; videoTrun = function(track, offset) { var bytes, samples, sample, i; samples = track.samples || []; offset += 8 + 12 + (16 * samples.length); bytes = trunHeader(samples, offset); for (i = 0; i < samples.length; i++) { sample = samples[i]; bytes = bytes.concat([ (sample.duration & 0xFF000000) >>> 24, (sample.duration & 0xFF0000) >>> 16, (sample.duration & 0xFF00) >>> 8, sample.duration & 0xFF, // sample_duration (sample.size & 0xFF000000) >>> 24, (sample.size & 0xFF0000) >>> 16, (sample.size & 0xFF00) >>> 8, sample.size & 0xFF, // sample_size (sample.flags.isLeading << 2) | sample.flags.dependsOn, (sample.flags.isDependedOn << 6) | (sample.flags.hasRedundancy << 4) | (sample.flags.paddingValue << 1) | sample.flags.isNonSyncSample, sample.flags.degradationPriority & 0xF0 << 8, sample.flags.degradationPriority & 0x0F, // sample_flags (sample.compositionTimeOffset & 0xFF000000) >>> 24, (sample.compositionTimeOffset & 0xFF0000) >>> 16, (sample.compositionTimeOffset & 0xFF00) >>> 8, sample.compositionTimeOffset & 0xFF // sample_composition_time_offset ]); } return box(types.trun, new Uint8Array(bytes)); }; audioTrun = function(track, offset) { var bytes, samples, sample, i; samples = track.samples || []; offset += 8 + 12 + (8 * samples.length); bytes = trunHeader(samples, offset); for (i = 0; i < samples.length; i++) { sample = samples[i]; bytes = bytes.concat([ (sample.duration & 0xFF000000) >>> 24, (sample.duration & 0xFF0000) >>> 16, (sample.duration & 0xFF00) >>> 8, sample.duration & 0xFF, // sample_duration (sample.size & 0xFF000000) >>> 24, (sample.size & 0xFF0000) >>> 16, (sample.size & 0xFF00) >>> 8, sample.size & 0xFF]); // sample_size } return box(types.trun, new Uint8Array(bytes)); }; trun = function(track, offset) { if (track.type === 'audio') { return audioTrun(track, offset); } return videoTrun(track, offset); }; }()); module.exports = { ftyp: ftyp, mdat: mdat, moof: moof, moov: moov, initSegment: function(tracks) { var fileType = ftyp(), movie = moov(tracks), result; result = new Uint8Array(fileType.byteLength + movie.byteLength); result.set(fileType); result.set(movie, fileType.byteLength); return result; } }; },{}],35:[function(require,module,exports){ /** * mux.js * * Copyright (c) 2015 Brightcove * All rights reserved. * * A stream-based mp2t to mp4 converter. This utility can be used to * deliver mp4s to a SourceBuffer on platforms that support native * Media Source Extensions. */ 'use strict'; var Stream = require('../utils/stream.js'); var mp4 = require('./mp4-generator.js'); var m2ts = require('../m2ts/m2ts.js'); var AdtsStream = require('../codecs/adts.js'); var H264Stream = require('../codecs/h264').H264Stream; var AacStream = require('../aac'); var coneOfSilence = require('../data/silence'); var clock = require('../utils/clock'); // constants var AUDIO_PROPERTIES = [ 'audioobjecttype', 'channelcount', 'samplerate', 'samplingfrequencyindex', 'samplesize' ]; var VIDEO_PROPERTIES = [ 'width', 'height', 'profileIdc', 'levelIdc', 'profileCompatibility' ]; var ONE_SECOND_IN_TS = 90000; // 90kHz clock // object types var VideoSegmentStream, AudioSegmentStream, Transmuxer, CoalesceStream; // Helper functions var createDefaultSample, isLikelyAacData, collectDtsInfo, clearDtsInfo, calculateTrackBaseMediaDecodeTime, arrayEquals, sumFrameByteLengths; /** * Default sample object * see ISO/IEC 14496-12:2012, section 8.6.4.3 */ createDefaultSample = function() { return { size: 0, flags: { isLeading: 0, dependsOn: 1, isDependedOn: 0, hasRedundancy: 0, degradationPriority: 0 } }; }; isLikelyAacData = function(data) { if ((data[0] === 'I'.charCodeAt(0)) && (data[1] === 'D'.charCodeAt(0)) && (data[2] === '3'.charCodeAt(0))) { return true; } return false; }; /** * Compare two arrays (even typed) for same-ness */ arrayEquals = function(a, b) { var i; if (a.length !== b.length) { return false; } // compare the value of each element in the array for (i = 0; i < a.length; i++) { if (a[i] !== b[i]) { return false; } } return true; }; /** * Sum the `byteLength` properties of the data in each AAC frame */ sumFrameByteLengths = function(array) { var i, currentObj, sum = 0; // sum the byteLength's all each nal unit in the frame for (i = 0; i < array.length; i++) { currentObj = array[i]; sum += currentObj.data.byteLength; } return sum; }; /** * Constructs a single-track, ISO BMFF media segment from AAC data * events. The output of this stream can be fed to a SourceBuffer * configured with a suitable initialization segment. */ AudioSegmentStream = function(track) { var adtsFrames = [], sequenceNumber = 0, earliestAllowedDts = 0, audioAppendStartTs = 0, videoBaseMediaDecodeTime = Infinity; AudioSegmentStream.prototype.init.call(this); this.push = function(data) { collectDtsInfo(track, data); if (track) { AUDIO_PROPERTIES.forEach(function(prop) { track[prop] = data[prop]; }); } // buffer audio data until end() is called adtsFrames.push(data); }; this.setEarliestDts = function(earliestDts) { earliestAllowedDts = earliestDts - track.timelineStartInfo.baseMediaDecodeTime; }; this.setVideoBaseMediaDecodeTime = function(baseMediaDecodeTime) { videoBaseMediaDecodeTime = baseMediaDecodeTime; }; this.setAudioAppendStart = function(timestamp) { audioAppendStartTs = timestamp; }; this.flush = function() { var frames, moof, mdat, boxes; // return early if no audio data has been observed if (adtsFrames.length === 0) { this.trigger('done', 'AudioSegmentStream'); return; } frames = this.trimAdtsFramesByEarliestDts_(adtsFrames); track.baseMediaDecodeTime = calculateTrackBaseMediaDecodeTime(track); this.prefixWithSilence_(track, frames); // we have to build the index from byte locations to // samples (that is, adts frames) in the audio data track.samples = this.generateSampleTable_(frames); // concatenate the audio data to constuct the mdat mdat = mp4.mdat(this.concatenateFrameData_(frames)); adtsFrames = []; moof = mp4.moof(sequenceNumber, [track]); boxes = new Uint8Array(moof.byteLength + mdat.byteLength); // bump the sequence number for next time sequenceNumber++; boxes.set(moof); boxes.set(mdat, moof.byteLength); clearDtsInfo(track); this.trigger('data', {track: track, boxes: boxes}); this.trigger('done', 'AudioSegmentStream'); }; // Possibly pad (prefix) the audio track with silence if appending this track // would lead to the introduction of a gap in the audio buffer this.prefixWithSilence_ = function(track, frames) { var baseMediaDecodeTimeTs, frameDuration = 0, audioGapDuration = 0, audioFillFrameCount = 0, audioFillDuration = 0, silentFrame, i; if (!frames.length) { return; } baseMediaDecodeTimeTs = clock.audioTsToVideoTs(track.baseMediaDecodeTime, track.samplerate); // determine frame clock duration based on sample rate, round up to avoid overfills frameDuration = Math.ceil(ONE_SECOND_IN_TS / (track.samplerate / 1024)); if (audioAppendStartTs && videoBaseMediaDecodeTime) { // insert the shortest possible amount (audio gap or audio to video gap) audioGapDuration = baseMediaDecodeTimeTs - Math.max(audioAppendStartTs, videoBaseMediaDecodeTime); // number of full frames in the audio gap audioFillFrameCount = Math.floor(audioGapDuration / frameDuration); audioFillDuration = audioFillFrameCount * frameDuration; } // don't attempt to fill gaps smaller than a single frame or larger // than a half second if (audioFillFrameCount < 1 || audioFillDuration > ONE_SECOND_IN_TS / 2) { return; } silentFrame = coneOfSilence[track.samplerate]; if (!silentFrame) { // we don't have a silent frame pregenerated for the sample rate, so use a frame // from the content instead silentFrame = frames[0].data; } for (i = 0; i < audioFillFrameCount; i++) { frames.splice(i, 0, { data: silentFrame }); } track.baseMediaDecodeTime -= Math.floor(clock.videoTsToAudioTs(audioFillDuration, track.samplerate)); }; // If the audio segment extends before the earliest allowed dts // value, remove AAC frames until starts at or after the earliest // allowed DTS so that we don't end up with a negative baseMedia- // DecodeTime for the audio track this.trimAdtsFramesByEarliestDts_ = function(adtsFrames) { if (track.minSegmentDts >= earliestAllowedDts) { return adtsFrames; } // We will need to recalculate the earliest segment Dts track.minSegmentDts = Infinity; return adtsFrames.filter(function(currentFrame) { // If this is an allowed frame, keep it and record it's Dts if (currentFrame.dts >= earliestAllowedDts) { track.minSegmentDts = Math.min(track.minSegmentDts, currentFrame.dts); track.minSegmentPts = track.minSegmentDts; return true; } // Otherwise, discard it return false; }); }; // generate the track's raw mdat data from an array of frames this.generateSampleTable_ = function(frames) { var i, currentFrame, samples = []; for (i = 0; i < frames.length; i++) { currentFrame = frames[i]; samples.push({ size: currentFrame.data.byteLength, duration: 1024 // For AAC audio, all samples contain 1024 samples }); } return samples; }; // generate the track's sample table from an array of frames this.concatenateFrameData_ = function(frames) { var i, currentFrame, dataOffset = 0, data = new Uint8Array(sumFrameByteLengths(frames)); for (i = 0; i < frames.length; i++) { currentFrame = frames[i]; data.set(currentFrame.data, dataOffset); dataOffset += currentFrame.data.byteLength; } return data; }; }; AudioSegmentStream.prototype = new Stream(); /** * Constructs a single-track, ISO BMFF media segment from H264 data * events. The output of this stream can be fed to a SourceBuffer * configured with a suitable initialization segment. * @param track {object} track metadata configuration * @param options {object} transmuxer options object * @param options.alignGopsAtEnd {boolean} If true, start from the end of the * gopsToAlignWith list when attempting to align gop pts */ VideoSegmentStream = function(track, options) { var sequenceNumber = 0, nalUnits = [], gopsToAlignWith = [], config, pps; options = options || {}; VideoSegmentStream.prototype.init.call(this); delete track.minPTS; this.gopCache_ = []; this.push = function(nalUnit) { collectDtsInfo(track, nalUnit); // record the track config if (nalUnit.nalUnitType === 'seq_parameter_set_rbsp' && !config) { config = nalUnit.config; track.sps = [nalUnit.data]; VIDEO_PROPERTIES.forEach(function(prop) { track[prop] = config[prop]; }, this); } if (nalUnit.nalUnitType === 'pic_parameter_set_rbsp' && !pps) { pps = nalUnit.data; track.pps = [nalUnit.data]; } // buffer video until flush() is called nalUnits.push(nalUnit); }; this.flush = function() { var frames, gopForFusion, gops, moof, mdat, boxes; // Throw away nalUnits at the start of the byte stream until // we find the first AUD while (nalUnits.length) { if (nalUnits[0].nalUnitType === 'access_unit_delimiter_rbsp') { break; } nalUnits.shift(); } // Return early if no video data has been observed if (nalUnits.length === 0) { this.resetStream_(); this.trigger('done', 'VideoSegmentStream'); return; } // Organize the raw nal-units into arrays that represent // higher-level constructs such as frames and gops // (group-of-pictures) frames = this.groupNalsIntoFrames_(nalUnits); gops = this.groupFramesIntoGops_(frames); // If the first frame of this fragment is not a keyframe we have // a problem since MSE (on Chrome) requires a leading keyframe. // // We have two approaches to repairing this situation: // 1) GOP-FUSION: // This is where we keep track of the GOPS (group-of-pictures) // from previous fragments and attempt to find one that we can // prepend to the current fragment in order to create a valid // fragment. // 2) KEYFRAME-PULLING: // Here we search for the first keyframe in the fragment and // throw away all the frames between the start of the fragment // and that keyframe. We then extend the duration and pull the // PTS of the keyframe forward so that it covers the time range // of the frames that were disposed of. // // #1 is far prefereable over #2 which can cause "stuttering" but // requires more things to be just right. if (!gops[0][0].keyFrame) { // Search for a gop for fusion from our gopCache gopForFusion = this.getGopForFusion_(nalUnits[0], track); if (gopForFusion) { gops.unshift(gopForFusion); // Adjust Gops' metadata to account for the inclusion of the // new gop at the beginning gops.byteLength += gopForFusion.byteLength; gops.nalCount += gopForFusion.nalCount; gops.pts = gopForFusion.pts; gops.dts = gopForFusion.dts; gops.duration += gopForFusion.duration; } else { // If we didn't find a candidate gop fall back to keyrame-pulling gops = this.extendFirstKeyFrame_(gops); } } // Trim gops to align with gopsToAlignWith if (gopsToAlignWith.length) { var alignedGops; if (options.alignGopsAtEnd) { alignedGops = this.alignGopsAtEnd_(gops); } else { alignedGops = this.alignGopsAtStart_(gops); } if (!alignedGops) { // save all the nals in the last GOP into the gop cache this.gopCache_.unshift({ gop: gops.pop(), pps: track.pps, sps: track.sps }); // Keep a maximum of 6 GOPs in the cache this.gopCache_.length = Math.min(6, this.gopCache_.length); // Clear nalUnits nalUnits = []; // return early no gops can be aligned with desired gopsToAlignWith this.resetStream_(); this.trigger('done', 'VideoSegmentStream'); return; } // Some gops were trimmed. clear dts info so minSegmentDts and pts are correct // when recalculated before sending off to CoalesceStream clearDtsInfo(track); gops = alignedGops; } collectDtsInfo(track, gops); // First, we have to build the index from byte locations to // samples (that is, frames) in the video data track.samples = this.generateSampleTable_(gops); // Concatenate the video data and construct the mdat mdat = mp4.mdat(this.concatenateNalData_(gops)); track.baseMediaDecodeTime = calculateTrackBaseMediaDecodeTime(track); this.trigger('processedGopsInfo', gops.map(function(gop) { return { pts: gop.pts, dts: gop.dts, byteLength: gop.byteLength }; })); // save all the nals in the last GOP into the gop cache this.gopCache_.unshift({ gop: gops.pop(), pps: track.pps, sps: track.sps }); // Keep a maximum of 6 GOPs in the cache this.gopCache_.length = Math.min(6, this.gopCache_.length); // Clear nalUnits nalUnits = []; this.trigger('baseMediaDecodeTime', track.baseMediaDecodeTime); this.trigger('timelineStartInfo', track.timelineStartInfo); moof = mp4.moof(sequenceNumber, [track]); // it would be great to allocate this array up front instead of // throwing away hundreds of media segment fragments boxes = new Uint8Array(moof.byteLength + mdat.byteLength); // Bump the sequence number for next time sequenceNumber++; boxes.set(moof); boxes.set(mdat, moof.byteLength); this.trigger('data', {track: track, boxes: boxes}); this.resetStream_(); // Continue with the flush process now this.trigger('done', 'VideoSegmentStream'); }; this.resetStream_ = function() { clearDtsInfo(track); // reset config and pps because they may differ across segments // for instance, when we are rendition switching config = undefined; pps = undefined; }; // Search for a candidate Gop for gop-fusion from the gop cache and // return it or return null if no good candidate was found this.getGopForFusion_ = function(nalUnit) { var halfSecond = 45000, // Half-a-second in a 90khz clock allowableOverlap = 10000, // About 3 frames @ 30fps nearestDistance = Infinity, dtsDistance, nearestGopObj, currentGop, currentGopObj, i; // Search for the GOP nearest to the beginning of this nal unit for (i = 0; i < this.gopCache_.length; i++) { currentGopObj = this.gopCache_[i]; currentGop = currentGopObj.gop; // Reject Gops with different SPS or PPS if (!(track.pps && arrayEquals(track.pps[0], currentGopObj.pps[0])) || !(track.sps && arrayEquals(track.sps[0], currentGopObj.sps[0]))) { continue; } // Reject Gops that would require a negative baseMediaDecodeTime if (currentGop.dts < track.timelineStartInfo.dts) { continue; } // The distance between the end of the gop and the start of the nalUnit dtsDistance = (nalUnit.dts - currentGop.dts) - currentGop.duration; // Only consider GOPS that start before the nal unit and end within // a half-second of the nal unit if (dtsDistance >= -allowableOverlap && dtsDistance <= halfSecond) { // Always use the closest GOP we found if there is more than // one candidate if (!nearestGopObj || nearestDistance > dtsDistance) { nearestGopObj = currentGopObj; nearestDistance = dtsDistance; } } } if (nearestGopObj) { return nearestGopObj.gop; } return null; }; this.extendFirstKeyFrame_ = function(gops) { var currentGop; if (!gops[0][0].keyFrame && gops.length > 1) { // Remove the first GOP currentGop = gops.shift(); gops.byteLength -= currentGop.byteLength; gops.nalCount -= currentGop.nalCount; // Extend the first frame of what is now the // first gop to cover the time period of the // frames we just removed gops[0][0].dts = currentGop.dts; gops[0][0].pts = currentGop.pts; gops[0][0].duration += currentGop.duration; } return gops; }; // Convert an array of nal units into an array of frames with each frame being // composed of the nal units that make up that frame // Also keep track of cummulative data about the frame from the nal units such // as the frame duration, starting pts, etc. this.groupNalsIntoFrames_ = function(nalUnits) { var i, currentNal, currentFrame = [], frames = []; currentFrame.byteLength = 0; for (i = 0; i < nalUnits.length; i++) { currentNal = nalUnits[i]; // Split on 'aud'-type nal units if (currentNal.nalUnitType === 'access_unit_delimiter_rbsp') { // Since the very first nal unit is expected to be an AUD // only push to the frames array when currentFrame is not empty if (currentFrame.length) { currentFrame.duration = currentNal.dts - currentFrame.dts; frames.push(currentFrame); } currentFrame = [currentNal]; currentFrame.byteLength = currentNal.data.byteLength; currentFrame.pts = currentNal.pts; currentFrame.dts = currentNal.dts; } else { // Specifically flag key frames for ease of use later if (currentNal.nalUnitType === 'slice_layer_without_partitioning_rbsp_idr') { currentFrame.keyFrame = true; } currentFrame.duration = currentNal.dts - currentFrame.dts; currentFrame.byteLength += currentNal.data.byteLength; currentFrame.push(currentNal); } } // For the last frame, use the duration of the previous frame if we // have nothing better to go on if (frames.length && (!currentFrame.duration || currentFrame.duration <= 0)) { currentFrame.duration = frames[frames.length - 1].duration; } // Push the final frame frames.push(currentFrame); return frames; }; // Convert an array of frames into an array of Gop with each Gop being composed // of the frames that make up that Gop // Also keep track of cummulative data about the Gop from the frames such as the // Gop duration, starting pts, etc. this.groupFramesIntoGops_ = function(frames) { var i, currentFrame, currentGop = [], gops = []; // We must pre-set some of the values on the Gop since we // keep running totals of these values currentGop.byteLength = 0; currentGop.nalCount = 0; currentGop.duration = 0; currentGop.pts = frames[0].pts; currentGop.dts = frames[0].dts; // store some metadata about all the Gops gops.byteLength = 0; gops.nalCount = 0; gops.duration = 0; gops.pts = frames[0].pts; gops.dts = frames[0].dts; for (i = 0; i < frames.length; i++) { currentFrame = frames[i]; if (currentFrame.keyFrame) { // Since the very first frame is expected to be an keyframe // only push to the gops array when currentGop is not empty if (currentGop.length) { gops.push(currentGop); gops.byteLength += currentGop.byteLength; gops.nalCount += currentGop.nalCount; gops.duration += currentGop.duration; } currentGop = [currentFrame]; currentGop.nalCount = currentFrame.length; currentGop.byteLength = currentFrame.byteLength; currentGop.pts = currentFrame.pts; currentGop.dts = currentFrame.dts; currentGop.duration = currentFrame.duration; } else { currentGop.duration += currentFrame.duration; currentGop.nalCount += currentFrame.length; currentGop.byteLength += currentFrame.byteLength; currentGop.push(currentFrame); } } if (gops.length && currentGop.duration <= 0) { currentGop.duration = gops[gops.length - 1].duration; } gops.byteLength += currentGop.byteLength; gops.nalCount += currentGop.nalCount; gops.duration += currentGop.duration; // push the final Gop gops.push(currentGop); return gops; }; // generate the track's sample table from an array of gops this.generateSampleTable_ = function(gops, baseDataOffset) { var h, i, sample, currentGop, currentFrame, dataOffset = baseDataOffset || 0, samples = []; for (h = 0; h < gops.length; h++) { currentGop = gops[h]; for (i = 0; i < currentGop.length; i++) { currentFrame = currentGop[i]; sample = createDefaultSample(); sample.dataOffset = dataOffset; sample.compositionTimeOffset = currentFrame.pts - currentFrame.dts; sample.duration = currentFrame.duration; sample.size = 4 * currentFrame.length; // Space for nal unit size sample.size += currentFrame.byteLength; if (currentFrame.keyFrame) { sample.flags.dependsOn = 2; } dataOffset += sample.size; samples.push(sample); } } return samples; }; // generate the track's raw mdat data from an array of gops this.concatenateNalData_ = function(gops) { var h, i, j, currentGop, currentFrame, currentNal, dataOffset = 0, nalsByteLength = gops.byteLength, numberOfNals = gops.nalCount, totalByteLength = nalsByteLength + 4 * numberOfNals, data = new Uint8Array(totalByteLength), view = new DataView(data.buffer); // For each Gop.. for (h = 0; h < gops.length; h++) { currentGop = gops[h]; // For each Frame.. for (i = 0; i < currentGop.length; i++) { currentFrame = currentGop[i]; // For each NAL.. for (j = 0; j < currentFrame.length; j++) { currentNal = currentFrame[j]; view.setUint32(dataOffset, currentNal.data.byteLength); dataOffset += 4; data.set(currentNal.data, dataOffset); dataOffset += currentNal.data.byteLength; } } } return data; }; // trim gop list to the first gop found that has a matching pts with a gop in the list // of gopsToAlignWith starting from the START of the list this.alignGopsAtStart_ = function(gops) { var alignIndex, gopIndex, align, gop, byteLength, nalCount, duration, alignedGops; byteLength = gops.byteLength; nalCount = gops.nalCount; duration = gops.duration; alignIndex = gopIndex = 0; while (alignIndex < gopsToAlignWith.length && gopIndex < gops.length) { align = gopsToAlignWith[alignIndex]; gop = gops[gopIndex]; if (align.pts === gop.pts) { break; } if (gop.pts > align.pts) { // this current gop starts after the current gop we want to align on, so increment // align index alignIndex++; continue; } // current gop starts before the current gop we want to align on. so increment gop // index gopIndex++; byteLength -= gop.byteLength; nalCount -= gop.nalCount; duration -= gop.duration; } if (gopIndex === 0) { // no gops to trim return gops; } if (gopIndex === gops.length) { // all gops trimmed, skip appending all gops return null; } alignedGops = gops.slice(gopIndex); alignedGops.byteLength = byteLength; alignedGops.duration = duration; alignedGops.nalCount = nalCount; alignedGops.pts = alignedGops[0].pts; alignedGops.dts = alignedGops[0].dts; return alignedGops; }; // trim gop list to the first gop found that has a matching pts with a gop in the list // of gopsToAlignWith starting from the END of the list this.alignGopsAtEnd_ = function(gops) { var alignIndex, gopIndex, align, gop, alignEndIndex, matchFound; alignIndex = gopsToAlignWith.length - 1; gopIndex = gops.length - 1; alignEndIndex = null; matchFound = false; while (alignIndex >= 0 && gopIndex >= 0) { align = gopsToAlignWith[alignIndex]; gop = gops[gopIndex]; if (align.pts === gop.pts) { matchFound = true; break; } if (align.pts > gop.pts) { alignIndex--; continue; } if (alignIndex === gopsToAlignWith.length - 1) { // gop.pts is greater than the last alignment candidate. If no match is found // by the end of this loop, we still want to append gops that come after this // point alignEndIndex = gopIndex; } gopIndex--; } if (!matchFound && alignEndIndex === null) { return null; } var trimIndex; if (matchFound) { trimIndex = gopIndex; } else { trimIndex = alignEndIndex; } if (trimIndex === 0) { return gops; } var alignedGops = gops.slice(trimIndex); var metadata = alignedGops.reduce(function(total, gop) { total.byteLength += gop.byteLength; total.duration += gop.duration; total.nalCount += gop.nalCount; return total; }, { byteLength: 0, duration: 0, nalCount: 0 }); alignedGops.byteLength = metadata.byteLength; alignedGops.duration = metadata.duration; alignedGops.nalCount = metadata.nalCount; alignedGops.pts = alignedGops[0].pts; alignedGops.dts = alignedGops[0].dts; return alignedGops; }; this.alignGopsWith = function(newGopsToAlignWith) { gopsToAlignWith = newGopsToAlignWith; }; }; VideoSegmentStream.prototype = new Stream(); /** * Store information about the start and end of the track and the * duration for each frame/sample we process in order to calculate * the baseMediaDecodeTime */ collectDtsInfo = function(track, data) { if (typeof data.pts === 'number') { if (track.timelineStartInfo.pts === undefined) { track.timelineStartInfo.pts = data.pts; } if (track.minSegmentPts === undefined) { track.minSegmentPts = data.pts; } else { track.minSegmentPts = Math.min(track.minSegmentPts, data.pts); } if (track.maxSegmentPts === undefined) { track.maxSegmentPts = data.pts; } else { track.maxSegmentPts = Math.max(track.maxSegmentPts, data.pts); } } if (typeof data.dts === 'number') { if (track.timelineStartInfo.dts === undefined) { track.timelineStartInfo.dts = data.dts; } if (track.minSegmentDts === undefined) { track.minSegmentDts = data.dts; } else { track.minSegmentDts = Math.min(track.minSegmentDts, data.dts); } if (track.maxSegmentDts === undefined) { track.maxSegmentDts = data.dts; } else { track.maxSegmentDts = Math.max(track.maxSegmentDts, data.dts); } } }; /** * Clear values used to calculate the baseMediaDecodeTime between * tracks */ clearDtsInfo = function(track) { delete track.minSegmentDts; delete track.maxSegmentDts; delete track.minSegmentPts; delete track.maxSegmentPts; }; /** * Calculate the track's baseMediaDecodeTime based on the earliest * DTS the transmuxer has ever seen and the minimum DTS for the * current track */ calculateTrackBaseMediaDecodeTime = function(track) { var baseMediaDecodeTime, scale, // Calculate the distance, in time, that this segment starts from the start // of the timeline (earliest time seen since the transmuxer initialized) timeSinceStartOfTimeline = track.minSegmentDts - track.timelineStartInfo.dts; // track.timelineStartInfo.baseMediaDecodeTime is the location, in time, where // we want the start of the first segment to be placed baseMediaDecodeTime = track.timelineStartInfo.baseMediaDecodeTime; // Add to that the distance this segment is from the very first baseMediaDecodeTime += timeSinceStartOfTimeline; // baseMediaDecodeTime must not become negative baseMediaDecodeTime = Math.max(0, baseMediaDecodeTime); if (track.type === 'audio') { // Audio has a different clock equal to the sampling_rate so we need to // scale the PTS values into the clock rate of the track scale = track.samplerate / ONE_SECOND_IN_TS; baseMediaDecodeTime *= scale; baseMediaDecodeTime = Math.floor(baseMediaDecodeTime); } return baseMediaDecodeTime; }; /** * A Stream that can combine multiple streams (ie. audio & video) * into a single output segment for MSE. Also supports audio-only * and video-only streams. */ CoalesceStream = function(options, metadataStream) { // Number of Tracks per output segment // If greater than 1, we combine multiple // tracks into a single segment this.numberOfTracks = 0; this.metadataStream = metadataStream; if (typeof options.remux !== 'undefined') { this.remuxTracks = !!options.remux; } else { this.remuxTracks = true; } this.pendingTracks = []; this.videoTrack = null; this.pendingBoxes = []; this.pendingCaptions = []; this.pendingMetadata = []; this.pendingBytes = 0; this.emittedTracks = 0; CoalesceStream.prototype.init.call(this); // Take output from multiple this.push = function(output) { // buffer incoming captions until the associated video segment // finishes if (output.text) { return this.pendingCaptions.push(output); } // buffer incoming id3 tags until the final flush if (output.frames) { return this.pendingMetadata.push(output); } // Add this track to the list of pending tracks and store // important information required for the construction of // the final segment this.pendingTracks.push(output.track); this.pendingBoxes.push(output.boxes); this.pendingBytes += output.boxes.byteLength; if (output.track.type === 'video') { this.videoTrack = output.track; } if (output.track.type === 'audio') { this.audioTrack = output.track; } }; }; CoalesceStream.prototype = new Stream(); CoalesceStream.prototype.flush = function(flushSource) { var offset = 0, event = { captions: [], captionStreams: {}, metadata: [], info: {} }, caption, id3, initSegment, timelineStartPts = 0, i; if (this.pendingTracks.length < this.numberOfTracks) { if (flushSource !== 'VideoSegmentStream' && flushSource !== 'AudioSegmentStream') { // Return because we haven't received a flush from a data-generating // portion of the segment (meaning that we have only recieved meta-data // or captions.) return; } else if (this.remuxTracks) { // Return until we have enough tracks from the pipeline to remux (if we // are remuxing audio and video into a single MP4) return; } else if (this.pendingTracks.length === 0) { // In the case where we receive a flush without any data having been // received we consider it an emitted track for the purposes of coalescing // `done` events. // We do this for the case where there is an audio and video track in the // segment but no audio data. (seen in several playlists with alternate // audio tracks and no audio present in the main TS segments.) this.emittedTracks++; if (this.emittedTracks >= this.numberOfTracks) { this.trigger('done'); this.emittedTracks = 0; } return; } } if (this.videoTrack) { timelineStartPts = this.videoTrack.timelineStartInfo.pts; VIDEO_PROPERTIES.forEach(function(prop) { event.info[prop] = this.videoTrack[prop]; }, this); } else if (this.audioTrack) { timelineStartPts = this.audioTrack.timelineStartInfo.pts; AUDIO_PROPERTIES.forEach(function(prop) { event.info[prop] = this.audioTrack[prop]; }, this); } if (this.pendingTracks.length === 1) { event.type = this.pendingTracks[0].type; } else { event.type = 'combined'; } this.emittedTracks += this.pendingTracks.length; initSegment = mp4.initSegment(this.pendingTracks); // Create a new typed array to hold the init segment event.initSegment = new Uint8Array(initSegment.byteLength); // Create an init segment containing a moov // and track definitions event.initSegment.set(initSegment); // Create a new typed array to hold the moof+mdats event.data = new Uint8Array(this.pendingBytes); // Append each moof+mdat (one per track) together for (i = 0; i < this.pendingBoxes.length; i++) { event.data.set(this.pendingBoxes[i], offset); offset += this.pendingBoxes[i].byteLength; } // Translate caption PTS times into second offsets into the // video timeline for the segment, and add track info for (i = 0; i < this.pendingCaptions.length; i++) { caption = this.pendingCaptions[i]; caption.startTime = (caption.startPts - timelineStartPts); caption.startTime /= 90e3; caption.endTime = (caption.endPts - timelineStartPts); caption.endTime /= 90e3; event.captionStreams[caption.stream] = true; event.captions.push(caption); } // Translate ID3 frame PTS times into second offsets into the // video timeline for the segment for (i = 0; i < this.pendingMetadata.length; i++) { id3 = this.pendingMetadata[i]; id3.cueTime = (id3.pts - timelineStartPts); id3.cueTime /= 90e3; event.metadata.push(id3); } // We add this to every single emitted segment even though we only need // it for the first event.metadata.dispatchType = this.metadataStream.dispatchType; // Reset stream state this.pendingTracks.length = 0; this.videoTrack = null; this.pendingBoxes.length = 0; this.pendingCaptions.length = 0; this.pendingBytes = 0; this.pendingMetadata.length = 0; // Emit the built segment this.trigger('data', event); // Only emit `done` if all tracks have been flushed and emitted if (this.emittedTracks >= this.numberOfTracks) { this.trigger('done'); this.emittedTracks = 0; } }; /** * A Stream that expects MP2T binary data as input and produces * corresponding media segments, suitable for use with Media Source * Extension (MSE) implementations that support the ISO BMFF byte * stream format, like Chrome. */ Transmuxer = function(options) { var self = this, hasFlushed = true, videoTrack, audioTrack; Transmuxer.prototype.init.call(this); options = options || {}; this.baseMediaDecodeTime = options.baseMediaDecodeTime || 0; this.transmuxPipeline_ = {}; this.setupAacPipeline = function() { var pipeline = {}; this.transmuxPipeline_ = pipeline; pipeline.type = 'aac'; pipeline.metadataStream = new m2ts.MetadataStream(); // set up the parsing pipeline pipeline.aacStream = new AacStream(); pipeline.audioTimestampRolloverStream = new m2ts.TimestampRolloverStream('audio'); pipeline.timedMetadataTimestampRolloverStream = new m2ts.TimestampRolloverStream('timed-metadata'); pipeline.adtsStream = new AdtsStream(); pipeline.coalesceStream = new CoalesceStream(options, pipeline.metadataStream); pipeline.headOfPipeline = pipeline.aacStream; pipeline.aacStream .pipe(pipeline.audioTimestampRolloverStream) .pipe(pipeline.adtsStream); pipeline.aacStream .pipe(pipeline.timedMetadataTimestampRolloverStream) .pipe(pipeline.metadataStream) .pipe(pipeline.coalesceStream); pipeline.metadataStream.on('timestamp', function(frame) { pipeline.aacStream.setTimestamp(frame.timeStamp); }); pipeline.aacStream.on('data', function(data) { if (data.type === 'timed-metadata' && !pipeline.audioSegmentStream) { audioTrack = audioTrack || { timelineStartInfo: { baseMediaDecodeTime: self.baseMediaDecodeTime }, codec: 'adts', type: 'audio' }; // hook up the audio segment stream to the first track with aac data pipeline.coalesceStream.numberOfTracks++; pipeline.audioSegmentStream = new AudioSegmentStream(audioTrack); // Set up the final part of the audio pipeline pipeline.adtsStream .pipe(pipeline.audioSegmentStream) .pipe(pipeline.coalesceStream); } }); // Re-emit any data coming from the coalesce stream to the outside world pipeline.coalesceStream.on('data', this.trigger.bind(this, 'data')); // Let the consumer know we have finished flushing the entire pipeline pipeline.coalesceStream.on('done', this.trigger.bind(this, 'done')); }; this.setupTsPipeline = function() { var pipeline = {}; this.transmuxPipeline_ = pipeline; pipeline.type = 'ts'; pipeline.metadataStream = new m2ts.MetadataStream(); // set up the parsing pipeline pipeline.packetStream = new m2ts.TransportPacketStream(); pipeline.parseStream = new m2ts.TransportParseStream(); pipeline.elementaryStream = new m2ts.ElementaryStream(); pipeline.videoTimestampRolloverStream = new m2ts.TimestampRolloverStream('video'); pipeline.audioTimestampRolloverStream = new m2ts.TimestampRolloverStream('audio'); pipeline.timedMetadataTimestampRolloverStream = new m2ts.TimestampRolloverStream('timed-metadata'); pipeline.adtsStream = new AdtsStream(); pipeline.h264Stream = new H264Stream(); pipeline.captionStream = new m2ts.CaptionStream(); pipeline.coalesceStream = new CoalesceStream(options, pipeline.metadataStream); pipeline.headOfPipeline = pipeline.packetStream; // disassemble MPEG2-TS packets into elementary streams pipeline.packetStream .pipe(pipeline.parseStream) .pipe(pipeline.elementaryStream); // !!THIS ORDER IS IMPORTANT!! // demux the streams pipeline.elementaryStream .pipe(pipeline.videoTimestampRolloverStream) .pipe(pipeline.h264Stream); pipeline.elementaryStream .pipe(pipeline.audioTimestampRolloverStream) .pipe(pipeline.adtsStream); pipeline.elementaryStream .pipe(pipeline.timedMetadataTimestampRolloverStream) .pipe(pipeline.metadataStream) .pipe(pipeline.coalesceStream); // Hook up CEA-608/708 caption stream pipeline.h264Stream.pipe(pipeline.captionStream) .pipe(pipeline.coalesceStream); pipeline.elementaryStream.on('data', function(data) { var i; if (data.type === 'metadata') { i = data.tracks.length; // scan the tracks listed in the metadata while (i--) { if (!videoTrack && data.tracks[i].type === 'video') { videoTrack = data.tracks[i]; videoTrack.timelineStartInfo.baseMediaDecodeTime = self.baseMediaDecodeTime; } else if (!audioTrack && data.tracks[i].type === 'audio') { audioTrack = data.tracks[i]; audioTrack.timelineStartInfo.baseMediaDecodeTime = self.baseMediaDecodeTime; } } // hook up the video segment stream to the first track with h264 data if (videoTrack && !pipeline.videoSegmentStream) { pipeline.coalesceStream.numberOfTracks++; pipeline.videoSegmentStream = new VideoSegmentStream(videoTrack, options); pipeline.videoSegmentStream.on('timelineStartInfo', function(timelineStartInfo) { // When video emits timelineStartInfo data after a flush, we forward that // info to the AudioSegmentStream, if it exists, because video timeline // data takes precedence. if (audioTrack) { audioTrack.timelineStartInfo = timelineStartInfo; // On the first segment we trim AAC frames that exist before the // very earliest DTS we have seen in video because Chrome will // interpret any video track with a baseMediaDecodeTime that is // non-zero as a gap. pipeline.audioSegmentStream.setEarliestDts(timelineStartInfo.dts); } }); pipeline.videoSegmentStream.on('processedGopsInfo', self.trigger.bind(self, 'gopInfo')); pipeline.videoSegmentStream.on('baseMediaDecodeTime', function(baseMediaDecodeTime) { if (audioTrack) { pipeline.audioSegmentStream.setVideoBaseMediaDecodeTime(baseMediaDecodeTime); } }); // Set up the final part of the video pipeline pipeline.h264Stream .pipe(pipeline.videoSegmentStream) .pipe(pipeline.coalesceStream); } if (audioTrack && !pipeline.audioSegmentStream) { // hook up the audio segment stream to the first track with aac data pipeline.coalesceStream.numberOfTracks++; pipeline.audioSegmentStream = new AudioSegmentStream(audioTrack); // Set up the final part of the audio pipeline pipeline.adtsStream .pipe(pipeline.audioSegmentStream) .pipe(pipeline.coalesceStream); } } }); // Re-emit any data coming from the coalesce stream to the outside world pipeline.coalesceStream.on('data', this.trigger.bind(this, 'data')); // Let the consumer know we have finished flushing the entire pipeline pipeline.coalesceStream.on('done', this.trigger.bind(this, 'done')); }; // hook up the segment streams once track metadata is delivered this.setBaseMediaDecodeTime = function(baseMediaDecodeTime) { var pipeline = this.transmuxPipeline_; this.baseMediaDecodeTime = baseMediaDecodeTime; if (audioTrack) { audioTrack.timelineStartInfo.dts = undefined; audioTrack.timelineStartInfo.pts = undefined; clearDtsInfo(audioTrack); audioTrack.timelineStartInfo.baseMediaDecodeTime = baseMediaDecodeTime; if (pipeline.audioTimestampRolloverStream) { pipeline.audioTimestampRolloverStream.discontinuity(); } } if (videoTrack) { if (pipeline.videoSegmentStream) { pipeline.videoSegmentStream.gopCache_ = []; pipeline.videoTimestampRolloverStream.discontinuity(); } videoTrack.timelineStartInfo.dts = undefined; videoTrack.timelineStartInfo.pts = undefined; clearDtsInfo(videoTrack); pipeline.captionStream.reset(); videoTrack.timelineStartInfo.baseMediaDecodeTime = baseMediaDecodeTime; } if (pipeline.timedMetadataTimestampRolloverStream) { pipeline.timedMetadataTimestampRolloverStream.discontinuity(); } }; this.setAudioAppendStart = function(timestamp) { if (audioTrack) { this.transmuxPipeline_.audioSegmentStream.setAudioAppendStart(timestamp); } }; this.alignGopsWith = function(gopsToAlignWith) { if (videoTrack && this.transmuxPipeline_.videoSegmentStream) { this.transmuxPipeline_.videoSegmentStream.alignGopsWith(gopsToAlignWith); } }; // feed incoming data to the front of the parsing pipeline this.push = function(data) { if (hasFlushed) { var isAac = isLikelyAacData(data); if (isAac && this.transmuxPipeline_.type !== 'aac') { this.setupAacPipeline(); } else if (!isAac && this.transmuxPipeline_.type !== 'ts') { this.setupTsPipeline(); } hasFlushed = false; } this.transmuxPipeline_.headOfPipeline.push(data); }; // flush any buffered data this.flush = function() { hasFlushed = true; // Start at the top of the pipeline and flush all pending work this.transmuxPipeline_.headOfPipeline.flush(); }; // Caption data has to be reset when seeking outside buffered range this.resetCaptions = function() { if (this.transmuxPipeline_.captionStream) { this.transmuxPipeline_.captionStream.reset(); } }; }; Transmuxer.prototype = new Stream(); module.exports = { Transmuxer: Transmuxer, VideoSegmentStream: VideoSegmentStream, AudioSegmentStream: AudioSegmentStream, AUDIO_PROPERTIES: AUDIO_PROPERTIES, VIDEO_PROPERTIES: VIDEO_PROPERTIES }; },{"../aac":18,"../codecs/adts.js":19,"../codecs/h264":20,"../data/silence":21,"../m2ts/m2ts.js":29,"../utils/clock":36,"../utils/stream.js":38,"./mp4-generator.js":34}],36:[function(require,module,exports){ var ONE_SECOND_IN_TS = 90000, // 90kHz clock secondsToVideoTs, secondsToAudioTs, videoTsToSeconds, audioTsToSeconds, audioTsToVideoTs, videoTsToAudioTs; secondsToVideoTs = function(seconds) { return seconds * ONE_SECOND_IN_TS; }; secondsToAudioTs = function(seconds, sampleRate) { return seconds * sampleRate; }; videoTsToSeconds = function(timestamp) { return timestamp / ONE_SECOND_IN_TS; }; audioTsToSeconds = function(timestamp, sampleRate) { return timestamp / sampleRate; }; audioTsToVideoTs = function(timestamp, sampleRate) { return secondsToVideoTs(audioTsToSeconds(timestamp, sampleRate)); }; videoTsToAudioTs = function(timestamp, sampleRate) { return secondsToAudioTs(videoTsToSeconds(timestamp), sampleRate); }; module.exports = { secondsToVideoTs: secondsToVideoTs, secondsToAudioTs: secondsToAudioTs, videoTsToSeconds: videoTsToSeconds, audioTsToSeconds: audioTsToSeconds, audioTsToVideoTs: audioTsToVideoTs, videoTsToAudioTs: videoTsToAudioTs }; },{}],37:[function(require,module,exports){ 'use strict'; var ExpGolomb; /** * Parser for exponential Golomb codes, a variable-bitwidth number encoding * scheme used by h264. */ ExpGolomb = function(workingData) { var // the number of bytes left to examine in workingData workingBytesAvailable = workingData.byteLength, // the current word being examined workingWord = 0, // :uint // the number of bits left to examine in the current word workingBitsAvailable = 0; // :uint; // ():uint this.length = function() { return (8 * workingBytesAvailable); }; // ():uint this.bitsAvailable = function() { return (8 * workingBytesAvailable) + workingBitsAvailable; }; // ():void this.loadWord = function() { var position = workingData.byteLength - workingBytesAvailable, workingBytes = new Uint8Array(4), availableBytes = Math.min(4, workingBytesAvailable); if (availableBytes === 0) { throw new Error('no bytes available'); } workingBytes.set(workingData.subarray(position, position + availableBytes)); workingWord = new DataView(workingBytes.buffer).getUint32(0); // track the amount of workingData that has been processed workingBitsAvailable = availableBytes * 8; workingBytesAvailable -= availableBytes; }; // (count:int):void this.skipBits = function(count) { var skipBytes; // :int if (workingBitsAvailable > count) { workingWord <<= count; workingBitsAvailable -= count; } else { count -= workingBitsAvailable; skipBytes = Math.floor(count / 8); count -= (skipBytes * 8); workingBytesAvailable -= skipBytes; this.loadWord(); workingWord <<= count; workingBitsAvailable -= count; } }; // (size:int):uint this.readBits = function(size) { var bits = Math.min(workingBitsAvailable, size), // :uint valu = workingWord >>> (32 - bits); // :uint // if size > 31, handle error workingBitsAvailable -= bits; if (workingBitsAvailable > 0) { workingWord <<= bits; } else if (workingBytesAvailable > 0) { this.loadWord(); } bits = size - bits; if (bits > 0) { return valu << bits | this.readBits(bits); } return valu; }; // ():uint this.skipLeadingZeros = function() { var leadingZeroCount; // :uint for (leadingZeroCount = 0; leadingZeroCount < workingBitsAvailable; ++leadingZeroCount) { if ((workingWord & (0x80000000 >>> leadingZeroCount)) !== 0) { // the first bit of working word is 1 workingWord <<= leadingZeroCount; workingBitsAvailable -= leadingZeroCount; return leadingZeroCount; } } // we exhausted workingWord and still have not found a 1 this.loadWord(); return leadingZeroCount + this.skipLeadingZeros(); }; // ():void this.skipUnsignedExpGolomb = function() { this.skipBits(1 + this.skipLeadingZeros()); }; // ():void this.skipExpGolomb = function() { this.skipBits(1 + this.skipLeadingZeros()); }; // ():uint this.readUnsignedExpGolomb = function() { var clz = this.skipLeadingZeros(); // :uint return this.readBits(clz + 1) - 1; }; // ():int this.readExpGolomb = function() { var valu = this.readUnsignedExpGolomb(); // :int if (0x01 & valu) { // the number is odd if the low order bit is set return (1 + valu) >>> 1; // add 1 to make it even, and divide by 2 } return -1 * (valu >>> 1); // divide by two then make it negative }; // Some convenience functions // :Boolean this.readBoolean = function() { return this.readBits(1) === 1; }; // ():int this.readUnsignedByte = function() { return this.readBits(8); }; this.loadWord(); }; module.exports = ExpGolomb; },{}],38:[function(require,module,exports){ /** * mux.js * * Copyright (c) 2014 Brightcove * All rights reserved. * * A lightweight readable stream implemention that handles event dispatching. * Objects that inherit from streams should call init in their constructors. */ 'use strict'; var Stream = function() { this.init = function() { var listeners = {}; /** * Add a listener for a specified event type. * @param type {string} the event name * @param listener {function} the callback to be invoked when an event of * the specified type occurs */ this.on = function(type, listener) { if (!listeners[type]) { listeners[type] = []; } listeners[type] = listeners[type].concat(listener); }; /** * Remove a listener for a specified event type. * @param type {string} the event name * @param listener {function} a function previously registered for this * type of event through `on` */ this.off = function(type, listener) { var index; if (!listeners[type]) { return false; } index = listeners[type].indexOf(listener); listeners[type] = listeners[type].slice(); listeners[type].splice(index, 1); return index > -1; }; /** * Trigger an event of the specified type on this stream. Any additional * arguments to this function are passed as parameters to event listeners. * @param type {string} the event name */ this.trigger = function(type) { var callbacks, i, length, args; callbacks = listeners[type]; if (!callbacks) { return; } // Slicing the arguments on every invocation of this method // can add a significant amount of overhead. Avoid the // intermediate object creation for the common case of a // single callback argument if (arguments.length === 2) { length = callbacks.length; for (i = 0; i < length; ++i) { callbacks[i].call(this, arguments[1]); } } else { args = []; i = arguments.length; for (i = 1; i < arguments.length; ++i) { args.push(arguments[i]); } length = callbacks.length; for (i = 0; i < length; ++i) { callbacks[i].apply(this, args); } } }; /** * Destroys the stream and cleans up. */ this.dispose = function() { listeners = {}; }; }; }; /** * Forwards all `data` events on this stream to the destination stream. The * destination stream should provide a method `push` to receive the data * events as they arrive. * @param destination {stream} the stream that will receive all `data` events * @param autoFlush {boolean} if false, we will not call `flush` on the destination * when the current stream emits a 'done' event * @see http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options */ Stream.prototype.pipe = function(destination) { this.on('data', function(data) { destination.push(data); }); this.on('done', function(flushSource) { destination.flush(flushSource); }); return destination; }; // Default stream functions that are expected to be overridden to perform // actual work. These are provided by the prototype as a sort of no-op // implementation so that we don't have to check for their existence in the // `pipe` function above. Stream.prototype.push = function(data) { this.trigger('data', data); }; Stream.prototype.flush = function(flushSource) { this.trigger('done', flushSource); }; module.exports = Stream; },{}],39:[function(require,module,exports){ var trim = require('trim') , forEach = require('for-each') , isArray = function(arg) { return Object.prototype.toString.call(arg) === '[object Array]'; } module.exports = function (headers) { if (!headers) return {} var result = {} forEach( trim(headers).split('\n') , function (row) { var index = row.indexOf(':') , key = trim(row.slice(0, index)).toLowerCase() , value = trim(row.slice(index + 1)) if (typeof(result[key]) === 'undefined') { result[key] = value } else if (isArray(result[key])) { result[key].push(value) } else { result[key] = [ result[key], value ] } } ) return result } },{"for-each":14,"trim":41}],40:[function(require,module,exports){ module.exports = SafeParseTuple function SafeParseTuple(obj, reviver) { var json var error = null try { json = JSON.parse(obj, reviver) } catch (err) { error = err } return [error, json] } },{}],41:[function(require,module,exports){ exports = module.exports = trim; function trim(str){ return str.replace(/^\s*|\s*$/g, ''); } exports.left = function(str){ return str.replace(/^\s*/, ''); }; exports.right = function(str){ return str.replace(/\s*$/, ''); }; },{}],42:[function(require,module,exports){ function clean (s) { return s.replace(/\n\r?\s*/g, '') } module.exports = function tsml (sa) { var s = '' , i = 0 for (; i < arguments.length; i++) s += clean(sa[i]) + (arguments[i + 1] || '') return s } },{}],43:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _button = require('./button.js'); var _button2 = _interopRequireDefault(_button); var _component = require('./component.js'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file big-play-button.js */ /** * The initial play button that shows before the video has played. The hiding of the * `BigPlayButton` get done via CSS and `Player` states. * * @extends Button */ var BigPlayButton = function (_Button) { _inherits(BigPlayButton, _Button); function BigPlayButton(player, options) { _classCallCheck(this, BigPlayButton); var _this = _possibleConstructorReturn(this, _Button.call(this, player, options)); _this.mouseused_ = false; _this.on('mousedown', _this.handleMouseDown); return _this; } /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. Always returns 'vjs-big-play-button'. */ BigPlayButton.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-big-play-button'; }; /** * This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent} * for more detailed information on what a click can be. * * @param {EventTarget~Event} event * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click */ BigPlayButton.prototype.handleClick = function handleClick(event) { var playPromise = this.player_.play(); // exit early if clicked via the mouse if (this.mouseused_ && event.clientX && event.clientY) { return; } var cb = this.player_.getChild('controlBar'); var playToggle = cb && cb.getChild('playToggle'); if (!playToggle) { this.player_.focus(); return; } var playFocus = function playFocus() { return playToggle.focus(); }; if (playPromise && playPromise.then) { var ignoreRejectedPlayPromise = function ignoreRejectedPlayPromise() {}; playPromise.then(playFocus, ignoreRejectedPlayPromise); } else { this.setTimeout(playFocus, 1); } }; BigPlayButton.prototype.handleKeyPress = function handleKeyPress(event) { this.mouseused_ = false; _Button.prototype.handleKeyPress.call(this, event); }; BigPlayButton.prototype.handleMouseDown = function handleMouseDown(event) { this.mouseused_ = true; }; return BigPlayButton; }(_button2['default']); /** * The text that should display over the `BigPlayButton`s controls. Added to for localization. * * @type {string} * @private */ BigPlayButton.prototype.controlText_ = 'Play Video'; _component2['default'].registerComponent('BigPlayButton', BigPlayButton); exports['default'] = BigPlayButton; },{"./button.js":44,"./component.js":47}],44:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _clickableComponent = require('./clickable-component.js'); var _clickableComponent2 = _interopRequireDefault(_clickableComponent); var _component = require('./component'); var _component2 = _interopRequireDefault(_component); var _log = require('./utils/log.js'); var _log2 = _interopRequireDefault(_log); var _obj = require('./utils/obj'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file button.js */ /** * Base class for all buttons. * * @extends ClickableComponent */ var Button = function (_ClickableComponent) { _inherits(Button, _ClickableComponent); function Button() { _classCallCheck(this, Button); return _possibleConstructorReturn(this, _ClickableComponent.apply(this, arguments)); } /** * Create the `Button`s DOM element. * * @param {string} [tag=button] * Element's node type. e.g. 'button' * * @param {Object} [props={}] * An object of properties that should be set on the element. * * @param {Object} [attributes={}] * An object of attributes that should be set on the element. * * @return {Element} * The element that gets created. */ Button.prototype.createEl = function createEl() { var tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'button'; var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; props = (0, _obj.assign)({ className: this.buildCSSClass() }, props); if (tag !== 'button') { _log2['default'].warn('Creating a Button with an HTML element of ' + tag + ' is deprecated; use ClickableComponent instead.'); // Add properties for clickable element which is not a native HTML button props = (0, _obj.assign)({ tabIndex: 0 }, props); // Add ARIA attributes for clickable element which is not a native HTML button attributes = (0, _obj.assign)({ role: 'button' }, attributes); } // Add attributes for button element attributes = (0, _obj.assign)({ // Necessary since the default button type is "submit" 'type': 'button', // let the screen reader user know that the text of the button may change 'aria-live': 'polite' }, attributes); var el = _component2['default'].prototype.createEl.call(this, tag, props, attributes); this.createControlTextEl(el); return el; }; /** * Add a child `Component` inside of this `Button`. * * @param {string|Component} child * The name or instance of a child to add. * * @param {Object} [options={}] * The key/value store of options that will get passed to children of * the child. * * @return {Component} * The `Component` that gets added as a child. When using a string the * `Component` will get created by this process. * * @deprecated since version 5 */ Button.prototype.addChild = function addChild(child) { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var className = this.constructor.name; _log2['default'].warn('Adding an actionable (user controllable) child to a Button (' + className + ') is not supported; use a ClickableComponent instead.'); // Avoid the error message generated by ClickableComponent's addChild method return _component2['default'].prototype.addChild.call(this, child, options); }; /** * Enable the `Button` element so that it can be activated or clicked. Use this with * {@link Button#disable}. */ Button.prototype.enable = function enable() { _ClickableComponent.prototype.enable.call(this); this.el_.removeAttribute('disabled'); }; /** * Enable the `Button` element so that it cannot be activated or clicked. Use this with * {@link Button#enable}. */ Button.prototype.disable = function disable() { _ClickableComponent.prototype.disable.call(this); this.el_.setAttribute('disabled', 'disabled'); }; /** * This gets called when a `Button` has focus and `keydown` is triggered via a key * press. * * @param {EventTarget~Event} event * The event that caused this function to get called. * * @listens keydown */ Button.prototype.handleKeyPress = function handleKeyPress(event) { // Ignore Space (32) or Enter (13) key operation, which is handled by the browser for a button. if (event.which === 32 || event.which === 13) { return; } // Pass keypress handling up for unsupported keys _ClickableComponent.prototype.handleKeyPress.call(this, event); }; return Button; }(_clickableComponent2['default']); _component2['default'].registerComponent('Button', Button); exports['default'] = Button; },{"./clickable-component.js":45,"./component":47,"./utils/log.js":128,"./utils/obj":130}],45:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('./component'); var _component2 = _interopRequireDefault(_component); var _dom = require('./utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _events = require('./utils/events.js'); var Events = _interopRequireWildcard(_events); var _fn = require('./utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _log = require('./utils/log.js'); var _log2 = _interopRequireDefault(_log); var _document = require('global/document'); var _document2 = _interopRequireDefault(_document); var _obj = require('./utils/obj'); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file button.js */ /** * Clickable Component which is clickable or keyboard actionable, * but is not a native HTML button. * * @extends Component */ var ClickableComponent = function (_Component) { _inherits(ClickableComponent, _Component); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function ClickableComponent(player, options) { _classCallCheck(this, ClickableComponent); var _this = _possibleConstructorReturn(this, _Component.call(this, player, options)); _this.emitTapEvents(); _this.enable(); return _this; } /** * Create the `Component`s DOM element. * * @param {string} [tag=div] * The element's node type. * * @param {Object} [props={}] * An object of properties that should be set on the element. * * @param {Object} [attributes={}] * An object of attributes that should be set on the element. * * @return {Element} * The element that gets created. */ ClickableComponent.prototype.createEl = function createEl() { var tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'div'; var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; props = (0, _obj.assign)({ className: this.buildCSSClass(), tabIndex: 0 }, props); if (tag === 'button') { _log2['default'].error('Creating a ClickableComponent with an HTML element of ' + tag + ' is not supported; use a Button instead.'); } // Add ARIA attributes for clickable element which is not a native HTML button attributes = (0, _obj.assign)({ 'role': 'button', // let the screen reader user know that the text of the element may change 'aria-live': 'polite' }, attributes); this.tabIndex_ = props.tabIndex; var el = _Component.prototype.createEl.call(this, tag, props, attributes); this.createControlTextEl(el); return el; }; /** * Create a control text element on this `Component` * * @param {Element} [el] * Parent element for the control text. * * @return {Element} * The control text element that gets created. */ ClickableComponent.prototype.createControlTextEl = function createControlTextEl(el) { this.controlTextEl_ = Dom.createEl('span', { className: 'vjs-control-text' }); if (el) { el.appendChild(this.controlTextEl_); } this.controlText(this.controlText_, el); return this.controlTextEl_; }; /** * Get or set the localize text to use for the controls on the `Component`. * * @param {string} [text] * Control text for element. * * @param {Element} [el=this.el()] * Element to set the title on. * * @return {string|ClickableComponent} * - The control text when getting * - Returns itself when setting; method can be chained. */ ClickableComponent.prototype.controlText = function controlText(text) { var el = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.el(); if (!text) { return this.controlText_ || 'Need Text'; } var localizedText = this.localize(text); this.controlText_ = text; this.controlTextEl_.innerHTML = localizedText; if (!this.nonIconControl) { // Set title attribute if only an icon is shown el.setAttribute('title', localizedText); } return this; }; /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ ClickableComponent.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-control vjs-button ' + _Component.prototype.buildCSSClass.call(this); }; /** * Enable this `Component`s element. * * @return {ClickableComponent} * Returns itself; method can be chained. */ ClickableComponent.prototype.enable = function enable() { this.removeClass('vjs-disabled'); this.el_.setAttribute('aria-disabled', 'false'); if (typeof this.tabIndex_ !== 'undefined') { this.el_.setAttribute('tabIndex', this.tabIndex_); } this.off(['tap', 'click'], this.handleClick); this.off('focus', this.handleFocus); this.off('blur', this.handleBlur); this.on(['tap', 'click'], this.handleClick); this.on('focus', this.handleFocus); this.on('blur', this.handleBlur); return this; }; /** * Disable this `Component`s element. * * @return {ClickableComponent} * Returns itself; method can be chained. */ ClickableComponent.prototype.disable = function disable() { this.addClass('vjs-disabled'); this.el_.setAttribute('aria-disabled', 'true'); if (typeof this.tabIndex_ !== 'undefined') { this.el_.removeAttribute('tabIndex'); } this.off(['tap', 'click'], this.handleClick); this.off('focus', this.handleFocus); this.off('blur', this.handleBlur); return this; }; /** * This gets called when a `ClickableComponent` gets: * - Clicked (via the `click` event, listening starts in the constructor) * - Tapped (via the `tap` event, listening starts in the constructor) * - The following things happen in order: * 1. {@link ClickableComponent#handleFocus} is called via a `focus` event on the * `ClickableComponent`. * 2. {@link ClickableComponent#handleFocus} adds a listener for `keydown` on using * {@link ClickableComponent#handleKeyPress}. * 3. `ClickableComponent` has not had a `blur` event (`blur` means that focus was lost). The user presses * the space or enter key. * 4. {@link ClickableComponent#handleKeyPress} calls this function with the `keydown` * event as a parameter. * * @param {EventTarget~Event} event * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click * @abstract */ ClickableComponent.prototype.handleClick = function handleClick(event) {}; /** * This gets called when a `ClickableComponent` gains focus via a `focus` event. * Turns on listening for `keydown` events. When they happen it * calls `this.handleKeyPress`. * * @param {EventTarget~Event} event * The `focus` event that caused this function to be called. * * @listens focus */ ClickableComponent.prototype.handleFocus = function handleFocus(event) { Events.on(_document2['default'], 'keydown', Fn.bind(this, this.handleKeyPress)); }; /** * Called when this ClickableComponent has focus and a key gets pressed down. By * default it will call `this.handleClick` when the key is space or enter. * * @param {EventTarget~Event} event * The `keydown` event that caused this function to be called. * * @listens keydown */ ClickableComponent.prototype.handleKeyPress = function handleKeyPress(event) { // Support Space (32) or Enter (13) key operation to fire a click event if (event.which === 32 || event.which === 13) { event.preventDefault(); this.handleClick(event); } else if (_Component.prototype.handleKeyPress) { // Pass keypress handling up for unsupported keys _Component.prototype.handleKeyPress.call(this, event); } }; /** * Called when a `ClickableComponent` loses focus. Turns off the listener for * `keydown` events. Which Stops `this.handleKeyPress` from getting called. * * @param {EventTarget~Event} event * The `blur` event that caused this function to be called. * * @listens blur */ ClickableComponent.prototype.handleBlur = function handleBlur(event) { Events.off(_document2['default'], 'keydown', Fn.bind(this, this.handleKeyPress)); }; return ClickableComponent; }(_component2['default']); _component2['default'].registerComponent('ClickableComponent', ClickableComponent); exports['default'] = ClickableComponent; },{"./component":47,"./utils/dom.js":123,"./utils/events.js":124,"./utils/fn.js":125,"./utils/log.js":128,"./utils/obj":130,"global/document":136}],46:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _button = require('./button'); var _button2 = _interopRequireDefault(_button); var _component = require('./component'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file close-button.js */ /** * The `CloseButton` is a `{@link Button}` that fires a `close` event when * it gets clicked. * * @extends Button */ var CloseButton = function (_Button) { _inherits(CloseButton, _Button); /** * Creates an instance of the this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function CloseButton(player, options) { _classCallCheck(this, CloseButton); var _this = _possibleConstructorReturn(this, _Button.call(this, player, options)); _this.controlText(options && options.controlText || _this.localize('Close')); return _this; } /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ CloseButton.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-close-button ' + _Button.prototype.buildCSSClass.call(this); }; /** * This gets called when a `CloseButton` gets clicked. See * {@link ClickableComponent#handleClick} for more information on when this will be * triggered * * @param {EventTarget~Event} event * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click * @fires CloseButton#close */ CloseButton.prototype.handleClick = function handleClick(event) { /** * Triggered when the a `CloseButton` is clicked. * * @event CloseButton#close * @type {EventTarget~Event} * * @property {boolean} [bubbles=false] * set to false so that the close event does not * bubble up to parents if there is no listener */ this.trigger({ type: 'close', bubbles: false }); }; return CloseButton; }(_button2['default']); _component2['default'].registerComponent('CloseButton', CloseButton); exports['default'] = CloseButton; },{"./button":44,"./component":47}],47:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _window = require('global/window'); var _window2 = _interopRequireDefault(_window); var _dom = require('./utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _fn = require('./utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _guid = require('./utils/guid.js'); var Guid = _interopRequireWildcard(_guid); var _events = require('./utils/events.js'); var Events = _interopRequireWildcard(_events); var _log = require('./utils/log.js'); var _log2 = _interopRequireDefault(_log); var _toTitleCase = require('./utils/to-title-case.js'); var _toTitleCase2 = _interopRequireDefault(_toTitleCase); var _mergeOptions = require('./utils/merge-options.js'); var _mergeOptions2 = _interopRequireDefault(_mergeOptions); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } /** * Player Component - Base class for all UI objects * * @file component.js */ /** * Base class for all UI Components. * Components are UI objects which represent both a javascript object and an element * in the DOM. They can be children of other components, and can have * children themselves. * * Components can also use methods from {@link EventTarget} */ var Component = function () { /** * A callback that is called when a component is ready. Does not have any * paramters and any callback value will be ignored. * * @callback Component~ReadyCallback * @this Component */ /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. # * @param {Object[]} [options.children] * An array of children objects to intialize this component with. Children objects have * a name property that will be used if more than one component of the same type needs to be * added. * * @param {Component~ReadyCallback} [ready] * Function that gets called when the `Component` is ready. */ function Component(player, options, ready) { _classCallCheck(this, Component); // The component might be the player itself and we can't pass `this` to super if (!player && this.play) { this.player_ = player = this; // eslint-disable-line } else { this.player_ = player; } // Make a copy of prototype.options_ to protect against overriding defaults this.options_ = (0, _mergeOptions2['default'])({}, this.options_); // Updated options with supplied options options = this.options_ = (0, _mergeOptions2['default'])(this.options_, options); // Get ID from options or options element if one is supplied this.id_ = options.id || options.el && options.el.id; // If there was no ID from the options, generate one if (!this.id_) { // Don't require the player ID function in the case of mock players var id = player && player.id && player.id() || 'no_player'; this.id_ = id + '_component_' + Guid.newGUID(); } this.name_ = options.name || null; // Create element if one wasn't provided in options if (options.el) { this.el_ = options.el; } else if (options.createEl !== false) { this.el_ = this.createEl(); } this.children_ = []; this.childIndex_ = {}; this.childNameIndex_ = {}; // Add any child components in options if (options.initChildren !== false) { this.initChildren(); } this.ready(ready); // Don't want to trigger ready here or it will before init is actually // finished for all children that run this constructor if (options.reportTouchActivity !== false) { this.enableTouchActivity(); } } /** * Dispose of the `Component` and all child components. * * @fires Component#dispose */ Component.prototype.dispose = function dispose() { /** * Triggered when a `Component` is disposed. * * @event Component#dispose * @type {EventTarget~Event} * * @property {boolean} [bubbles=false] * set to false so that the close event does not * bubble up */ this.trigger({ type: 'dispose', bubbles: false }); // Dispose all children. if (this.children_) { for (var i = this.children_.length - 1; i >= 0; i--) { if (this.children_[i].dispose) { this.children_[i].dispose(); } } } // Delete child references this.children_ = null; this.childIndex_ = null; this.childNameIndex_ = null; // Remove all event listeners. this.off(); // Remove element from DOM if (this.el_.parentNode) { this.el_.parentNode.removeChild(this.el_); } Dom.removeElData(this.el_); this.el_ = null; }; /** * Return the {@link Player} that the `Component` has attached to. * * @return {Player} * The player that this `Component` has attached to. */ Component.prototype.player = function player() { return this.player_; }; /** * Deep merge of options objects with new options. * > Note: When both `obj` and `options` contain properties whose values are objects. * The two properties get merged using {@link module:mergeOptions} * * @param {Object} obj * The object that contains new options. * * @return {Object} * A new object of `this.options_` and `obj` merged together. * * @deprecated since version 5 */ Component.prototype.options = function options(obj) { _log2['default'].warn('this.options() has been deprecated and will be moved to the constructor in 6.0'); if (!obj) { return this.options_; } this.options_ = (0, _mergeOptions2['default'])(this.options_, obj); return this.options_; }; /** * Get the `Component`s DOM element * * @return {Element} * The DOM element for this `Component`. */ Component.prototype.el = function el() { return this.el_; }; /** * Create the `Component`s DOM element. * * @param {string} [tagName] * Element's DOM node type. e.g. 'div' * * @param {Object} [properties] * An object of properties that should be set. * * @param {Object} [attributes] * An object of attributes that should be set. * * @return {Element} * The element that gets created. */ Component.prototype.createEl = function createEl(tagName, properties, attributes) { return Dom.createEl(tagName, properties, attributes); }; /** * Localize a string given the string in english. * * @param {string} string * The string to localize. * * @return {string} * The localized string or if no localization exists the english string. */ Component.prototype.localize = function localize(string) { var code = this.player_.language && this.player_.language(); var languages = this.player_.languages && this.player_.languages(); if (!code || !languages) { return string; } var language = languages[code]; if (language && language[string]) { return language[string]; } var primaryCode = code.split('-')[0]; var primaryLang = languages[primaryCode]; if (primaryLang && primaryLang[string]) { return primaryLang[string]; } return string; }; /** * Return the `Component`s DOM element. This is where children get inserted. * This will usually be the the same as the element returned in {@link Component#el}. * * @return {Element} * The content element for this `Component`. */ Component.prototype.contentEl = function contentEl() { return this.contentEl_ || this.el_; }; /** * Get this `Component`s ID * * @return {string} * The id of this `Component` */ Component.prototype.id = function id() { return this.id_; }; /** * Get the `Component`s name. The name gets used to reference the `Component` * and is set during registration. * * @return {string} * The name of this `Component`. */ Component.prototype.name = function name() { return this.name_; }; /** * Get an array of all child components * * @return {Array} * The children */ Component.prototype.children = function children() { return this.children_; }; /** * Returns the child `Component` with the given `id`. * * @param {string} id * The id of the child `Component` to get. * * @return {Component|undefined} * The child `Component` with the given `id` or undefined. */ Component.prototype.getChildById = function getChildById(id) { return this.childIndex_[id]; }; /** * Returns the child `Component` with the given `name`. * * @param {string} name * The name of the child `Component` to get. * * @return {Component|undefined} * The child `Component` with the given `name` or undefined. */ Component.prototype.getChild = function getChild(name) { if (!name) { return; } name = (0, _toTitleCase2['default'])(name); return this.childNameIndex_[name]; }; /** * Add a child `Component` inside the current `Component`. * * * @param {string|Component} child * The name or instance of a child to add. * * @param {Object} [options={}] * The key/value store of options that will get passed to children of * the child. * * @param {number} [index=this.children_.length] * The index to attempt to add a child into. * * @return {Component} * The `Component` that gets added as a child. When using a string the * `Component` will get created by this process. */ Component.prototype.addChild = function addChild(child) { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.children_.length; var component = void 0; var componentName = void 0; // If child is a string, create component with options if (typeof child === 'string') { componentName = (0, _toTitleCase2['default'])(child); // Options can also be specified as a boolean, // so convert to an empty object if false. if (!options) { options = {}; } // Same as above, but true is deprecated so show a warning. if (options === true) { _log2['default'].warn('Initializing a child component with `true` is deprecated.' + 'Children should be defined in an array when possible, ' + 'but if necessary use an object instead of `true`.'); options = {}; } var componentClassName = options.componentClass || componentName; // Set name through options options.name = componentName; // Create a new object & element for this controls set // If there's no .player_, this is a player var ComponentClass = Component.getComponent(componentClassName); if (!ComponentClass) { throw new Error('Component ' + componentClassName + ' does not exist'); } // data stored directly on the videojs object may be // misidentified as a component to retain // backwards-compatibility with 4.x. check to make sure the // component class can be instantiated. if (typeof ComponentClass !== 'function') { return null; } component = new ComponentClass(this.player_ || this, options); // child is a component instance } else { component = child; } this.children_.splice(index, 0, component); if (typeof component.id === 'function') { this.childIndex_[component.id()] = component; } // If a name wasn't used to create the component, check if we can use the // name function of the component componentName = componentName || component.name && (0, _toTitleCase2['default'])(component.name()); if (componentName) { this.childNameIndex_[componentName] = component; } // Add the UI object's element to the container div (box) // Having an element is not required if (typeof component.el === 'function' && component.el()) { var childNodes = this.contentEl().children; var refNode = childNodes[index] || null; this.contentEl().insertBefore(component.el(), refNode); } // Return so it can stored on parent object if desired. return component; }; /** * Remove a child `Component` from this `Component`s list of children. Also removes * the child `Component`s element from this `Component`s element. * * @param {Component} component * The child `Component` to remove. */ Component.prototype.removeChild = function removeChild(component) { if (typeof component === 'string') { component = this.getChild(component); } if (!component || !this.children_) { return; } var childFound = false; for (var i = this.children_.length - 1; i >= 0; i--) { if (this.children_[i] === component) { childFound = true; this.children_.splice(i, 1); break; } } if (!childFound) { return; } this.childIndex_[component.id()] = null; this.childNameIndex_[component.name()] = null; var compEl = component.el(); if (compEl && compEl.parentNode === this.contentEl()) { this.contentEl().removeChild(component.el()); } }; /** * Add and initialize default child `Component`s based upon options. */ Component.prototype.initChildren = function initChildren() { var _this = this; var children = this.options_.children; if (children) { // `this` is `parent` var parentOptions = this.options_; var handleAdd = function handleAdd(child) { var name = child.name; var opts = child.opts; // Allow options for children to be set at the parent options // e.g. videojs(id, { controlBar: false }); // instead of videojs(id, { children: { controlBar: false }); if (parentOptions[name] !== undefined) { opts = parentOptions[name]; } // Allow for disabling default components // e.g. options['children']['posterImage'] = false if (opts === false) { return; } // Allow options to be passed as a simple boolean if no configuration // is necessary. if (opts === true) { opts = {}; } // We also want to pass the original player options // to each component as well so they don't need to // reach back into the player for options later. opts.playerOptions = _this.options_.playerOptions; // Create and add the child component. // Add a direct reference to the child by name on the parent instance. // If two of the same component are used, different names should be supplied // for each var newChild = _this.addChild(name, opts); if (newChild) { _this[name] = newChild; } }; // Allow for an array of children details to passed in the options var workingChildren = void 0; var Tech = Component.getComponent('Tech'); if (Array.isArray(children)) { workingChildren = children; } else { workingChildren = Object.keys(children); } workingChildren // children that are in this.options_ but also in workingChildren would // give us extra children we do not want. So, we want to filter them out. .concat(Object.keys(this.options_).filter(function (child) { return !workingChildren.some(function (wchild) { if (typeof wchild === 'string') { return child === wchild; } return child === wchild.name; }); })).map(function (child) { var name = void 0; var opts = void 0; if (typeof child === 'string') { name = child; opts = children[name] || _this.options_[name] || {}; } else { name = child.name; opts = child; } return { name: name, opts: opts }; }).filter(function (child) { // we have to make sure that child.name isn't in the techOrder since // techs are registerd as Components but can't aren't compatible // See https://github.com/videojs/video.js/issues/2772 var c = Component.getComponent(child.opts.componentClass || (0, _toTitleCase2['default'])(child.name)); return c && !Tech.isTech(c); }).forEach(handleAdd); } }; /** * Builds the default DOM class name. Should be overriden by sub-components. * * @return {string} * The DOM class name for this object. * * @abstract */ Component.prototype.buildCSSClass = function buildCSSClass() { // Child classes can include a function that does: // return 'CLASS NAME' + this._super(); return ''; }; /** * Add an `event listener` to this `Component`s element. * * The benefit of using this over the following: * - `VjsEvents.on(otherElement, 'eventName', myFunc)` * - `otherComponent.on('eventName', myFunc)` * * 1. Is that the listeners will get cleaned up when either component gets disposed. * 1. It will also bind `myComponent` as the context of `myFunc`. * > NOTE: If you remove the element from the DOM that has used `on` you need to * clean up references using: `myComponent.trigger(el, 'dispose')` * This will also allow the browser to garbage collect it. In special * cases such as with `window` and `document`, which are both permanent, * this is not necessary. * * @param {string|Component|string[]} [first] * The event name, and array of event names, or another `Component`. * * @param {EventTarget~EventListener|string|string[]} [second] * The listener function, an event name, or an Array of events names. * * @param {EventTarget~EventListener} [third] * The event handler if `first` is a `Component` and `second` is an event name * or an Array of event names. * * @return {Component} * Returns itself; method can be chained. * * @listens Component#dispose */ Component.prototype.on = function on(first, second, third) { var _this2 = this; if (typeof first === 'string' || Array.isArray(first)) { Events.on(this.el_, first, Fn.bind(this, second)); // Targeting another component or element } else { var target = first; var type = second; var fn = Fn.bind(this, third); // When this component is disposed, remove the listener from the other component var removeOnDispose = function removeOnDispose() { return _this2.off(target, type, fn); }; // Use the same function ID so we can remove it later it using the ID // of the original listener removeOnDispose.guid = fn.guid; this.on('dispose', removeOnDispose); // If the other component is disposed first we need to clean the reference // to the other component in this component's removeOnDispose listener // Otherwise we create a memory leak. var cleanRemover = function cleanRemover() { return _this2.off('dispose', removeOnDispose); }; // Add the same function ID so we can easily remove it later cleanRemover.guid = fn.guid; // Check if this is a DOM node if (first.nodeName) { // Add the listener to the other element Events.on(target, type, fn); Events.on(target, 'dispose', cleanRemover); // Should be a component // Not using `instanceof Component` because it makes mock players difficult } else if (typeof first.on === 'function') { // Add the listener to the other component target.on(type, fn); target.on('dispose', cleanRemover); } } return this; }; /** * Remove an event listener from this `Component`s element. If the second argument is * exluded all listeners for the type passed in as the first argument will be removed. * * @param {string|Component|string[]} [first] * The event name, and array of event names, or another `Component`. * * @param {EventTarget~EventListener|string|string[]} [second] * The listener function, an event name, or an Array of events names. * * @param {EventTarget~EventListener} [third] * The event handler if `first` is a `Component` and `second` is an event name * or an Array of event names. * * @return {Component} * Returns itself; method can be chained. */ Component.prototype.off = function off(first, second, third) { if (!first || typeof first === 'string' || Array.isArray(first)) { Events.off(this.el_, first, second); } else { var target = first; var type = second; // Ensure there's at least a guid, even if the function hasn't been used var fn = Fn.bind(this, third); // Remove the dispose listener on this component, // which was given the same guid as the event listener this.off('dispose', fn); if (first.nodeName) { // Remove the listener Events.off(target, type, fn); // Remove the listener for cleaning the dispose listener Events.off(target, 'dispose', fn); } else { target.off(type, fn); target.off('dispose', fn); } } return this; }; /** * Add an event listener that gets triggered only once and then gets removed. * * @param {string|Component|string[]} [first] * The event name, and array of event names, or another `Component`. * * @param {EventTarget~EventListener|string|string[]} [second] * The listener function, an event name, or an Array of events names. * * @param {EventTarget~EventListener} [third] * The event handler if `first` is a `Component` and `second` is an event name * or an Array of event names. * * @return {Component} * Returns itself; method can be chained. */ Component.prototype.one = function one(first, second, third) { var _this3 = this, _arguments = arguments; if (typeof first === 'string' || Array.isArray(first)) { Events.one(this.el_, first, Fn.bind(this, second)); } else { var target = first; var type = second; var fn = Fn.bind(this, third); var newFunc = function newFunc() { _this3.off(target, type, newFunc); fn.apply(null, _arguments); }; // Keep the same function ID so we can remove it later newFunc.guid = fn.guid; this.on(target, type, newFunc); } return this; }; /** * Trigger an event on an element. * * @param {EventTarget~Event|Object|string} event * The event name, and Event, or an event-like object with a type attribute * set to the event name. * * @param {Object} [hash] * Data hash to pass along with the event * * @return {Component} * Returns itself; method can be chained. */ Component.prototype.trigger = function trigger(event, hash) { Events.trigger(this.el_, event, hash); return this; }; /** * Bind a listener to the component's ready state. If the ready event has already * happened it will trigger the function immediately. * * @param {Component~ReadyCallback} fn * A function to call when ready is triggered. * * @param {boolean} [sync=false] * Execute the listener synchronously if `Component` is ready. * * @return {Component} * Returns itself; method can be chained. */ Component.prototype.ready = function ready(fn) { var sync = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; if (fn) { if (this.isReady_) { if (sync) { fn.call(this); } else { // Call the function asynchronously by default for consistency this.setTimeout(fn, 1); } } else { this.readyQueue_ = this.readyQueue_ || []; this.readyQueue_.push(fn); } } return this; }; /** * Trigger all the ready listeners for this `Component`. * * @fires Component#ready */ Component.prototype.triggerReady = function triggerReady() { this.isReady_ = true; // Ensure ready is triggerd asynchronously this.setTimeout(function () { var readyQueue = this.readyQueue_; // Reset Ready Queue this.readyQueue_ = []; if (readyQueue && readyQueue.length > 0) { readyQueue.forEach(function (fn) { fn.call(this); }, this); } // Allow for using event listeners also /** * Triggered when a `Component` is ready. * * @event Component#ready * @type {EventTarget~Event} */ this.trigger('ready'); }, 1); }; /** * Find a single DOM element matching a `selector`. This can be within the `Component`s * `contentEl()` or another custom context. * * @param {string} selector * A valid CSS selector, which will be passed to `querySelector`. * * @param {Element|string} [context=this.contentEl()] * A DOM element within which to query. Can also be a selector string in * which case the first matching element will get used as context. If * missing `this.contentEl()` gets used. If `this.contentEl()` returns * nothing it falls back to `document`. * * @return {Element|null} * the dom element that was found, or null * * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors) */ Component.prototype.$ = function $(selector, context) { return Dom.$(selector, context || this.contentEl()); }; /** * Finds all DOM element matching a `selector`. This can be within the `Component`s * `contentEl()` or another custom context. * * @param {string} selector * A valid CSS selector, which will be passed to `querySelectorAll`. * * @param {Element|string} [context=this.contentEl()] * A DOM element within which to query. Can also be a selector string in * which case the first matching element will get used as context. If * missing `this.contentEl()` gets used. If `this.contentEl()` returns * nothing it falls back to `document`. * * @return {NodeList} * a list of dom elements that were found * * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors) */ Component.prototype.$$ = function $$(selector, context) { return Dom.$$(selector, context || this.contentEl()); }; /** * Check if a component's element has a CSS class name. * * @param {string} classToCheck * CSS class name to check. * * @return {boolean} * - True if the `Component` has the class. * - False if the `Component` does not have the class` */ Component.prototype.hasClass = function hasClass(classToCheck) { return Dom.hasElClass(this.el_, classToCheck); }; /** * Add a CSS class name to the `Component`s element. * * @param {string} classToAdd * CSS class name to add * * @return {Component} * Returns itself; method can be chained. */ Component.prototype.addClass = function addClass(classToAdd) { Dom.addElClass(this.el_, classToAdd); return this; }; /** * Remove a CSS class name from the `Component`s element. * * @param {string} classToRemove * CSS class name to remove * * @return {Component} * Returns itself; method can be chained. */ Component.prototype.removeClass = function removeClass(classToRemove) { Dom.removeElClass(this.el_, classToRemove); return this; }; /** * Add or remove a CSS class name from the component's element. * - `classToToggle` gets added when {@link Component#hasClass} would return false. * - `classToToggle` gets removed when {@link Component#hasClass} would return true. * * @param {string} classToToggle * The class to add or remove based on (@link Component#hasClass} * * @param {boolean|Dom~predicate} [predicate] * An {@link Dom~predicate} function or a boolean * * @return {Component} * Returns itself; method can be chained. */ Component.prototype.toggleClass = function toggleClass(classToToggle, predicate) { Dom.toggleElClass(this.el_, classToToggle, predicate); return this; }; /** * Show the `Component`s element if it is hidden by removing the * 'vjs-hidden' class name from it. * * @return {Component} * Returns itself; method can be chained. */ Component.prototype.show = function show() { this.removeClass('vjs-hidden'); return this; }; /** * Hide the `Component`s element if it is currently showing by adding the * 'vjs-hidden` class name to it. * * @return {Component} * Returns itself; method can be chained. */ Component.prototype.hide = function hide() { this.addClass('vjs-hidden'); return this; }; /** * Lock a `Component`s element in its visible state by adding the 'vjs-lock-showing' * class name to it. Used during fadeIn/fadeOut. * * @return {Component} * Returns itself; method can be chained. * * @private */ Component.prototype.lockShowing = function lockShowing() { this.addClass('vjs-lock-showing'); return this; }; /** * Unlock a `Component`s element from its visible state by removing the 'vjs-lock-showing' * class name from it. Used during fadeIn/fadeOut. * * @return {Component} * Returns itself; method can be chained. * * @private */ Component.prototype.unlockShowing = function unlockShowing() { this.removeClass('vjs-lock-showing'); return this; }; /** * Get the value of an attribute on the `Component`s element. * * @param {string} attribute * Name of the attribute to get the value from. * * @return {string|null} * - The value of the attribute that was asked for. * - Can be an empty string on some browsers if the attribute does not exist * or has no value * - Most browsers will return null if the attibute does not exist or has * no value. * * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute} */ Component.prototype.getAttribute = function getAttribute(attribute) { return Dom.getAttribute(this.el_, attribute); }; /** * Set the value of an attribute on the `Component`'s element * * @param {string} attribute * Name of the attribute to set. * * @param {string} value * Value to set the attribute to. * * @return {Component} * Returns itself; method can be chained. * * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute} */ Component.prototype.setAttribute = function setAttribute(attribute, value) { Dom.setAttribute(this.el_, attribute, value); return this; }; /** * Remove an attribute from the `Component`s element. * * @param {string} attribute * Name of the attribute to remove. * * @return {Component} * Returns itself; method can be chained. * * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute} */ Component.prototype.removeAttribute = function removeAttribute(attribute) { Dom.removeAttribute(this.el_, attribute); return this; }; /** * Get or set the width of the component based upon the CSS styles. * See {@link Component#dimension} for more detailed information. * * @param {number|string} [num] * The width that you want to set postfixed with '%', 'px' or nothing. * * @param {boolean} [skipListeners] * Skip the resize event trigger * * @return {Component|number|string} * - The width when getting, zero if there is no width. Can be a string * postpixed with '%' or 'px'. * - Returns itself when setting; method can be chained. */ Component.prototype.width = function width(num, skipListeners) { return this.dimension('width', num, skipListeners); }; /** * Get or set the height of the component based upon the CSS styles. * See {@link Component#dimension} for more detailed information. * * @param {number|string} [num] * The height that you want to set postfixed with '%', 'px' or nothing. * * @param {boolean} [skipListeners] * Skip the resize event trigger * * @return {Component|number|string} * - The width when getting, zero if there is no width. Can be a string * postpixed with '%' or 'px'. * - Returns itself when setting; method can be chained. */ Component.prototype.height = function height(num, skipListeners) { return this.dimension('height', num, skipListeners); }; /** * Set both the width and height of the `Component` element at the same time. * * @param {number|string} width * Width to set the `Component`s element to. * * @param {number|string} height * Height to set the `Component`s element to. * * @return {Component} * Returns itself; method can be chained. */ Component.prototype.dimensions = function dimensions(width, height) { // Skip resize listeners on width for optimization return this.width(width, true).height(height); }; /** * Get or set width or height of the `Component` element. This is the shared code * for the {@link Component#width} and {@link Component#height}. * * Things to know: * - If the width or height in an number this will return the number postfixed with 'px'. * - If the width/height is a percent this will return the percent postfixed with '%' * - Hidden elements have a width of 0 with `window.getComputedStyle`. This function * defaults to the `Component`s `style.width` and falls back to `window.getComputedStyle`. * See [this]{@link http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/} * for more information * - If you want the computed style of the component, use {@link Component#currentWidth} * and {@link {Component#currentHeight} * * @fires Component#resize * * @param {string} widthOrHeight 8 'width' or 'height' * * @param {number|string} [num] 8 New dimension * * @param {boolean} [skipListeners] * Skip resize event trigger * * @return {Component} * - the dimension when getting or 0 if unset * - Returns itself when setting; method can be chained. */ Component.prototype.dimension = function dimension(widthOrHeight, num, skipListeners) { if (num !== undefined) { // Set to zero if null or literally NaN (NaN !== NaN) if (num === null || num !== num) { num = 0; } // Check if using css width/height (% or px) and adjust if (('' + num).indexOf('%') !== -1 || ('' + num).indexOf('px') !== -1) { this.el_.style[widthOrHeight] = num; } else if (num === 'auto') { this.el_.style[widthOrHeight] = ''; } else { this.el_.style[widthOrHeight] = num + 'px'; } // skipListeners allows us to avoid triggering the resize event when setting both width and height if (!skipListeners) { /** * Triggered when a component is resized. * * @event Component#resize * @type {EventTarget~Event} */ this.trigger('resize'); } // Return component return this; } // Not setting a value, so getting it // Make sure element exists if (!this.el_) { return 0; } // Get dimension value from style var val = this.el_.style[widthOrHeight]; var pxIndex = val.indexOf('px'); if (pxIndex !== -1) { // Return the pixel value with no 'px' return parseInt(val.slice(0, pxIndex), 10); } // No px so using % or no style was set, so falling back to offsetWidth/height // If component has display:none, offset will return 0 // TODO: handle display:none and no dimension style using px return parseInt(this.el_['offset' + (0, _toTitleCase2['default'])(widthOrHeight)], 10); }; /** * Get the width or the height of the `Component` elements computed style. Uses * `window.getComputedStyle`. * * @param {string} widthOrHeight * A string containing 'width' or 'height'. Whichever one you want to get. * * @return {number} * The dimension that gets asked for or 0 if nothing was set * for that dimension. */ Component.prototype.currentDimension = function currentDimension(widthOrHeight) { var computedWidthOrHeight = 0; if (widthOrHeight !== 'width' && widthOrHeight !== 'height') { throw new Error('currentDimension only accepts width or height value'); } if (typeof _window2['default'].getComputedStyle === 'function') { var computedStyle = _window2['default'].getComputedStyle(this.el_); computedWidthOrHeight = computedStyle.getPropertyValue(widthOrHeight) || computedStyle[widthOrHeight]; } // remove 'px' from variable and parse as integer computedWidthOrHeight = parseFloat(computedWidthOrHeight); // if the computed value is still 0, it's possible that the browser is lying // and we want to check the offset values. // This code also runs on IE8 and wherever getComputedStyle doesn't exist. if (computedWidthOrHeight === 0) { var rule = 'offset' + (0, _toTitleCase2['default'])(widthOrHeight); computedWidthOrHeight = this.el_[rule]; } return computedWidthOrHeight; }; /** * An object that contains width and height values of the `Component`s * computed style. Uses `window.getComputedStyle`. * * @typedef {Object} Component~DimensionObject * * @property {number} width * The width of the `Component`s computed style. * * @property {number} height * The height of the `Component`s computed style. */ /** * Get an object that contains width and height values of the `Component`s * computed style. * * @return {Component~DimensionObject} * The dimensions of the components element */ Component.prototype.currentDimensions = function currentDimensions() { return { width: this.currentDimension('width'), height: this.currentDimension('height') }; }; /** * Get the width of the `Component`s computed style. Uses `window.getComputedStyle`. * * @return {number} width * The width of the `Component`s computed style. */ Component.prototype.currentWidth = function currentWidth() { return this.currentDimension('width'); }; /** * Get the height of the `Component`s computed style. Uses `window.getComputedStyle`. * * @return {number} height * The height of the `Component`s computed style. */ Component.prototype.currentHeight = function currentHeight() { return this.currentDimension('height'); }; /** * Set the focus to this component */ Component.prototype.focus = function focus() { this.el_.focus(); }; /** * Remove the focus from this component */ Component.prototype.blur = function blur() { this.el_.blur(); }; /** * Emit a 'tap' events when touch event support gets detected. This gets used to * support toggling the controls through a tap on the video. They get enabled * because every sub-component would have extra overhead otherwise. * * @private * @fires Component#tap * @listens Component#touchstart * @listens Component#touchmove * @listens Component#touchleave * @listens Component#touchcancel * @listens Component#touchend */ Component.prototype.emitTapEvents = function emitTapEvents() { // Track the start time so we can determine how long the touch lasted var touchStart = 0; var firstTouch = null; // Maximum movement allowed during a touch event to still be considered a tap // Other popular libs use anywhere from 2 (hammer.js) to 15, // so 10 seems like a nice, round number. var tapMovementThreshold = 10; // The maximum length a touch can be while still being considered a tap var touchTimeThreshold = 200; var couldBeTap = void 0; this.on('touchstart', function (event) { // If more than one finger, don't consider treating this as a click if (event.touches.length === 1) { // Copy pageX/pageY from the object firstTouch = { pageX: event.touches[0].pageX, pageY: event.touches[0].pageY }; // Record start time so we can detect a tap vs. "touch and hold" touchStart = new Date().getTime(); // Reset couldBeTap tracking couldBeTap = true; } }); this.on('touchmove', function (event) { // If more than one finger, don't consider treating this as a click if (event.touches.length > 1) { couldBeTap = false; } else if (firstTouch) { // Some devices will throw touchmoves for all but the slightest of taps. // So, if we moved only a small distance, this could still be a tap var xdiff = event.touches[0].pageX - firstTouch.pageX; var ydiff = event.touches[0].pageY - firstTouch.pageY; var touchDistance = Math.sqrt(xdiff * xdiff + ydiff * ydiff); if (touchDistance > tapMovementThreshold) { couldBeTap = false; } } }); var noTap = function noTap() { couldBeTap = false; }; // TODO: Listen to the original target. http://youtu.be/DujfpXOKUp8?t=13m8s this.on('touchleave', noTap); this.on('touchcancel', noTap); // When the touch ends, measure how long it took and trigger the appropriate // event this.on('touchend', function (event) { firstTouch = null; // Proceed only if the touchmove/leave/cancel event didn't happen if (couldBeTap === true) { // Measure how long the touch lasted var touchTime = new Date().getTime() - touchStart; // Make sure the touch was less than the threshold to be considered a tap if (touchTime < touchTimeThreshold) { // Don't let browser turn this into a click event.preventDefault(); /** * Triggered when a `Component` is tapped. * * @event Component#tap * @type {EventTarget~Event} */ this.trigger('tap'); // It may be good to copy the touchend event object and change the // type to tap, if the other event properties aren't exact after // Events.fixEvent runs (e.g. event.target) } } }); }; /** * This function reports user activity whenever touch events happen. This can get * turned off by any sub-components that wants touch events to act another way. * * Report user touch activity when touch events occur. User activity gets used to * determine when controls should show/hide. It is simple when it comes to mouse * events, because any mouse event should show the controls. So we capture mouse * events that bubble up to the player and report activity when that happens. * With touch events it isn't as easy as `touchstart` and `touchend` toggle player * controls. So touch events can't help us at the player level either. * * User activity gets checked asynchronously. So what could happen is a tap event * on the video turns the controls off. Then the `touchend` event bubbles up to * the player. Which, if it reported user activity, would turn the controls right * back on. We also don't want to completely block touch events from bubbling up. * Furthermore a `touchmove` event and anything other than a tap, should not turn * controls back on. * * @listens Component#touchstart * @listens Component#touchmove * @listens Component#touchend * @listens Component#touchcancel */ Component.prototype.enableTouchActivity = function enableTouchActivity() { // Don't continue if the root player doesn't support reporting user activity if (!this.player() || !this.player().reportUserActivity) { return; } // listener for reporting that the user is active var report = Fn.bind(this.player(), this.player().reportUserActivity); var touchHolding = void 0; this.on('touchstart', function () { report(); // For as long as the they are touching the device or have their mouse down, // we consider them active even if they're not moving their finger or mouse. // So we want to continue to update that they are active this.clearInterval(touchHolding); // report at the same interval as activityCheck touchHolding = this.setInterval(report, 250); }); var touchEnd = function touchEnd(event) { report(); // stop the interval that maintains activity if the touch is holding this.clearInterval(touchHolding); }; this.on('touchmove', report); this.on('touchend', touchEnd); this.on('touchcancel', touchEnd); }; /** * A callback that has no parameters and is bound into `Component`s context. * * @callback Component~GenericCallback * @this Component */ /** * Creates a function that runs after an `x` millisecond timeout. This function is a * wrapper around `window.setTimeout`. There are a few reasons to use this one * instead though: * 1. It gets cleared via {@link Component#clearTimeout} when * {@link Component#dispose} gets called. * 2. The function callback will gets turned into a {@link Component~GenericCallback} * * > Note: You can use `window.clearTimeout` on the id returned by this function. This * will cause its dispose listener not to get cleaned up! Please use * {@link Component#clearTimeout} or {@link Component#dispose}. * * @param {Component~GenericCallback} fn * The function that will be run after `timeout`. * * @param {number} timeout * Timeout in milliseconds to delay before executing the specified function. * * @return {number} * Returns a timeout ID that gets used to identify the timeout. It can also * get used in {@link Component#clearTimeout} to clear the timeout that * was set. * * @listens Component#dispose * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout} */ Component.prototype.setTimeout = function setTimeout(fn, timeout) { fn = Fn.bind(this, fn); var timeoutId = _window2['default'].setTimeout(fn, timeout); var disposeFn = function disposeFn() { this.clearTimeout(timeoutId); }; disposeFn.guid = 'vjs-timeout-' + timeoutId; this.on('dispose', disposeFn); return timeoutId; }; /** * Clears a timeout that gets created via `window.setTimeout` or * {@link Component#setTimeout}. If you set a timeout via {@link Component#setTimeout} * use this function instead of `window.clearTimout`. If you don't your dispose * listener will not get cleaned up until {@link Component#dispose}! * * @param {number} timeoutId * The id of the timeout to clear. The return value of * {@link Component#setTimeout} or `window.setTimeout`. * * @return {number} * Returns the timeout id that was cleared. * * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout} */ Component.prototype.clearTimeout = function clearTimeout(timeoutId) { _window2['default'].clearTimeout(timeoutId); var disposeFn = function disposeFn() {}; disposeFn.guid = 'vjs-timeout-' + timeoutId; this.off('dispose', disposeFn); return timeoutId; }; /** * Creates a function that gets run every `x` milliseconds. This function is a wrapper * around `window.setInterval`. There are a few reasons to use this one instead though. * 1. It gets cleared via {@link Component#clearInterval} when * {@link Component#dispose} gets called. * 2. The function callback will be a {@link Component~GenericCallback} * * @param {Component~GenericCallback} fn * The function to run every `x` seconds. * * @param {number} interval * Execute the specified function every `x` milliseconds. * * @return {number} * Returns an id that can be used to identify the interval. It can also be be used in * {@link Component#clearInterval} to clear the interval. * * @listens Component#dispose * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval} */ Component.prototype.setInterval = function setInterval(fn, interval) { fn = Fn.bind(this, fn); var intervalId = _window2['default'].setInterval(fn, interval); var disposeFn = function disposeFn() { this.clearInterval(intervalId); }; disposeFn.guid = 'vjs-interval-' + intervalId; this.on('dispose', disposeFn); return intervalId; }; /** * Clears an interval that gets created via `window.setInterval` or * {@link Component#setInterval}. If you set an inteval via {@link Component#setInterval} * use this function instead of `window.clearInterval`. If you don't your dispose * listener will not get cleaned up until {@link Component#dispose}! * * @param {number} intervalId * The id of the interval to clear. The return value of * {@link Component#setInterval} or `window.setInterval`. * * @return {number} * Returns the interval id that was cleared. * * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval} */ Component.prototype.clearInterval = function clearInterval(intervalId) { _window2['default'].clearInterval(intervalId); var disposeFn = function disposeFn() {}; disposeFn.guid = 'vjs-interval-' + intervalId; this.off('dispose', disposeFn); return intervalId; }; /** * Register a `Component` with `videojs` given the name and the component. * * > NOTE: {@link Tech}s should not be registered as a `Component`. {@link Tech}s * should be registered using {@link Tech.registerTech} or * {@link videojs:videojs.registerTech}. * * > NOTE: This function can also be seen on videojs as * {@link videojs:videojs.registerComponent}. * * @param {string} name * The name of the `Component` to register. * * @param {Component} comp * The `Component` class to register. * * @return {Component} * The `Component` that was registered. */ Component.registerComponent = function registerComponent(name, comp) { if (!name) { return; } name = (0, _toTitleCase2['default'])(name); if (!Component.components_) { Component.components_ = {}; } if (name === 'Player' && Component.components_[name]) { var Player = Component.components_[name]; // If we have players that were disposed, then their name will still be // in Players.players. So, we must loop through and verify that the value // for each item is not null. This allows registration of the Player component // after all players have been disposed or before any were created. if (Player.players && Object.keys(Player.players).length > 0 && Object.keys(Player.players).map(function (playerName) { return Player.players[playerName]; }).every(Boolean)) { throw new Error('Can not register Player component after player has been created'); } } Component.components_[name] = comp; return comp; }; /** * Get a `Component` based on the name it was registered with. * * @param {string} name * The Name of the component to get. * * @return {Component} * The `Component` that got registered under the given name. * * @deprecated In `videojs` 6 this will not return `Component`s that were not * registered using {@link Component.registerComponent}. Currently we * check the global `videojs` object for a `Component` name and * return that if it exists. */ Component.getComponent = function getComponent(name) { if (!name) { return; } name = (0, _toTitleCase2['default'])(name); if (Component.components_ && Component.components_[name]) { return Component.components_[name]; } if (_window2['default'] && _window2['default'].videojs && _window2['default'].videojs[name]) { _log2['default'].warn('The ' + name + ' component was added to the videojs object when it should be registered using videojs.registerComponent(name, component)'); return _window2['default'].videojs[name]; } }; /** * Sets up the constructor using the supplied init method or uses the init of the * parent object. * * @param {Object} [props={}] * An object of properties. * * @return {Object} * the extended object. * * @deprecated since version 5 */ Component.extend = function extend(props) { props = props || {}; _log2['default'].warn('Component.extend({}) has been deprecated, ' + ' use videojs.extend(Component, {}) instead'); // Set up the constructor using the supplied init method // or using the init of the parent object // Make sure to check the unobfuscated version for external libs var init = props.init || props.init || this.prototype.init || this.prototype.init || function () {}; // In Resig's simple class inheritance (previously used) the constructor // is a function that calls `this.init.apply(arguments)` // However that would prevent us from using `ParentObject.call(this);` // in a Child constructor because the `this` in `this.init` // would still refer to the Child and cause an infinite loop. // We would instead have to do // `ParentObject.prototype.init.apply(this, arguments);` // Bleh. We're not creating a _super() function, so it's good to keep // the parent constructor reference simple. var subObj = function subObj() { init.apply(this, arguments); }; // Inherit from this object's prototype subObj.prototype = Object.create(this.prototype); // Reset the constructor property for subObj otherwise // instances of subObj would have the constructor of the parent Object subObj.prototype.constructor = subObj; // Make the class extendable subObj.extend = Component.extend; // Extend subObj's prototype with functions and other properties from props for (var name in props) { if (props.hasOwnProperty(name)) { subObj.prototype[name] = props[name]; } } return subObj; }; return Component; }(); Component.registerComponent('Component', Component); exports['default'] = Component; },{"./utils/dom.js":123,"./utils/events.js":124,"./utils/fn.js":125,"./utils/guid.js":127,"./utils/log.js":128,"./utils/merge-options.js":129,"./utils/to-title-case.js":133,"global/window":137}],48:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _trackButton = require('../track-button.js'); var _trackButton2 = _interopRequireDefault(_trackButton); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _audioTrackMenuItem = require('./audio-track-menu-item.js'); var _audioTrackMenuItem2 = _interopRequireDefault(_audioTrackMenuItem); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file audio-track-button.js */ /** * The base class for buttons that toggle specific {@link AudioTrack} types. * * @extends TrackButton */ var AudioTrackButton = function (_TrackButton) { _inherits(AudioTrackButton, _TrackButton); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options={}] * The key/value store of player options. */ function AudioTrackButton(player) { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; _classCallCheck(this, AudioTrackButton); options.tracks = player.audioTracks && player.audioTracks(); var _this = _possibleConstructorReturn(this, _TrackButton.call(this, player, options)); _this.el_.setAttribute('aria-label', 'Audio Menu'); return _this; } /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ AudioTrackButton.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-audio-button ' + _TrackButton.prototype.buildCSSClass.call(this); }; /** * Create a menu item for each audio track * * @param {AudioTrackMenuItem[]} [items=[]] * An array of existing menu items to use. * * @return {AudioTrackMenuItem[]} * An array of menu items */ AudioTrackButton.prototype.createItems = function createItems() { var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; // if there's only one audio track, there no point in showing it this.hideThreshold_ = 1; var tracks = this.player_.audioTracks && this.player_.audioTracks(); if (!tracks) { return items; } for (var i = 0; i < tracks.length; i++) { var track = tracks[i]; items.push(new _audioTrackMenuItem2['default'](this.player_, { track: track, // MenuItem is selectable selectable: true })); } return items; }; return AudioTrackButton; }(_trackButton2['default']); /** * The text that should display over the `AudioTrackButton`s controls. Added for localization. * * @type {string} * @private */ AudioTrackButton.prototype.controlText_ = 'Audio Track'; _component2['default'].registerComponent('AudioTrackButton', AudioTrackButton); exports['default'] = AudioTrackButton; },{"../../component.js":47,"../track-button.js":78,"./audio-track-menu-item.js":49}],49:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _menuItem = require('../../menu/menu-item.js'); var _menuItem2 = _interopRequireDefault(_menuItem); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _fn = require('../../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file audio-track-menu-item.js */ /** * An {@link AudioTrack} {@link MenuItem} * * @extends MenuItem */ var AudioTrackMenuItem = function (_MenuItem) { _inherits(AudioTrackMenuItem, _MenuItem); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function AudioTrackMenuItem(player, options) { _classCallCheck(this, AudioTrackMenuItem); var track = options.track; var tracks = player.audioTracks(); // Modify options for parent MenuItem class's init. options.label = track.label || track.language || 'Unknown'; options.selected = track.enabled; var _this = _possibleConstructorReturn(this, _MenuItem.call(this, player, options)); _this.track = track; if (tracks) { var changeHandler = Fn.bind(_this, _this.handleTracksChange); tracks.addEventListener('change', changeHandler); _this.on('dispose', function () { tracks.removeEventListener('change', changeHandler); }); } return _this; } /** * This gets called when an `AudioTrackMenuItem is "clicked". See {@link ClickableComponent} * for more detailed information on what a click can be. * * @param {EventTarget~Event} [event] * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click */ AudioTrackMenuItem.prototype.handleClick = function handleClick(event) { var tracks = this.player_.audioTracks(); _MenuItem.prototype.handleClick.call(this, event); if (!tracks) { return; } for (var i = 0; i < tracks.length; i++) { var track = tracks[i]; track.enabled = track === this.track; } }; /** * Handle any {@link AudioTrack} change. * * @param {EventTarget~Event} [event] * The {@link AudioTrackList#change} event that caused this to run. * * @listens AudioTrackList#change */ AudioTrackMenuItem.prototype.handleTracksChange = function handleTracksChange(event) { this.selected(this.track.enabled); }; return AudioTrackMenuItem; }(_menuItem2['default']); _component2['default'].registerComponent('AudioTrackMenuItem', AudioTrackMenuItem); exports['default'] = AudioTrackMenuItem; },{"../../component.js":47,"../../menu/menu-item.js":90,"../../utils/fn.js":125}],50:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../component.js'); var _component2 = _interopRequireDefault(_component); require('./play-toggle.js'); require('./time-controls/current-time-display.js'); require('./time-controls/duration-display.js'); require('./time-controls/time-divider.js'); require('./time-controls/remaining-time-display.js'); require('./live-display.js'); require('./progress-control/progress-control.js'); require('./fullscreen-toggle.js'); require('./volume-control/volume-control.js'); require('./volume-menu-button.js'); require('./mute-toggle.js'); require('./text-track-controls/chapters-button.js'); require('./text-track-controls/descriptions-button.js'); require('./text-track-controls/subtitles-button.js'); require('./text-track-controls/captions-button.js'); require('./audio-track-controls/audio-track-button.js'); require('./playback-rate-menu/playback-rate-menu-button.js'); require('./spacer-controls/custom-control-spacer.js'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file control-bar.js */ // Required children /** * Container of main controls. * * @extends Component */ var ControlBar = function (_Component) { _inherits(ControlBar, _Component); function ControlBar() { _classCallCheck(this, ControlBar); return _possibleConstructorReturn(this, _Component.apply(this, arguments)); } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ ControlBar.prototype.createEl = function createEl() { return _Component.prototype.createEl.call(this, 'div', { className: 'vjs-control-bar', dir: 'ltr' }, { // The control bar is a group, so it can contain menuitems role: 'group' }); }; return ControlBar; }(_component2['default']); /** * Default options for `ControlBar` * * @type {Object} * @private */ ControlBar.prototype.options_ = { children: ['playToggle', 'volumeMenuButton', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subtitlesButton', 'captionsButton', 'audioTrackButton', 'fullscreenToggle'] }; _component2['default'].registerComponent('ControlBar', ControlBar); exports['default'] = ControlBar; },{"../component.js":47,"./audio-track-controls/audio-track-button.js":48,"./fullscreen-toggle.js":51,"./live-display.js":52,"./mute-toggle.js":53,"./play-toggle.js":54,"./playback-rate-menu/playback-rate-menu-button.js":55,"./progress-control/progress-control.js":60,"./spacer-controls/custom-control-spacer.js":63,"./text-track-controls/captions-button.js":66,"./text-track-controls/chapters-button.js":67,"./text-track-controls/descriptions-button.js":69,"./text-track-controls/subtitles-button.js":71,"./time-controls/current-time-display.js":74,"./time-controls/duration-display.js":75,"./time-controls/remaining-time-display.js":76,"./time-controls/time-divider.js":77,"./volume-control/volume-control.js":80,"./volume-menu-button.js":82}],51:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _button = require('../button.js'); var _button2 = _interopRequireDefault(_button); var _component = require('../component.js'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file fullscreen-toggle.js */ /** * Toggle fullscreen video * * @extends Button */ var FullscreenToggle = function (_Button) { _inherits(FullscreenToggle, _Button); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function FullscreenToggle(player, options) { _classCallCheck(this, FullscreenToggle); var _this = _possibleConstructorReturn(this, _Button.call(this, player, options)); _this.on(player, 'fullscreenchange', _this.handleFullscreenChange); return _this; } /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ FullscreenToggle.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-fullscreen-control ' + _Button.prototype.buildCSSClass.call(this); }; /** * Handles fullscreenchange on the player and change control text accordingly. * * @param {EventTarget~Event} [event] * The {@link Player#fullscreenchange} event that caused this function to be * called. * * @listens Player#fullscreenchange */ FullscreenToggle.prototype.handleFullscreenChange = function handleFullscreenChange(event) { if (this.player_.isFullscreen()) { this.controlText('Non-Fullscreen'); } else { this.controlText('Fullscreen'); } }; /** * This gets called when an `FullscreenToggle` is "clicked". See * {@link ClickableComponent} for more detailed information on what a click can be. * * @param {EventTarget~Event} [event] * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click */ FullscreenToggle.prototype.handleClick = function handleClick(event) { if (!this.player_.isFullscreen()) { this.player_.requestFullscreen(); } else { this.player_.exitFullscreen(); } }; return FullscreenToggle; }(_button2['default']); /** * The text that should display over the `FullscreenToggle`s controls. Added for localization. * * @type {string} * @private */ FullscreenToggle.prototype.controlText_ = 'Fullscreen'; _component2['default'].registerComponent('FullscreenToggle', FullscreenToggle); exports['default'] = FullscreenToggle; },{"../button.js":44,"../component.js":47}],52:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../component'); var _component2 = _interopRequireDefault(_component); var _dom = require('../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file live-display.js */ // TODO - Future make it click to snap to live /** * Displays the live indicator when duration is Infinity. * * @extends Component */ var LiveDisplay = function (_Component) { _inherits(LiveDisplay, _Component); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function LiveDisplay(player, options) { _classCallCheck(this, LiveDisplay); var _this = _possibleConstructorReturn(this, _Component.call(this, player, options)); _this.updateShowing(); _this.on(_this.player(), 'durationchange', _this.updateShowing); return _this; } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ LiveDisplay.prototype.createEl = function createEl() { var el = _Component.prototype.createEl.call(this, 'div', { className: 'vjs-live-control vjs-control' }); this.contentEl_ = Dom.createEl('div', { className: 'vjs-live-display', innerHTML: '' + this.localize('Stream Type') + '' + this.localize('LIVE') }, { 'aria-live': 'off' }); el.appendChild(this.contentEl_); return el; }; /** * Check the duration to see if the LiveDisplay should be showing or not. Then show/hide * it accordingly * * @param {EventTarget~Event} [event] * The {@link Player#durationchange} event that caused this function to run. * * @listens Player#durationchange */ LiveDisplay.prototype.updateShowing = function updateShowing(event) { if (this.player().duration() === Infinity) { this.show(); } else { this.hide(); } }; return LiveDisplay; }(_component2['default']); _component2['default'].registerComponent('LiveDisplay', LiveDisplay); exports['default'] = LiveDisplay; },{"../component":47,"../utils/dom.js":123}],53:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _button = require('../button'); var _button2 = _interopRequireDefault(_button); var _component = require('../component'); var _component2 = _interopRequireDefault(_component); var _dom = require('../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file mute-toggle.js */ /** * A button component for muting the audio. * * @extends Button */ var MuteToggle = function (_Button) { _inherits(MuteToggle, _Button); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function MuteToggle(player, options) { _classCallCheck(this, MuteToggle); var _this = _possibleConstructorReturn(this, _Button.call(this, player, options)); _this.on(player, 'volumechange', _this.update); // hide mute toggle if the current tech doesn't support volume control if (player.tech_ && player.tech_.featuresVolumeControl === false) { _this.addClass('vjs-hidden'); } _this.on(player, 'loadstart', function () { // We need to update the button to account for a default muted state. this.update(); if (player.tech_.featuresVolumeControl === false) { this.addClass('vjs-hidden'); } else { this.removeClass('vjs-hidden'); } }); return _this; } /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ MuteToggle.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-mute-control ' + _Button.prototype.buildCSSClass.call(this); }; /** * This gets called when an `MuteToggle` is "clicked". See * {@link ClickableComponent} for more detailed information on what a click can be. * * @param {EventTarget~Event} [event] * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click */ MuteToggle.prototype.handleClick = function handleClick(event) { this.player_.muted(this.player_.muted() ? false : true); }; /** * Update the state of volume. * * @param {EventTarget~Event} [event] * The {@link Player#loadstart} event if this function was called through an * event. * * @listens Player#loadstart */ MuteToggle.prototype.update = function update(event) { var vol = this.player_.volume(); var level = 3; if (this.player_.muted()) { level = 0; } else if (vol < 0.33) { level = 1; } else if (vol < 0.67) { level = 2; } // Don't rewrite the button text if the actual text doesn't change. // This causes unnecessary and confusing information for screen reader users. // This check is needed because this function gets called every time the volume level is changed. var toMute = this.player_.muted() ? 'Unmute' : 'Mute'; if (this.controlText() !== toMute) { this.controlText(toMute); } // TODO improve muted icon classes for (var i = 0; i < 4; i++) { Dom.removeElClass(this.el_, 'vjs-vol-' + i); } Dom.addElClass(this.el_, 'vjs-vol-' + level); }; return MuteToggle; }(_button2['default']); /** * The text that should display over the `MuteToggle`s controls. Added for localization. * * @type {string} * @private */ MuteToggle.prototype.controlText_ = 'Mute'; _component2['default'].registerComponent('MuteToggle', MuteToggle); exports['default'] = MuteToggle; },{"../button":44,"../component":47,"../utils/dom.js":123}],54:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _button = require('../button.js'); var _button2 = _interopRequireDefault(_button); var _component = require('../component.js'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file play-toggle.js */ /** * Button to toggle between play and pause. * * @extends Button */ var PlayToggle = function (_Button) { _inherits(PlayToggle, _Button); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function PlayToggle(player, options) { _classCallCheck(this, PlayToggle); var _this = _possibleConstructorReturn(this, _Button.call(this, player, options)); _this.on(player, 'play', _this.handlePlay); _this.on(player, 'pause', _this.handlePause); return _this; } /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ PlayToggle.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-play-control ' + _Button.prototype.buildCSSClass.call(this); }; /** * This gets called when an `PlayToggle` is "clicked". See * {@link ClickableComponent} for more detailed information on what a click can be. * * @param {EventTarget~Event} [event] * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click */ PlayToggle.prototype.handleClick = function handleClick(event) { if (this.player_.paused()) { this.player_.play(); } else { this.player_.pause(); } }; /** * Add the vjs-playing class to the element so it can change appearance. * * @param {EventTarget~Event} [event] * The event that caused this function to run. * * @listens Player#play */ PlayToggle.prototype.handlePlay = function handlePlay(event) { this.removeClass('vjs-paused'); this.addClass('vjs-playing'); // change the button text to "Pause" this.controlText('Pause'); }; /** * Add the vjs-paused class to the element so it can change appearance. * * @param {EventTarget~Event} [event] * The event that caused this function to run. * * @listens Player#pause */ PlayToggle.prototype.handlePause = function handlePause(event) { this.removeClass('vjs-playing'); this.addClass('vjs-paused'); // change the button text to "Play" this.controlText('Play'); }; return PlayToggle; }(_button2['default']); /** * The text that should display over the `PlayToggle`s controls. Added for localization. * * @type {string} * @private */ PlayToggle.prototype.controlText_ = 'Play'; _component2['default'].registerComponent('PlayToggle', PlayToggle); exports['default'] = PlayToggle; },{"../button.js":44,"../component.js":47}],55:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _menuButton = require('../../menu/menu-button.js'); var _menuButton2 = _interopRequireDefault(_menuButton); var _menu = require('../../menu/menu.js'); var _menu2 = _interopRequireDefault(_menu); var _playbackRateMenuItem = require('./playback-rate-menu-item.js'); var _playbackRateMenuItem2 = _interopRequireDefault(_playbackRateMenuItem); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _dom = require('../../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file playback-rate-menu-button.js */ /** * The component for controlling the playback rate. * * @extends MenuButton */ var PlaybackRateMenuButton = function (_MenuButton) { _inherits(PlaybackRateMenuButton, _MenuButton); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function PlaybackRateMenuButton(player, options) { _classCallCheck(this, PlaybackRateMenuButton); var _this = _possibleConstructorReturn(this, _MenuButton.call(this, player, options)); _this.updateVisibility(); _this.updateLabel(); _this.on(player, 'loadstart', _this.updateVisibility); _this.on(player, 'ratechange', _this.updateLabel); return _this; } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ PlaybackRateMenuButton.prototype.createEl = function createEl() { var el = _MenuButton.prototype.createEl.call(this); this.labelEl_ = Dom.createEl('div', { className: 'vjs-playback-rate-value', innerHTML: 1.0 }); el.appendChild(this.labelEl_); return el; }; /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ PlaybackRateMenuButton.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-playback-rate ' + _MenuButton.prototype.buildCSSClass.call(this); }; /** * Create the playback rate menu * * @return {Menu} * Menu object populated with {@link PlaybackRateMenuItem}s */ PlaybackRateMenuButton.prototype.createMenu = function createMenu() { var menu = new _menu2['default'](this.player()); var rates = this.playbackRates(); if (rates) { for (var i = rates.length - 1; i >= 0; i--) { menu.addChild(new _playbackRateMenuItem2['default'](this.player(), { rate: rates[i] + 'x' })); } } return menu; }; /** * Updates ARIA accessibility attributes */ PlaybackRateMenuButton.prototype.updateARIAAttributes = function updateARIAAttributes() { // Current playback rate this.el().setAttribute('aria-valuenow', this.player().playbackRate()); }; /** * This gets called when an `PlaybackRateMenuButton` is "clicked". See * {@link ClickableComponent} for more detailed information on what a click can be. * * @param {EventTarget~Event} [event] * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click */ PlaybackRateMenuButton.prototype.handleClick = function handleClick(event) { // select next rate option var currentRate = this.player().playbackRate(); var rates = this.playbackRates(); // this will select first one if the last one currently selected var newRate = rates[0]; for (var i = 0; i < rates.length; i++) { if (rates[i] > currentRate) { newRate = rates[i]; break; } } this.player().playbackRate(newRate); }; /** * Get possible playback rates * * @return {Array} * All possible playback rates */ PlaybackRateMenuButton.prototype.playbackRates = function playbackRates() { return this.options_.playbackRates || this.options_.playerOptions && this.options_.playerOptions.playbackRates; }; /** * Get whether playback rates is supported by the tech * and an array of playback rates exists * * @return {boolean} * Whether changing playback rate is supported */ PlaybackRateMenuButton.prototype.playbackRateSupported = function playbackRateSupported() { return this.player().tech_ && this.player().tech_.featuresPlaybackRate && this.playbackRates() && this.playbackRates().length > 0; }; /** * Hide playback rate controls when they're no playback rate options to select * * @param {EventTarget~Event} [event] * The event that caused this function to run. * * @listens Player#loadstart */ PlaybackRateMenuButton.prototype.updateVisibility = function updateVisibility(event) { if (this.playbackRateSupported()) { this.removeClass('vjs-hidden'); } else { this.addClass('vjs-hidden'); } }; /** * Update button label when rate changed * * @param {EventTarget~Event} [event] * The event that caused this function to run. * * @listens Player#ratechange */ PlaybackRateMenuButton.prototype.updateLabel = function updateLabel(event) { if (this.playbackRateSupported()) { this.labelEl_.innerHTML = this.player().playbackRate() + 'x'; } }; return PlaybackRateMenuButton; }(_menuButton2['default']); /** * The text that should display over the `FullscreenToggle`s controls. Added for localization. * * @type {string} * @private */ PlaybackRateMenuButton.prototype.controlText_ = 'Playback Rate'; _component2['default'].registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton); exports['default'] = PlaybackRateMenuButton; },{"../../component.js":47,"../../menu/menu-button.js":89,"../../menu/menu.js":91,"../../utils/dom.js":123,"./playback-rate-menu-item.js":56}],56:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _menuItem = require('../../menu/menu-item.js'); var _menuItem2 = _interopRequireDefault(_menuItem); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file playback-rate-menu-item.js */ /** * The specific menu item type for selecting a playback rate. * * @extends MenuItem */ var PlaybackRateMenuItem = function (_MenuItem) { _inherits(PlaybackRateMenuItem, _MenuItem); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function PlaybackRateMenuItem(player, options) { _classCallCheck(this, PlaybackRateMenuItem); var label = options.rate; var rate = parseFloat(label, 10); // Modify options for parent MenuItem class's init. options.label = label; options.selected = rate === 1; options.selectable = true; var _this = _possibleConstructorReturn(this, _MenuItem.call(this, player, options)); _this.label = label; _this.rate = rate; _this.on(player, 'ratechange', _this.update); return _this; } /** * This gets called when an `PlaybackRateMenuItem` is "clicked". See * {@link ClickableComponent} for more detailed information on what a click can be. * * @param {EventTarget~Event} [event] * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click */ PlaybackRateMenuItem.prototype.handleClick = function handleClick(event) { _MenuItem.prototype.handleClick.call(this); this.player().playbackRate(this.rate); }; /** * Update the PlaybackRateMenuItem when the playbackrate changes. * * @param {EventTarget~Event} [event] * The `ratechange` event that caused this function to run. * * @listens Player#ratechange */ PlaybackRateMenuItem.prototype.update = function update(event) { this.selected(this.player().playbackRate() === this.rate); }; return PlaybackRateMenuItem; }(_menuItem2['default']); /** * The text that should display over the `PlaybackRateMenuItem`s controls. Added for localization. * * @type {string} * @private */ PlaybackRateMenuItem.prototype.contentElType = 'button'; _component2['default'].registerComponent('PlaybackRateMenuItem', PlaybackRateMenuItem); exports['default'] = PlaybackRateMenuItem; },{"../../component.js":47,"../../menu/menu-item.js":90}],57:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _dom = require('../../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file load-progress-bar.js */ /** * Shows loading progress * * @extends Component */ var LoadProgressBar = function (_Component) { _inherits(LoadProgressBar, _Component); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function LoadProgressBar(player, options) { _classCallCheck(this, LoadProgressBar); var _this = _possibleConstructorReturn(this, _Component.call(this, player, options)); _this.partEls_ = []; _this.on(player, 'progress', _this.update); return _this; } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ LoadProgressBar.prototype.createEl = function createEl() { return _Component.prototype.createEl.call(this, 'div', { className: 'vjs-load-progress', innerHTML: '' + this.localize('Loaded') + ': 0%' }); }; /** * Update progress bar * * @param {EventTarget~Event} [event] * The `progress` event that caused this function to run. * * @listens Player#progress */ LoadProgressBar.prototype.update = function update(event) { var buffered = this.player_.buffered(); var duration = this.player_.duration(); var bufferedEnd = this.player_.bufferedEnd(); var children = this.partEls_; // get the percent width of a time compared to the total end var percentify = function percentify(time, end) { // no NaN var percent = time / end || 0; return (percent >= 1 ? 1 : percent) * 100 + '%'; }; // update the width of the progress bar this.el_.style.width = percentify(bufferedEnd, duration); // add child elements to represent the individual buffered time ranges for (var i = 0; i < buffered.length; i++) { var start = buffered.start(i); var end = buffered.end(i); var part = children[i]; if (!part) { part = this.el_.appendChild(Dom.createEl()); children[i] = part; } // set the percent based on the width of the progress bar (bufferedEnd) part.style.left = percentify(start, bufferedEnd); part.style.width = percentify(end - start, bufferedEnd); } // remove unused buffered range elements for (var _i = children.length; _i > buffered.length; _i--) { this.el_.removeChild(children[_i - 1]); } children.length = buffered.length; }; return LoadProgressBar; }(_component2['default']); _component2['default'].registerComponent('LoadProgressBar', LoadProgressBar); exports['default'] = LoadProgressBar; },{"../../component.js":47,"../../utils/dom.js":123}],58:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _dom = require('../../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _fn = require('../../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _formatTime = require('../../utils/format-time.js'); var _formatTime2 = _interopRequireDefault(_formatTime); var _computedStyle = require('../../utils/computed-style.js'); var _computedStyle2 = _interopRequireDefault(_computedStyle); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file mouse-time-display.js */ /** * The Mouse Time Display component shows the time you will seek to * when hovering over the progress bar * * @extends Component */ var MouseTimeDisplay = function (_Component) { _inherits(MouseTimeDisplay, _Component); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function MouseTimeDisplay(player, options) { _classCallCheck(this, MouseTimeDisplay); var _this = _possibleConstructorReturn(this, _Component.call(this, player, options)); if (options.playerOptions && options.playerOptions.controlBar && options.playerOptions.controlBar.progressControl && options.playerOptions.controlBar.progressControl.keepTooltipsInside) { _this.keepTooltipsInside = options.playerOptions.controlBar.progressControl.keepTooltipsInside; } if (_this.keepTooltipsInside) { _this.tooltip = Dom.createEl('div', { className: 'vjs-time-tooltip' }); _this.el().appendChild(_this.tooltip); _this.addClass('vjs-keep-tooltips-inside'); } _this.update(0, 0); player.on('ready', function () { _this.on(player.controlBar.progressControl.el(), 'mousemove', Fn.throttle(Fn.bind(_this, _this.handleMouseMove), 25)); }); return _this; } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ MouseTimeDisplay.prototype.createEl = function createEl() { return _Component.prototype.createEl.call(this, 'div', { className: 'vjs-mouse-display' }); }; /** * Handle the mouse move event on the `MouseTimeDisplay`. * * @param {EventTarget~Event} event * The `mousemove` event that caused this to event to run. * * @listen mousemove */ MouseTimeDisplay.prototype.handleMouseMove = function handleMouseMove(event) { var duration = this.player_.duration(); var newTime = this.calculateDistance(event) * duration; var position = event.pageX - Dom.findElPosition(this.el().parentNode).left; this.update(newTime, position); }; /** * Update the time and posistion of the `MouseTimeDisplay`. * * @param {number} newTime * Time to change the `MouseTimeDisplay` to. * * @param {nubmer} position * Postion from the left of the in pixels. */ MouseTimeDisplay.prototype.update = function update(newTime, position) { var time = (0, _formatTime2['default'])(newTime, this.player_.duration()); this.el().style.left = position + 'px'; this.el().setAttribute('data-current-time', time); if (this.keepTooltipsInside) { var clampedPosition = this.clampPosition_(position); var difference = position - clampedPosition + 1; var tooltipWidth = parseFloat((0, _computedStyle2['default'])(this.tooltip, 'width')); var tooltipWidthHalf = tooltipWidth / 2; this.tooltip.innerHTML = time; this.tooltip.style.right = '-' + (tooltipWidthHalf - difference) + 'px'; } }; /** * Get the mouse pointers x coordinate in pixels. * * @param {EventTarget~Event} [event] * The `mousemove` event that was passed to this function by * {@link MouseTimeDisplay#handleMouseMove} * * @return {number} * THe x position in pixels of the mouse pointer. */ MouseTimeDisplay.prototype.calculateDistance = function calculateDistance(event) { return Dom.getPointerPosition(this.el().parentNode, event).x; }; /** * This takes in a horizontal position for the bar and returns a clamped position. * Clamped position means that it will keep the position greater than half the width * of the tooltip and smaller than the player width minus half the width o the tooltip. * It will only clamp the position if `keepTooltipsInside` option is set. * * @param {number} position * The position the bar wants to be * * @return {number} * The (potentially) new clamped position. * * @private */ MouseTimeDisplay.prototype.clampPosition_ = function clampPosition_(position) { if (!this.keepTooltipsInside) { return position; } var playerWidth = parseFloat((0, _computedStyle2['default'])(this.player().el(), 'width')); var tooltipWidth = parseFloat((0, _computedStyle2['default'])(this.tooltip, 'width')); var tooltipWidthHalf = tooltipWidth / 2; var actualPosition = position; if (position < tooltipWidthHalf) { actualPosition = Math.ceil(tooltipWidthHalf); } else if (position > playerWidth - tooltipWidthHalf) { actualPosition = Math.floor(playerWidth - tooltipWidthHalf); } return actualPosition; }; return MouseTimeDisplay; }(_component2['default']); _component2['default'].registerComponent('MouseTimeDisplay', MouseTimeDisplay); exports['default'] = MouseTimeDisplay; },{"../../component.js":47,"../../utils/computed-style.js":122,"../../utils/dom.js":123,"../../utils/fn.js":125,"../../utils/format-time.js":126}],59:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _fn = require('../../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _formatTime = require('../../utils/format-time.js'); var _formatTime2 = _interopRequireDefault(_formatTime); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file play-progress-bar.js */ /** * Shows play progress * * @extends Component */ var PlayProgressBar = function (_Component) { _inherits(PlayProgressBar, _Component); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function PlayProgressBar(player, options) { _classCallCheck(this, PlayProgressBar); var _this = _possibleConstructorReturn(this, _Component.call(this, player, options)); _this.updateDataAttr(); _this.on(player, 'timeupdate', _this.updateDataAttr); player.ready(Fn.bind(_this, _this.updateDataAttr)); if (options.playerOptions && options.playerOptions.controlBar && options.playerOptions.controlBar.progressControl && options.playerOptions.controlBar.progressControl.keepTooltipsInside) { _this.keepTooltipsInside = options.playerOptions.controlBar.progressControl.keepTooltipsInside; } if (_this.keepTooltipsInside) { _this.addClass('vjs-keep-tooltips-inside'); } return _this; } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ PlayProgressBar.prototype.createEl = function createEl() { return _Component.prototype.createEl.call(this, 'div', { className: 'vjs-play-progress vjs-slider-bar', innerHTML: '' + this.localize('Progress') + ': 0%' }); }; /** * Update the data-current-time attribute on the `PlayProgressBar`. * * @param {EventTarget~Event} [event] * The `timeupdate` event that caused this to run. * * @listens Player#timeupdate */ PlayProgressBar.prototype.updateDataAttr = function updateDataAttr(event) { var time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime(); this.el_.setAttribute('data-current-time', (0, _formatTime2['default'])(time, this.player_.duration())); }; return PlayProgressBar; }(_component2['default']); _component2['default'].registerComponent('PlayProgressBar', PlayProgressBar); exports['default'] = PlayProgressBar; },{"../../component.js":47,"../../utils/fn.js":125,"../../utils/format-time.js":126}],60:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); require('./seek-bar.js'); require('./mouse-time-display.js'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file progress-control.js */ /** * The Progress Control component contains the seek bar, load progress, * and play progress. * * @extends Component */ var ProgressControl = function (_Component) { _inherits(ProgressControl, _Component); function ProgressControl() { _classCallCheck(this, ProgressControl); return _possibleConstructorReturn(this, _Component.apply(this, arguments)); } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ ProgressControl.prototype.createEl = function createEl() { return _Component.prototype.createEl.call(this, 'div', { className: 'vjs-progress-control vjs-control' }); }; return ProgressControl; }(_component2['default']); /** * Default options for `ProgressControl` * * @type {Object} * @private */ ProgressControl.prototype.options_ = { children: ['seekBar'] }; _component2['default'].registerComponent('ProgressControl', ProgressControl); exports['default'] = ProgressControl; },{"../../component.js":47,"./mouse-time-display.js":58,"./seek-bar.js":61}],61:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _slider = require('../../slider/slider.js'); var _slider2 = _interopRequireDefault(_slider); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _fn = require('../../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _formatTime = require('../../utils/format-time.js'); var _formatTime2 = _interopRequireDefault(_formatTime); var _computedStyle = require('../../utils/computed-style.js'); var _computedStyle2 = _interopRequireDefault(_computedStyle); require('./load-progress-bar.js'); require('./play-progress-bar.js'); require('./tooltip-progress-bar.js'); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file seek-bar.js */ /** * Seek Bar and holder for the progress bars * * @extends Slider */ var SeekBar = function (_Slider) { _inherits(SeekBar, _Slider); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function SeekBar(player, options) { _classCallCheck(this, SeekBar); var _this = _possibleConstructorReturn(this, _Slider.call(this, player, options)); _this.on(player, 'timeupdate', _this.updateProgress); _this.on(player, 'ended', _this.updateProgress); player.ready(Fn.bind(_this, _this.updateProgress)); if (options.playerOptions && options.playerOptions.controlBar && options.playerOptions.controlBar.progressControl && options.playerOptions.controlBar.progressControl.keepTooltipsInside) { _this.keepTooltipsInside = options.playerOptions.controlBar.progressControl.keepTooltipsInside; } if (_this.keepTooltipsInside) { _this.tooltipProgressBar = _this.addChild('TooltipProgressBar'); } return _this; } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ SeekBar.prototype.createEl = function createEl() { return _Slider.prototype.createEl.call(this, 'div', { className: 'vjs-progress-holder' }, { 'aria-label': 'progress bar' }); }; /** * Update the seek bars tooltip and width. * * @param {EventTarget~Event} [event] * The `timeupdate` or `ended` event that caused this to run. * * @listens Player#timeupdate * @listens Player#ended */ SeekBar.prototype.updateProgress = function updateProgress(event) { this.updateAriaAttributes(this.el_); if (this.keepTooltipsInside) { this.updateAriaAttributes(this.tooltipProgressBar.el_); this.tooltipProgressBar.el_.style.width = this.bar.el_.style.width; var playerWidth = parseFloat((0, _computedStyle2['default'])(this.player().el(), 'width')); var tooltipWidth = parseFloat((0, _computedStyle2['default'])(this.tooltipProgressBar.tooltip, 'width')); var tooltipStyle = this.tooltipProgressBar.el().style; tooltipStyle.maxWidth = Math.floor(playerWidth - tooltipWidth / 2) + 'px'; tooltipStyle.minWidth = Math.ceil(tooltipWidth / 2) + 'px'; tooltipStyle.right = '-' + tooltipWidth / 2 + 'px'; } }; /** * Update ARIA accessibility attributes * * @param {Element} el * The element to update with aria accessibility attributes. */ SeekBar.prototype.updateAriaAttributes = function updateAriaAttributes(el) { // Allows for smooth scrubbing, when player can't keep up. var time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime(); // machine readable value of progress bar (percentage complete) el.setAttribute('aria-valuenow', (this.getPercent() * 100).toFixed(2)); // human readable value of progress bar (time complete) el.setAttribute('aria-valuetext', (0, _formatTime2['default'])(time, this.player_.duration())); }; /** * Get percentage of video played * * @return {number} * The percentage played */ SeekBar.prototype.getPercent = function getPercent() { var percent = this.player_.currentTime() / this.player_.duration(); return percent >= 1 ? 1 : percent; }; /** * Handle mouse down on seek bar * * @param {EventTarget~Event} event * The `mousedown` event that caused this to run. * * @listens mousedown */ SeekBar.prototype.handleMouseDown = function handleMouseDown(event) { this.player_.scrubbing(true); this.videoWasPlaying = !this.player_.paused(); this.player_.pause(); _Slider.prototype.handleMouseDown.call(this, event); }; /** * Handle mouse move on seek bar * * @param {EventTarget~Event} event * The `mousemove` event that caused this to run. * * @listens mousemove */ SeekBar.prototype.handleMouseMove = function handleMouseMove(event) { var newTime = this.calculateDistance(event) * this.player_.duration(); // Don't let video end while scrubbing. if (newTime === this.player_.duration()) { newTime = newTime - 0.1; } // Set new time (tell player to seek to new time) this.player_.currentTime(newTime); }; /** * Handle mouse up on seek bar * * @param {EventTarget~Event} event * The `mouseup` event that caused this to run. * * @listens mouseup */ SeekBar.prototype.handleMouseUp = function handleMouseUp(event) { _Slider.prototype.handleMouseUp.call(this, event); this.player_.scrubbing(false); if (this.videoWasPlaying) { this.player_.play(); } }; /** * Move more quickly fast forward for keyboard-only users */ SeekBar.prototype.stepForward = function stepForward() { // more quickly fast forward for keyboard-only users this.player_.currentTime(this.player_.currentTime() + 5); }; /** * Move more quickly rewind for keyboard-only users */ SeekBar.prototype.stepBack = function stepBack() { // more quickly rewind for keyboard-only users this.player_.currentTime(this.player_.currentTime() - 5); }; return SeekBar; }(_slider2['default']); /** * Default options for the `SeekBar` * * @type {Object} * @private */ SeekBar.prototype.options_ = { children: ['loadProgressBar', 'mouseTimeDisplay', 'playProgressBar'], barName: 'playProgressBar' }; /** * Call the update event for this Slider when this event happens on the player. * * @type {string} */ SeekBar.prototype.playerEvent = 'timeupdate'; _component2['default'].registerComponent('SeekBar', SeekBar); exports['default'] = SeekBar; },{"../../component.js":47,"../../slider/slider.js":99,"../../utils/computed-style.js":122,"../../utils/fn.js":125,"../../utils/format-time.js":126,"./load-progress-bar.js":57,"./play-progress-bar.js":59,"./tooltip-progress-bar.js":62}],62:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _fn = require('../../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _formatTime = require('../../utils/format-time.js'); var _formatTime2 = _interopRequireDefault(_formatTime); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file play-progress-bar.js */ /** * Shows play progress * * @extends Component */ var TooltipProgressBar = function (_Component) { _inherits(TooltipProgressBar, _Component); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function TooltipProgressBar(player, options) { _classCallCheck(this, TooltipProgressBar); var _this = _possibleConstructorReturn(this, _Component.call(this, player, options)); _this.updateDataAttr(); _this.on(player, 'timeupdate', _this.updateDataAttr); player.ready(Fn.bind(_this, _this.updateDataAttr)); return _this; } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ TooltipProgressBar.prototype.createEl = function createEl() { var el = _Component.prototype.createEl.call(this, 'div', { className: 'vjs-tooltip-progress-bar vjs-slider-bar', innerHTML: '
\n ' + this.localize('Progress') + ': 0%' }); this.tooltip = el.querySelector('.vjs-time-tooltip'); return el; }; /** * Updatet the data-current-time attribute for TooltipProgressBar * * @param {EventTarget~Event} [event] * The `timeupdate` event that caused this function to run. * * @listens Player#timeupdate */ TooltipProgressBar.prototype.updateDataAttr = function updateDataAttr(event) { var time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime(); var formattedTime = (0, _formatTime2['default'])(time, this.player_.duration()); this.el_.setAttribute('data-current-time', formattedTime); this.tooltip.innerHTML = formattedTime; }; return TooltipProgressBar; }(_component2['default']); _component2['default'].registerComponent('TooltipProgressBar', TooltipProgressBar); exports['default'] = TooltipProgressBar; },{"../../component.js":47,"../../utils/fn.js":125,"../../utils/format-time.js":126}],63:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _spacer = require('./spacer.js'); var _spacer2 = _interopRequireDefault(_spacer); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file custom-control-spacer.js */ /** * Spacer specifically meant to be used as an insertion point for new plugins, etc. * * @extends Spacer */ var CustomControlSpacer = function (_Spacer) { _inherits(CustomControlSpacer, _Spacer); function CustomControlSpacer() { _classCallCheck(this, CustomControlSpacer); return _possibleConstructorReturn(this, _Spacer.apply(this, arguments)); } /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ CustomControlSpacer.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-custom-control-spacer ' + _Spacer.prototype.buildCSSClass.call(this); }; /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ CustomControlSpacer.prototype.createEl = function createEl() { var el = _Spacer.prototype.createEl.call(this, { className: this.buildCSSClass() }); // No-flex/table-cell mode requires there be some content // in the cell to fill the remaining space of the table. el.innerHTML = ' '; return el; }; return CustomControlSpacer; }(_spacer2['default']); _component2['default'].registerComponent('CustomControlSpacer', CustomControlSpacer); exports['default'] = CustomControlSpacer; },{"../../component.js":47,"./spacer.js":64}],64:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file spacer.js */ /** * Just an empty spacer element that can be used as an append point for plugins, etc. * Also can be used to create space between elements when necessary. * * @extends Component */ var Spacer = function (_Component) { _inherits(Spacer, _Component); function Spacer() { _classCallCheck(this, Spacer); return _possibleConstructorReturn(this, _Component.apply(this, arguments)); } /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ Spacer.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-spacer ' + _Component.prototype.buildCSSClass.call(this); }; /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ Spacer.prototype.createEl = function createEl() { return _Component.prototype.createEl.call(this, 'div', { className: this.buildCSSClass() }); }; return Spacer; }(_component2['default']); _component2['default'].registerComponent('Spacer', Spacer); exports['default'] = Spacer; },{"../../component.js":47}],65:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _textTrackMenuItem = require('./text-track-menu-item.js'); var _textTrackMenuItem2 = _interopRequireDefault(_textTrackMenuItem); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file caption-settings-menu-item.js */ /** * The menu item for caption track settings menu * * @extends TextTrackMenuItem */ var CaptionSettingsMenuItem = function (_TextTrackMenuItem) { _inherits(CaptionSettingsMenuItem, _TextTrackMenuItem); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function CaptionSettingsMenuItem(player, options) { _classCallCheck(this, CaptionSettingsMenuItem); options.track = { player: player, kind: options.kind, label: options.kind + ' settings', selectable: false, 'default': false, mode: 'disabled' }; // CaptionSettingsMenuItem has no concept of 'selected' options.selectable = false; var _this = _possibleConstructorReturn(this, _TextTrackMenuItem.call(this, player, options)); _this.addClass('vjs-texttrack-settings'); _this.controlText(', opens ' + options.kind + ' settings dialog'); return _this; } /** * This gets called when an `CaptionSettingsMenuItem` is "clicked". See * {@link ClickableComponent} for more detailed information on what a click can be. * * @param {EventTarget~Event} [event] * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click */ CaptionSettingsMenuItem.prototype.handleClick = function handleClick(event) { this.player().getChild('textTrackSettings').show(); this.player().getChild('textTrackSettings').el_.focus(); }; return CaptionSettingsMenuItem; }(_textTrackMenuItem2['default']); _component2['default'].registerComponent('CaptionSettingsMenuItem', CaptionSettingsMenuItem); exports['default'] = CaptionSettingsMenuItem; },{"../../component.js":47,"./text-track-menu-item.js":73}],66:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _textTrackButton = require('./text-track-button.js'); var _textTrackButton2 = _interopRequireDefault(_textTrackButton); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _captionSettingsMenuItem = require('./caption-settings-menu-item.js'); var _captionSettingsMenuItem2 = _interopRequireDefault(_captionSettingsMenuItem); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file captions-button.js */ /** * The button component for toggling and selecting captions * * @extends TextTrackButton */ var CaptionsButton = function (_TextTrackButton) { _inherits(CaptionsButton, _TextTrackButton); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. * * @param {Component~ReadyCallback} [ready] * The function to call when this component is ready. */ function CaptionsButton(player, options, ready) { _classCallCheck(this, CaptionsButton); var _this = _possibleConstructorReturn(this, _TextTrackButton.call(this, player, options, ready)); _this.el_.setAttribute('aria-label', 'Captions Menu'); return _this; } /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ CaptionsButton.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-captions-button ' + _TextTrackButton.prototype.buildCSSClass.call(this); }; /** * Create caption menu items * * @return {CaptionSettingsMenuItem[]} * The array of current menu items. */ CaptionsButton.prototype.createItems = function createItems() { var items = []; if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks)) { items.push(new _captionSettingsMenuItem2['default'](this.player_, { kind: this.kind_ })); this.hideThreshold_ += 1; } return _TextTrackButton.prototype.createItems.call(this, items); }; return CaptionsButton; }(_textTrackButton2['default']); /** * `kind` of TextTrack to look for to associate it with this menu. * * @type {string} * @private */ CaptionsButton.prototype.kind_ = 'captions'; /** * The text that should display over the `CaptionsButton`s controls. Added for localization. * * @type {string} * @private */ CaptionsButton.prototype.controlText_ = 'Captions'; _component2['default'].registerComponent('CaptionsButton', CaptionsButton); exports['default'] = CaptionsButton; },{"../../component.js":47,"./caption-settings-menu-item.js":65,"./text-track-button.js":72}],67:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _textTrackButton = require('./text-track-button.js'); var _textTrackButton2 = _interopRequireDefault(_textTrackButton); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _chaptersTrackMenuItem = require('./chapters-track-menu-item.js'); var _chaptersTrackMenuItem2 = _interopRequireDefault(_chaptersTrackMenuItem); var _toTitleCase = require('../../utils/to-title-case.js'); var _toTitleCase2 = _interopRequireDefault(_toTitleCase); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file chapters-button.js */ /** * The button component for toggling and selecting chapters * Chapters act much differently than other text tracks * Cues are navigation vs. other tracks of alternative languages * * @extends TextTrackButton */ var ChaptersButton = function (_TextTrackButton) { _inherits(ChaptersButton, _TextTrackButton); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. * * @param {Component~ReadyCallback} [ready] * The function to call when this function is ready. */ function ChaptersButton(player, options, ready) { _classCallCheck(this, ChaptersButton); var _this = _possibleConstructorReturn(this, _TextTrackButton.call(this, player, options, ready)); _this.el_.setAttribute('aria-label', 'Chapters Menu'); return _this; } /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ ChaptersButton.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-chapters-button ' + _TextTrackButton.prototype.buildCSSClass.call(this); }; /** * Update the menu based on the current state of its items. * * @param {EventTarget~Event} [event] * An event that triggered this function to run. * * @listens TextTrackList#addtrack * @listens TextTrackList#removetrack * @listens TextTrackList#change */ ChaptersButton.prototype.update = function update(event) { if (!this.track_ || event && (event.type === 'addtrack' || event.type === 'removetrack')) { this.setTrack(this.findChaptersTrack()); } _TextTrackButton.prototype.update.call(this); }; /** * Set the currently selected track for the chapters button. * * @param {TextTrack} track * The new track to select. Nothing will change if this is the currently selected * track. */ ChaptersButton.prototype.setTrack = function setTrack(track) { if (this.track_ === track) { return; } if (!this.updateHandler_) { this.updateHandler_ = this.update.bind(this); } // here this.track_ refers to the old track instance if (this.track_) { var remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_); if (remoteTextTrackEl) { remoteTextTrackEl.removeEventListener('load', this.updateHandler_); } this.track_ = null; } this.track_ = track; // here this.track_ refers to the new track instance if (this.track_) { this.track_.mode = 'hidden'; var _remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_); if (_remoteTextTrackEl) { _remoteTextTrackEl.addEventListener('load', this.updateHandler_); } } }; /** * Find the track object that is currently in use by this ChaptersButton * * @return {TextTrack|undefined} * The current track or undefined if none was found. */ ChaptersButton.prototype.findChaptersTrack = function findChaptersTrack() { var tracks = this.player_.textTracks() || []; for (var i = tracks.length - 1; i >= 0; i--) { // We will always choose the last track as our chaptersTrack var track = tracks[i]; if (track.kind === this.kind_) { return track; } } }; /** * Get the caption for the ChaptersButton based on the track label. This will also * use the current tracks localized kind as a fallback if a label does not exist. * * @return {string} * The tracks current label or the localized track kind. */ ChaptersButton.prototype.getMenuCaption = function getMenuCaption() { if (this.track_ && this.track_.label) { return this.track_.label; } return this.localize((0, _toTitleCase2['default'])(this.kind_)); }; /** * Create menu from chapter track * * @return {Menu} * New menu for the chapter buttons */ ChaptersButton.prototype.createMenu = function createMenu() { this.options_.title = this.getMenuCaption(); return _TextTrackButton.prototype.createMenu.call(this); }; /** * Create a menu item for each text track * * @return {TextTrackMenuItem[]} * Array of menu items */ ChaptersButton.prototype.createItems = function createItems() { var items = []; if (!this.track_) { return items; } var cues = this.track_.cues; if (!cues) { return items; } for (var i = 0, l = cues.length; i < l; i++) { var cue = cues[i]; var mi = new _chaptersTrackMenuItem2['default'](this.player_, { track: this.track_, cue: cue }); items.push(mi); } return items; }; return ChaptersButton; }(_textTrackButton2['default']); /** * `kind` of TextTrack to look for to associate it with this menu. * * @type {string} * @private */ ChaptersButton.prototype.kind_ = 'chapters'; /** * The text that should display over the `ChaptersButton`s controls. Added for localization. * * @type {string} * @private */ ChaptersButton.prototype.controlText_ = 'Chapters'; _component2['default'].registerComponent('ChaptersButton', ChaptersButton); exports['default'] = ChaptersButton; },{"../../component.js":47,"../../utils/to-title-case.js":133,"./chapters-track-menu-item.js":68,"./text-track-button.js":72}],68:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _menuItem = require('../../menu/menu-item.js'); var _menuItem2 = _interopRequireDefault(_menuItem); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _fn = require('../../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file chapters-track-menu-item.js */ /** * The chapter track menu item * * @extends MenuItem */ var ChaptersTrackMenuItem = function (_MenuItem) { _inherits(ChaptersTrackMenuItem, _MenuItem); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function ChaptersTrackMenuItem(player, options) { _classCallCheck(this, ChaptersTrackMenuItem); var track = options.track; var cue = options.cue; var currentTime = player.currentTime(); // Modify options for parent MenuItem class's init. options.selectable = true; options.label = cue.text; options.selected = cue.startTime <= currentTime && currentTime < cue.endTime; var _this = _possibleConstructorReturn(this, _MenuItem.call(this, player, options)); _this.track = track; _this.cue = cue; track.addEventListener('cuechange', Fn.bind(_this, _this.update)); return _this; } /** * This gets called when an `ChaptersTrackMenuItem` is "clicked". See * {@link ClickableComponent} for more detailed information on what a click can be. * * @param {EventTarget~Event} [event] * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click */ ChaptersTrackMenuItem.prototype.handleClick = function handleClick(event) { _MenuItem.prototype.handleClick.call(this); this.player_.currentTime(this.cue.startTime); this.update(this.cue.startTime); }; /** * Update chapter menu item * * @param {EventTarget~Event} [event] * The `cuechange` event that caused this function to run. * * @listens TextTrack#cuechange */ ChaptersTrackMenuItem.prototype.update = function update(event) { var cue = this.cue; var currentTime = this.player_.currentTime(); // vjs.log(currentTime, cue.startTime); this.selected(cue.startTime <= currentTime && currentTime < cue.endTime); }; return ChaptersTrackMenuItem; }(_menuItem2['default']); _component2['default'].registerComponent('ChaptersTrackMenuItem', ChaptersTrackMenuItem); exports['default'] = ChaptersTrackMenuItem; },{"../../component.js":47,"../../menu/menu-item.js":90,"../../utils/fn.js":125}],69:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _textTrackButton = require('./text-track-button.js'); var _textTrackButton2 = _interopRequireDefault(_textTrackButton); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _fn = require('../../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file descriptions-button.js */ /** * The button component for toggling and selecting descriptions * * @extends TextTrackButton */ var DescriptionsButton = function (_TextTrackButton) { _inherits(DescriptionsButton, _TextTrackButton); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. * * @param {Component~ReadyCallback} [ready] * The function to call when this component is ready. */ function DescriptionsButton(player, options, ready) { _classCallCheck(this, DescriptionsButton); var _this = _possibleConstructorReturn(this, _TextTrackButton.call(this, player, options, ready)); _this.el_.setAttribute('aria-label', 'Descriptions Menu'); var tracks = player.textTracks(); if (tracks) { var changeHandler = Fn.bind(_this, _this.handleTracksChange); tracks.addEventListener('change', changeHandler); _this.on('dispose', function () { tracks.removeEventListener('change', changeHandler); }); } return _this; } /** * Handle text track change * * @param {EventTarget~Event} event * The event that caused this function to run * * @listens TextTrackList#change */ DescriptionsButton.prototype.handleTracksChange = function handleTracksChange(event) { var tracks = this.player().textTracks(); var disabled = false; // Check whether a track of a different kind is showing for (var i = 0, l = tracks.length; i < l; i++) { var track = tracks[i]; if (track.kind !== this.kind_ && track.mode === 'showing') { disabled = true; break; } } // If another track is showing, disable this menu button if (disabled) { this.disable(); } else { this.enable(); } }; /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ DescriptionsButton.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-descriptions-button ' + _TextTrackButton.prototype.buildCSSClass.call(this); }; return DescriptionsButton; }(_textTrackButton2['default']); /** * `kind` of TextTrack to look for to associate it with this menu. * * @type {string} * @private */ DescriptionsButton.prototype.kind_ = 'descriptions'; /** * The text that should display over the `DescriptionsButton`s controls. Added for localization. * * @type {string} * @private */ DescriptionsButton.prototype.controlText_ = 'Descriptions'; _component2['default'].registerComponent('DescriptionsButton', DescriptionsButton); exports['default'] = DescriptionsButton; },{"../../component.js":47,"../../utils/fn.js":125,"./text-track-button.js":72}],70:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _textTrackMenuItem = require('./text-track-menu-item.js'); var _textTrackMenuItem2 = _interopRequireDefault(_textTrackMenuItem); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file off-text-track-menu-item.js */ /** * A special menu item for turning of a specific type of text track * * @extends TextTrackMenuItem */ var OffTextTrackMenuItem = function (_TextTrackMenuItem) { _inherits(OffTextTrackMenuItem, _TextTrackMenuItem); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function OffTextTrackMenuItem(player, options) { _classCallCheck(this, OffTextTrackMenuItem); // Create pseudo track info // Requires options['kind'] options.track = { player: player, kind: options.kind, label: options.kind + ' off', 'default': false, mode: 'disabled' }; // MenuItem is selectable options.selectable = true; var _this = _possibleConstructorReturn(this, _TextTrackMenuItem.call(this, player, options)); _this.selected(true); return _this; } /** * Handle text track change * * @param {EventTarget~Event} event * The event that caused this function to run */ OffTextTrackMenuItem.prototype.handleTracksChange = function handleTracksChange(event) { var tracks = this.player().textTracks(); var selected = true; for (var i = 0, l = tracks.length; i < l; i++) { var track = tracks[i]; if (track.kind === this.track.kind && track.mode === 'showing') { selected = false; break; } } this.selected(selected); }; return OffTextTrackMenuItem; }(_textTrackMenuItem2['default']); _component2['default'].registerComponent('OffTextTrackMenuItem', OffTextTrackMenuItem); exports['default'] = OffTextTrackMenuItem; },{"../../component.js":47,"./text-track-menu-item.js":73}],71:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _textTrackButton = require('./text-track-button.js'); var _textTrackButton2 = _interopRequireDefault(_textTrackButton); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file subtitles-button.js */ /** * The button component for toggling and selecting subtitles * * @extends TextTrackButton */ var SubtitlesButton = function (_TextTrackButton) { _inherits(SubtitlesButton, _TextTrackButton); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. * * @param {Component~ReadyCallback} [ready] * The function to call when this component is ready. */ function SubtitlesButton(player, options, ready) { _classCallCheck(this, SubtitlesButton); var _this = _possibleConstructorReturn(this, _TextTrackButton.call(this, player, options, ready)); _this.el_.setAttribute('aria-label', 'Subtitles Menu'); return _this; } /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ SubtitlesButton.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-subtitles-button ' + _TextTrackButton.prototype.buildCSSClass.call(this); }; return SubtitlesButton; }(_textTrackButton2['default']); /** * `kind` of TextTrack to look for to associate it with this menu. * * @type {string} * @private */ SubtitlesButton.prototype.kind_ = 'subtitles'; /** * The text that should display over the `SubtitlesButton`s controls. Added for localization. * * @type {string} * @private */ SubtitlesButton.prototype.controlText_ = 'Subtitles'; _component2['default'].registerComponent('SubtitlesButton', SubtitlesButton); exports['default'] = SubtitlesButton; },{"../../component.js":47,"./text-track-button.js":72}],72:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _trackButton = require('../track-button.js'); var _trackButton2 = _interopRequireDefault(_trackButton); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _textTrackMenuItem = require('./text-track-menu-item.js'); var _textTrackMenuItem2 = _interopRequireDefault(_textTrackMenuItem); var _offTextTrackMenuItem = require('./off-text-track-menu-item.js'); var _offTextTrackMenuItem2 = _interopRequireDefault(_offTextTrackMenuItem); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file text-track-button.js */ /** * The base class for buttons that toggle specific text track types (e.g. subtitles) * * @extends MenuButton */ var TextTrackButton = function (_TrackButton) { _inherits(TextTrackButton, _TrackButton); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options={}] * The key/value store of player options. */ function TextTrackButton(player) { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; _classCallCheck(this, TextTrackButton); options.tracks = player.textTracks(); return _possibleConstructorReturn(this, _TrackButton.call(this, player, options)); } /** * Create a menu item for each text track * * @param {TextTrackMenuItem[]} [items=[]] * Existing array of items to use during creation * * @return {TextTrackMenuItem[]} * Array of menu items that were created */ TextTrackButton.prototype.createItems = function createItems() { var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; // Add an OFF menu item to turn all tracks off items.push(new _offTextTrackMenuItem2['default'](this.player_, { kind: this.kind_ })); this.hideThreshold_ += 1; var tracks = this.player_.textTracks(); if (!tracks) { return items; } for (var i = 0; i < tracks.length; i++) { var track = tracks[i]; // only add tracks that are of the appropriate kind and have a label if (track.kind === this.kind_) { items.push(new _textTrackMenuItem2['default'](this.player_, { track: track, // MenuItem is selectable selectable: true })); } } return items; }; return TextTrackButton; }(_trackButton2['default']); _component2['default'].registerComponent('TextTrackButton', TextTrackButton); exports['default'] = TextTrackButton; },{"../../component.js":47,"../track-button.js":78,"./off-text-track-menu-item.js":70,"./text-track-menu-item.js":73}],73:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; var _menuItem = require('../../menu/menu-item.js'); var _menuItem2 = _interopRequireDefault(_menuItem); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _fn = require('../../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _window = require('global/window'); var _window2 = _interopRequireDefault(_window); var _document = require('global/document'); var _document2 = _interopRequireDefault(_document); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file text-track-menu-item.js */ /** * The specific menu item type for selecting a language within a text track kind * * @extends MenuItem */ var TextTrackMenuItem = function (_MenuItem) { _inherits(TextTrackMenuItem, _MenuItem); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function TextTrackMenuItem(player, options) { _classCallCheck(this, TextTrackMenuItem); var track = options.track; var tracks = player.textTracks(); // Modify options for parent MenuItem class's init. options.label = track.label || track.language || 'Unknown'; options.selected = track['default'] || track.mode === 'showing'; var _this = _possibleConstructorReturn(this, _MenuItem.call(this, player, options)); _this.track = track; if (tracks) { var changeHandler = Fn.bind(_this, _this.handleTracksChange); player.on(['loadstart', 'texttrackchange'], changeHandler); tracks.addEventListener('change', changeHandler); _this.on('dispose', function () { tracks.removeEventListener('change', changeHandler); }); } // iOS7 doesn't dispatch change events to TextTrackLists when an // associated track's mode changes. Without something like // Object.observe() (also not present on iOS7), it's not // possible to detect changes to the mode attribute and polyfill // the change event. As a poor substitute, we manually dispatch // change events whenever the controls modify the mode. if (tracks && tracks.onchange === undefined) { var event = void 0; _this.on(['tap', 'click'], function () { if (_typeof(_window2['default'].Event) !== 'object') { // Android 2.3 throws an Illegal Constructor error for window.Event try { event = new _window2['default'].Event('change'); } catch (err) { // continue regardless of error } } if (!event) { event = _document2['default'].createEvent('Event'); event.initEvent('change', true, true); } tracks.dispatchEvent(event); }); } return _this; } /** * This gets called when an `TextTrackMenuItem` is "clicked". See * {@link ClickableComponent} for more detailed information on what a click can be. * * @param {EventTarget~Event} event * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click */ TextTrackMenuItem.prototype.handleClick = function handleClick(event) { var kind = this.track.kind; var tracks = this.player_.textTracks(); _MenuItem.prototype.handleClick.call(this, event); if (!tracks) { return; } for (var i = 0; i < tracks.length; i++) { var track = tracks[i]; if (track.kind !== kind) { continue; } if (track === this.track) { if (track.mode !== 'showing') { track.mode = 'showing'; } } else if (track.mode !== 'disabled') { track.mode = 'disabled'; } } }; /** * Handle text track list change * * @param {EventTarget~Event} event * The `change` event that caused this function to be called. * * @listens TextTrackList#change */ TextTrackMenuItem.prototype.handleTracksChange = function handleTracksChange(event) { this.selected(this.track.mode === 'showing'); }; return TextTrackMenuItem; }(_menuItem2['default']); _component2['default'].registerComponent('TextTrackMenuItem', TextTrackMenuItem); exports['default'] = TextTrackMenuItem; },{"../../component.js":47,"../../menu/menu-item.js":90,"../../utils/fn.js":125,"global/document":136,"global/window":137}],74:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _dom = require('../../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _formatTime = require('../../utils/format-time.js'); var _formatTime2 = _interopRequireDefault(_formatTime); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file current-time-display.js */ /** * Displays the current time * * @extends Component */ var CurrentTimeDisplay = function (_Component) { _inherits(CurrentTimeDisplay, _Component); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function CurrentTimeDisplay(player, options) { _classCallCheck(this, CurrentTimeDisplay); var _this = _possibleConstructorReturn(this, _Component.call(this, player, options)); _this.on(player, 'timeupdate', _this.updateContent); return _this; } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ CurrentTimeDisplay.prototype.createEl = function createEl() { var el = _Component.prototype.createEl.call(this, 'div', { className: 'vjs-current-time vjs-time-control vjs-control' }); this.contentEl_ = Dom.createEl('div', { className: 'vjs-current-time-display', // label the current time for screen reader users innerHTML: 'Current Time ' + '0:00' }, { // tell screen readers not to automatically read the time as it changes 'aria-live': 'off' }); el.appendChild(this.contentEl_); return el; }; /** * Update current time display * * @param {EventTarget~Event} [event] * The `timeupdate` event that caused this function to run. * * @listens Player#timeupdate */ CurrentTimeDisplay.prototype.updateContent = function updateContent(event) { // Allows for smooth scrubbing, when player can't keep up. var time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime(); var localizedText = this.localize('Current Time'); var formattedTime = (0, _formatTime2['default'])(time, this.player_.duration()); if (formattedTime !== this.formattedTime_) { this.formattedTime_ = formattedTime; this.contentEl_.innerHTML = '' + localizedText + ' ' + formattedTime; } }; return CurrentTimeDisplay; }(_component2['default']); _component2['default'].registerComponent('CurrentTimeDisplay', CurrentTimeDisplay); exports['default'] = CurrentTimeDisplay; },{"../../component.js":47,"../../utils/dom.js":123,"../../utils/format-time.js":126}],75:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _dom = require('../../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _formatTime = require('../../utils/format-time.js'); var _formatTime2 = _interopRequireDefault(_formatTime); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file duration-display.js */ /** * Displays the duration * * @extends Component */ var DurationDisplay = function (_Component) { _inherits(DurationDisplay, _Component); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function DurationDisplay(player, options) { _classCallCheck(this, DurationDisplay); var _this = _possibleConstructorReturn(this, _Component.call(this, player, options)); _this.on(player, 'durationchange', _this.updateContent); // Also listen for timeupdate and loadedmetadata because removing those // listeners could have broken dependent applications/libraries. These // can likely be removed for 6.0. _this.on(player, 'timeupdate', _this.updateContent); _this.on(player, 'loadedmetadata', _this.updateContent); return _this; } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ DurationDisplay.prototype.createEl = function createEl() { var el = _Component.prototype.createEl.call(this, 'div', { className: 'vjs-duration vjs-time-control vjs-control' }); this.contentEl_ = Dom.createEl('div', { className: 'vjs-duration-display', // label the duration time for screen reader users innerHTML: '' + this.localize('Duration Time') + ' 0:00' }, { // tell screen readers not to automatically read the time as it changes 'aria-live': 'off' }); el.appendChild(this.contentEl_); return el; }; /** * Update duration time display. * * @param {EventTarget~Event} [event] * The `durationchange`, `timeupdate`, or `loadedmetadata` event that caused * this function to be called. * * @listens Player#durationchange * @listens Player#timeupdate * @listens Player#loadedmetadata */ DurationDisplay.prototype.updateContent = function updateContent(event) { var duration = this.player_.duration(); if (duration && this.duration_ !== duration) { this.duration_ = duration; var localizedText = this.localize('Duration Time'); var formattedTime = (0, _formatTime2['default'])(duration); // label the duration time for screen reader users this.contentEl_.innerHTML = '' + localizedText + ' ' + formattedTime; } }; return DurationDisplay; }(_component2['default']); _component2['default'].registerComponent('DurationDisplay', DurationDisplay); exports['default'] = DurationDisplay; },{"../../component.js":47,"../../utils/dom.js":123,"../../utils/format-time.js":126}],76:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _dom = require('../../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _formatTime = require('../../utils/format-time.js'); var _formatTime2 = _interopRequireDefault(_formatTime); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file remaining-time-display.js */ /** * Displays the time left in the video * * @extends Component */ var RemainingTimeDisplay = function (_Component) { _inherits(RemainingTimeDisplay, _Component); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function RemainingTimeDisplay(player, options) { _classCallCheck(this, RemainingTimeDisplay); var _this = _possibleConstructorReturn(this, _Component.call(this, player, options)); _this.on(player, 'timeupdate', _this.updateContent); _this.on(player, 'durationchange', _this.updateContent); return _this; } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ RemainingTimeDisplay.prototype.createEl = function createEl() { var el = _Component.prototype.createEl.call(this, 'div', { className: 'vjs-remaining-time vjs-time-control vjs-control' }); this.contentEl_ = Dom.createEl('div', { className: 'vjs-remaining-time-display', // label the remaining time for screen reader users innerHTML: '' + this.localize('Remaining Time') + ' -0:00' }, { // tell screen readers not to automatically read the time as it changes 'aria-live': 'off' }); el.appendChild(this.contentEl_); return el; }; /** * Update remaining time display. * * @param {EventTarget~Event} [event] * The `timeupdate` or `durationchange` event that caused this to run. * * @listens Player#timeupdate * @listens Player#durationchange */ RemainingTimeDisplay.prototype.updateContent = function updateContent(event) { if (this.player_.duration()) { var localizedText = this.localize('Remaining Time'); var formattedTime = (0, _formatTime2['default'])(this.player_.remainingTime()); if (formattedTime !== this.formattedTime_) { this.formattedTime_ = formattedTime; this.contentEl_.innerHTML = '' + localizedText + ' -' + formattedTime; } } // Allows for smooth scrubbing, when player can't keep up. // var time = (this.player_.scrubbing()) ? this.player_.getCache().currentTime : this.player_.currentTime(); // this.contentEl_.innerHTML = vjs.formatTime(time, this.player_.duration()); }; return RemainingTimeDisplay; }(_component2['default']); _component2['default'].registerComponent('RemainingTimeDisplay', RemainingTimeDisplay); exports['default'] = RemainingTimeDisplay; },{"../../component.js":47,"../../utils/dom.js":123,"../../utils/format-time.js":126}],77:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file time-divider.js */ /** * The separator between the current time and duration. * Can be hidden if it's not needed in the design. * * @extends Component */ var TimeDivider = function (_Component) { _inherits(TimeDivider, _Component); function TimeDivider() { _classCallCheck(this, TimeDivider); return _possibleConstructorReturn(this, _Component.apply(this, arguments)); } /** * Create the component's DOM element * * @return {Element} * The element that was created. */ TimeDivider.prototype.createEl = function createEl() { return _Component.prototype.createEl.call(this, 'div', { className: 'vjs-time-control vjs-time-divider', innerHTML: '
/
' }); }; return TimeDivider; }(_component2['default']); _component2['default'].registerComponent('TimeDivider', TimeDivider); exports['default'] = TimeDivider; },{"../../component.js":47}],78:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _menuButton = require('../menu/menu-button.js'); var _menuButton2 = _interopRequireDefault(_menuButton); var _component = require('../component.js'); var _component2 = _interopRequireDefault(_component); var _fn = require('../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file track-button.js */ /** * The base class for buttons that toggle specific track types (e.g. subtitles). * * @extends MenuButton */ var TrackButton = function (_MenuButton) { _inherits(TrackButton, _MenuButton); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function TrackButton(player, options) { _classCallCheck(this, TrackButton); var tracks = options.tracks; var _this = _possibleConstructorReturn(this, _MenuButton.call(this, player, options)); if (_this.items.length <= 1) { _this.hide(); } if (!tracks) { return _possibleConstructorReturn(_this); } var updateHandler = Fn.bind(_this, _this.update); tracks.addEventListener('removetrack', updateHandler); tracks.addEventListener('addtrack', updateHandler); _this.player_.on('dispose', function () { tracks.removeEventListener('removetrack', updateHandler); tracks.removeEventListener('addtrack', updateHandler); }); return _this; } return TrackButton; }(_menuButton2['default']); _component2['default'].registerComponent('TrackButton', TrackButton); exports['default'] = TrackButton; },{"../component.js":47,"../menu/menu-button.js":89,"../utils/fn.js":125}],79:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _slider = require('../../slider/slider.js'); var _slider2 = _interopRequireDefault(_slider); var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); var _fn = require('../../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); require('./volume-level.js'); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file volume-bar.js */ // Required children /** * The bar that contains the volume level and can be clicked on to adjust the level * * @extends Slider */ var VolumeBar = function (_Slider) { _inherits(VolumeBar, _Slider); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function VolumeBar(player, options) { _classCallCheck(this, VolumeBar); var _this = _possibleConstructorReturn(this, _Slider.call(this, player, options)); _this.on(player, 'volumechange', _this.updateARIAAttributes); player.ready(Fn.bind(_this, _this.updateARIAAttributes)); return _this; } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ VolumeBar.prototype.createEl = function createEl() { return _Slider.prototype.createEl.call(this, 'div', { className: 'vjs-volume-bar vjs-slider-bar' }, { 'aria-label': 'volume level' }); }; /** * Handle movement events on the {@link VolumeMenuButton}. * * @param {EventTarget~Event} event * The event that caused this function to run. * * @listens mousemove */ VolumeBar.prototype.handleMouseMove = function handleMouseMove(event) { this.checkMuted(); this.player_.volume(this.calculateDistance(event)); }; /** * If the player is muted unmute it. */ VolumeBar.prototype.checkMuted = function checkMuted() { if (this.player_.muted()) { this.player_.muted(false); } }; /** * Get percent of volume level * * @return {number} * Volume level percent as a decimal number. */ VolumeBar.prototype.getPercent = function getPercent() { if (this.player_.muted()) { return 0; } return this.player_.volume(); }; /** * Increase volume level for keyboard users */ VolumeBar.prototype.stepForward = function stepForward() { this.checkMuted(); this.player_.volume(this.player_.volume() + 0.1); }; /** * Decrease volume level for keyboard users */ VolumeBar.prototype.stepBack = function stepBack() { this.checkMuted(); this.player_.volume(this.player_.volume() - 0.1); }; /** * Update ARIA accessibility attributes * * @param {EventTarget~Event} [event] * The `volumechange` event that caused this function to run. * * @listens Player#volumechange */ VolumeBar.prototype.updateARIAAttributes = function updateARIAAttributes(event) { // Current value of volume bar as a percentage var volume = (this.player_.volume() * 100).toFixed(2); this.el_.setAttribute('aria-valuenow', volume); this.el_.setAttribute('aria-valuetext', volume + '%'); }; return VolumeBar; }(_slider2['default']); /** * Default options for the `VolumeBar` * * @type {Object} * @private */ VolumeBar.prototype.options_ = { children: ['volumeLevel'], barName: 'volumeLevel' }; /** * Call the update event for this Slider when this event happens on the player. * * @type {string} */ VolumeBar.prototype.playerEvent = 'volumechange'; _component2['default'].registerComponent('VolumeBar', VolumeBar); exports['default'] = VolumeBar; },{"../../component.js":47,"../../slider/slider.js":99,"../../utils/fn.js":125,"./volume-level.js":81}],80:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); require('./volume-bar.js'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file volume-control.js */ // Required children /** * The component for controlling the volume level * * @extends Component */ var VolumeControl = function (_Component) { _inherits(VolumeControl, _Component); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options={}] * The key/value store of player options. */ function VolumeControl(player, options) { _classCallCheck(this, VolumeControl); // hide volume controls when they're not supported by the current tech var _this = _possibleConstructorReturn(this, _Component.call(this, player, options)); if (player.tech_ && player.tech_.featuresVolumeControl === false) { _this.addClass('vjs-hidden'); } _this.on(player, 'loadstart', function () { if (player.tech_.featuresVolumeControl === false) { this.addClass('vjs-hidden'); } else { this.removeClass('vjs-hidden'); } }); return _this; } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ VolumeControl.prototype.createEl = function createEl() { return _Component.prototype.createEl.call(this, 'div', { className: 'vjs-volume-control vjs-control' }); }; return VolumeControl; }(_component2['default']); /** * Default options for the `VolumeControl` * * @type {Object} * @private */ VolumeControl.prototype.options_ = { children: ['volumeBar'] }; _component2['default'].registerComponent('VolumeControl', VolumeControl); exports['default'] = VolumeControl; },{"../../component.js":47,"./volume-bar.js":79}],81:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../../component.js'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file volume-level.js */ /** * Shows volume level * * @extends Component */ var VolumeLevel = function (_Component) { _inherits(VolumeLevel, _Component); function VolumeLevel() { _classCallCheck(this, VolumeLevel); return _possibleConstructorReturn(this, _Component.apply(this, arguments)); } /** * Create the `Component`'s DOM element * * @return {Element} * The element that was created. */ VolumeLevel.prototype.createEl = function createEl() { return _Component.prototype.createEl.call(this, 'div', { className: 'vjs-volume-level', innerHTML: '' }); }; return VolumeLevel; }(_component2['default']); _component2['default'].registerComponent('VolumeLevel', VolumeLevel); exports['default'] = VolumeLevel; },{"../../component.js":47}],82:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _fn = require('../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _component = require('../component.js'); var _component2 = _interopRequireDefault(_component); var _popup = require('../popup/popup.js'); var _popup2 = _interopRequireDefault(_popup); var _popupButton = require('../popup/popup-button.js'); var _popupButton2 = _interopRequireDefault(_popupButton); var _muteToggle = require('./mute-toggle.js'); var _muteToggle2 = _interopRequireDefault(_muteToggle); var _volumeBar = require('./volume-control/volume-bar.js'); var _volumeBar2 = _interopRequireDefault(_volumeBar); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file volume-menu-button.js */ /** * Button for volume popup * * @extends PopupButton */ var VolumeMenuButton = function (_PopupButton) { _inherits(VolumeMenuButton, _PopupButton); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options={}] * The key/value store of player options. */ function VolumeMenuButton(player) { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; _classCallCheck(this, VolumeMenuButton); // Default to inline if (options.inline === undefined) { options.inline = true; } // If the vertical option isn't passed at all, default to true. if (options.vertical === undefined) { // If an inline volumeMenuButton is used, we should default to using // a horizontal slider for obvious reasons. if (options.inline) { options.vertical = false; } else { options.vertical = true; } } // The vertical option needs to be set on the volumeBar as well, // since that will need to be passed along to the VolumeBar constructor options.volumeBar = options.volumeBar || {}; options.volumeBar.vertical = !!options.vertical; // Same listeners as MuteToggle var _this = _possibleConstructorReturn(this, _PopupButton.call(this, player, options)); _this.on(player, 'volumechange', _this.volumeUpdate); _this.on(player, 'loadstart', _this.volumeUpdate); // hide mute toggle if the current tech doesn't support volume control function updateVisibility() { if (player.tech_ && player.tech_.featuresVolumeControl === false) { this.addClass('vjs-hidden'); } else { this.removeClass('vjs-hidden'); } } updateVisibility.call(_this); _this.on(player, 'loadstart', updateVisibility); _this.on(_this.volumeBar, ['slideractive', 'focus'], function () { this.addClass('vjs-slider-active'); }); _this.on(_this.volumeBar, ['sliderinactive', 'blur'], function () { this.removeClass('vjs-slider-active'); }); _this.on(_this.volumeBar, ['focus'], function () { this.addClass('vjs-lock-showing'); }); _this.on(_this.volumeBar, ['blur'], function () { this.removeClass('vjs-lock-showing'); }); return _this; } /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ VolumeMenuButton.prototype.buildCSSClass = function buildCSSClass() { var orientationClass = ''; if (this.options_.vertical) { orientationClass = 'vjs-volume-menu-button-vertical'; } else { orientationClass = 'vjs-volume-menu-button-horizontal'; } return 'vjs-volume-menu-button ' + _PopupButton.prototype.buildCSSClass.call(this) + ' ' + orientationClass; }; /** * Create the VolumeMenuButton popup * * @return {Popup} * The popup that was created */ VolumeMenuButton.prototype.createPopup = function createPopup() { var popup = new _popup2['default'](this.player_, { contentElType: 'div' }); var vb = new _volumeBar2['default'](this.player_, this.options_.volumeBar); popup.addChild(vb); this.menuContent = popup; this.volumeBar = vb; this.attachVolumeBarEvents(); return popup; }; /** * This gets called when an `VolumeMenuButton` is "clicked". See * {@link ClickableComponent} for more detailed information on what a click can be. * * @param {EventTarget~Event} [event] * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click */ VolumeMenuButton.prototype.handleClick = function handleClick(event) { _muteToggle2['default'].prototype.handleClick.call(this); _PopupButton.prototype.handleClick.call(this); }; /** * Add events listeners to the created `VolumeBar`. */ VolumeMenuButton.prototype.attachVolumeBarEvents = function attachVolumeBarEvents() { this.menuContent.on(['mousedown', 'touchdown'], Fn.bind(this, this.handleMouseDown)); }; /** * Handle the `mousedown` and `touchdown` events on the `VolumeBar` * * @param {EventTarget~Event} [event] * The `mousedown` or `touchdown` event that caused this to run. * * @listens mousedown * @listens touchdown */ VolumeMenuButton.prototype.handleMouseDown = function handleMouseDown(event) { this.on(['mousemove', 'touchmove'], Fn.bind(this.volumeBar, this.volumeBar.handleMouseMove)); this.on(this.el_.ownerDocument, ['mouseup', 'touchend'], this.handleMouseUp); }; /** * Handle the `mouseup` and `touchend` events on the `VolumeBar` * * @param {EventTarget~Event} [event] * The `mouseup` or `touchend` event that caused this to run. * * @listens mouseup * @listens touchend */ VolumeMenuButton.prototype.handleMouseUp = function handleMouseUp(event) { this.off(['mousemove', 'touchmove'], Fn.bind(this.volumeBar, this.volumeBar.handleMouseMove)); }; return VolumeMenuButton; }(_popupButton2['default']); /** * @borrows MuteToggle#update as VolumeMenuButton#volumeUpdate */ VolumeMenuButton.prototype.volumeUpdate = _muteToggle2['default'].prototype.update; /** * The text that should display over the `VolumeMenuButton`s controls. Added for localization. * * @type {string} * @private */ VolumeMenuButton.prototype.controlText_ = 'Mute'; _component2['default'].registerComponent('VolumeMenuButton', VolumeMenuButton); exports['default'] = VolumeMenuButton; },{"../component.js":47,"../popup/popup-button.js":95,"../popup/popup.js":96,"../utils/fn.js":125,"./mute-toggle.js":53,"./volume-control/volume-bar.js":79}],83:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('./component'); var _component2 = _interopRequireDefault(_component); var _modalDialog = require('./modal-dialog'); var _modalDialog2 = _interopRequireDefault(_modalDialog); var _mergeOptions = require('./utils/merge-options'); var _mergeOptions2 = _interopRequireDefault(_mergeOptions); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file error-display.js */ /** * A display that indicates an error has occurred. This means that the video * is unplayable. * * @extends ModalDialog */ var ErrorDisplay = function (_ModalDialog) { _inherits(ErrorDisplay, _ModalDialog); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function ErrorDisplay(player, options) { _classCallCheck(this, ErrorDisplay); var _this = _possibleConstructorReturn(this, _ModalDialog.call(this, player, options)); _this.on(player, 'error', _this.open); return _this; } /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. * * @deprecated Since version 5. */ ErrorDisplay.prototype.buildCSSClass = function buildCSSClass() { return 'vjs-error-display ' + _ModalDialog.prototype.buildCSSClass.call(this); }; /** * Gets the localized error message based on the `Player`s error. * * @return {string} * The `Player`s error message localized or an empty string. */ ErrorDisplay.prototype.content = function content() { var error = this.player().error(); return error ? this.localize(error.message) : ''; }; return ErrorDisplay; }(_modalDialog2['default']); /** * The default options for an `ErrorDisplay`. * * @private */ ErrorDisplay.prototype.options_ = (0, _mergeOptions2['default'])(_modalDialog2['default'].prototype.options_, { pauseOnOpen: false, fillAlways: true, temporary: false, uncloseable: true }); _component2['default'].registerComponent('ErrorDisplay', ErrorDisplay); exports['default'] = ErrorDisplay; },{"./component":47,"./modal-dialog":92,"./utils/merge-options":129}],84:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _events = require('./utils/events.js'); var Events = _interopRequireWildcard(_events); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } /** * `EventTarget` is a class that can have the same API as the DOM `EventTarget`. It * adds shorthand functions that wrap around lengthy functions. For example: * the `on` function is a wrapper around `addEventListener`. * * @see [EventTarget Spec]{@link https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget} * @class EventTarget */ var EventTarget = function EventTarget() {}; /** * A Custom DOM event. * * @typedef {Object} EventTarget~Event * @see [Properties]{@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent} */ /** * All event listeners should follow the following format. * * @callback EventTarget~EventListener * @this {EventTarget} * * @param {EventTarget~Event} event * the event that triggered this function * * @param {Object} [hash] * hash of data sent during the event */ /** * An object containing event names as keys and booleans as values. * * > NOTE: If an event name is set to a true value here {@link EventTarget#trigger} * will have extra functionality. See that function for more information. * * @property EventTarget.prototype.allowedEvents_ * @private */ /** * @file src/js/event-target.js */ EventTarget.prototype.allowedEvents_ = {}; /** * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a * function that will get called when an event with a certain name gets triggered. * * @param {string|string[]} type * An event name or an array of event names. * * @param {EventTarget~EventListener} fn * The function to call with `EventTarget`s */ EventTarget.prototype.on = function (type, fn) { // Remove the addEventListener alias before calling Events.on // so we don't get into an infinite type loop var ael = this.addEventListener; this.addEventListener = function () {}; Events.on(this, type, fn); this.addEventListener = ael; }; /** * An alias of {@link EventTarget#on}. Allows `EventTarget` to mimic * the standard DOM API. * * @function * @see {@link EventTarget#on} */ EventTarget.prototype.addEventListener = EventTarget.prototype.on; /** * Removes an `event listener` for a specific event from an instance of `EventTarget`. * This makes it so that the `event listener` will no longer get called when the * named event happens. * * @param {string|string[]} type * An event name or an array of event names. * * @param {EventTarget~EventListener} fn * The function to remove. */ EventTarget.prototype.off = function (type, fn) { Events.off(this, type, fn); }; /** * An alias of {@link EventTarget#off}. Allows `EventTarget` to mimic * the standard DOM API. * * @function * @see {@link EventTarget#off} */ EventTarget.prototype.removeEventListener = EventTarget.prototype.off; /** * This function will add an `event listener` that gets triggered only once. After the * first trigger it will get removed. This is like adding an `event listener` * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself. * * @param {string|string[]} type * An event name or an array of event names. * * @param {EventTarget~EventListener} fn * The function to be called once for each event name. */ EventTarget.prototype.one = function (type, fn) { // Remove the addEventListener alialing Events.on // so we don't get into an infinite type loop var ael = this.addEventListener; this.addEventListener = function () {}; Events.one(this, type, fn); this.addEventListener = ael; }; /** * This function causes an event to happen. This will then cause any `event listeners` * that are waiting for that event, to get called. If there are no `event listeners` * for an event then nothing will happen. * * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`. * Trigger will also call the `on` + `uppercaseEventName` function. * * Example: * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call * `onClick` if it exists. * * @param {string|EventTarget~Event|Object} event * The name of the event, an `Event`, or an object with a key of type set to * an event name. */ EventTarget.prototype.trigger = function (event) { var type = event.type || event; if (typeof event === 'string') { event = { type: type }; } event = Events.fixEvent(event); if (this.allowedEvents_[type] && this['on' + type]) { this['on' + type](event); } Events.trigger(this, event); }; /** * An alias of {@link EventTarget#trigger}. Allows `EventTarget` to mimic * the standard DOM API. * * @function * @see {@link EventTarget#trigger} */ EventTarget.prototype.dispatchEvent = EventTarget.prototype.trigger; exports['default'] = EventTarget; },{"./utils/events.js":124}],85:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; var _log = require('./utils/log'); var _log2 = _interopRequireDefault(_log); var _obj = require('./utils/obj'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } /** * @file extend.js * @module extend */ /** * A combination of node inherits and babel's inherits (after transpile). * Both work the same but node adds `super_` to the subClass * and Bable adds the superClass as __proto__. Both seem useful. * * @param {Object} subClass * The class to inherit to * * @param {Object} superClass * The class to inherit from * * @private */ var _inherits = function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + (typeof superClass === 'undefined' ? 'undefined' : _typeof(superClass))); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) { // node subClass.super_ = superClass; } }; /** * Function for subclassing using the same inheritance that * videojs uses internally * * @param {Object} superClass * The class to inherit from * * @param {Object} [subClassMethods={}] * The class to inherit to * * @return {Object} * The new object with subClassMethods that inherited superClass. */ var extendFn = function extendFn(superClass) { var subClassMethods = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var subClass = function subClass() { superClass.apply(this, arguments); }; var methods = {}; if ((0, _obj.isObject)(subClassMethods)) { if (typeof subClassMethods.init === 'function') { _log2['default'].warn('Constructor logic via init() is deprecated; please use constructor() instead.'); subClassMethods.constructor = subClassMethods.init; } if (subClassMethods.constructor !== Object.prototype.constructor) { subClass = subClassMethods.constructor; } methods = subClassMethods; } else if (typeof subClassMethods === 'function') { subClass = subClassMethods; } _inherits(subClass, superClass); // Extend subObj's prototype with functions and other properties from props for (var name in methods) { if (methods.hasOwnProperty(name)) { subClass.prototype[name] = methods[name]; } } return subClass; }; exports['default'] = extendFn; },{"./utils/log":128,"./utils/obj":130}],86:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _document = require('global/document'); var _document2 = _interopRequireDefault(_document); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } /** * Store the browser-specific methods for the fullscreen API. * * @type {Object} * @see [Specification]{@link https://fullscreen.spec.whatwg.org} * @see [Map Approach From Screenfull.js]{@link https://github.com/sindresorhus/screenfull.js} */ var FullscreenApi = {}; // browser API methods /** * @file fullscreen-api.js * @module fullscreen-api * @private */ var apiMap = [['requestFullscreen', 'exitFullscreen', 'fullscreenElement', 'fullscreenEnabled', 'fullscreenchange', 'fullscreenerror'], // WebKit ['webkitRequestFullscreen', 'webkitExitFullscreen', 'webkitFullscreenElement', 'webkitFullscreenEnabled', 'webkitfullscreenchange', 'webkitfullscreenerror'], // Old WebKit (Safari 5.1) ['webkitRequestFullScreen', 'webkitCancelFullScreen', 'webkitCurrentFullScreenElement', 'webkitCancelFullScreen', 'webkitfullscreenchange', 'webkitfullscreenerror'], // Mozilla ['mozRequestFullScreen', 'mozCancelFullScreen', 'mozFullScreenElement', 'mozFullScreenEnabled', 'mozfullscreenchange', 'mozfullscreenerror'], // Microsoft ['msRequestFullscreen', 'msExitFullscreen', 'msFullscreenElement', 'msFullscreenEnabled', 'MSFullscreenChange', 'MSFullscreenError']]; var specApi = apiMap[0]; var browserApi = void 0; // determine the supported set of functions for (var i = 0; i < apiMap.length; i++) { // check for exitFullscreen function if (apiMap[i][1] in _document2['default']) { browserApi = apiMap[i]; break; } } // map the browser API names to the spec API names if (browserApi) { for (var _i = 0; _i < browserApi.length; _i++) { FullscreenApi[specApi[_i]] = browserApi[_i]; } } exports['default'] = FullscreenApi; },{"global/document":136}],87:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('./component'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file loading-spinner.js */ /** * A loading spinner for use during waiting/loading events. * * @extends Component */ var LoadingSpinner = function (_Component) { _inherits(LoadingSpinner, _Component); function LoadingSpinner() { _classCallCheck(this, LoadingSpinner); return _possibleConstructorReturn(this, _Component.apply(this, arguments)); } /** * Create the `LoadingSpinner`s DOM element. * * @return {Element} * The dom element that gets created. */ LoadingSpinner.prototype.createEl = function createEl() { return _Component.prototype.createEl.call(this, 'div', { className: 'vjs-loading-spinner', dir: 'ltr' }); }; return LoadingSpinner; }(_component2['default']); _component2['default'].registerComponent('LoadingSpinner', LoadingSpinner); exports['default'] = LoadingSpinner; },{"./component":47}],88:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _obj = require('./utils/obj'); /** * A Custom `MediaError` class which mimics the standard HTML5 `MediaError` class. * * @param {number|string|Object|MediaError} value * This can be of multiple types: * - number: should be a standard error code * - string: an error message (the code will be 0) * - Object: arbitrary properties * - `MediaError` (native): used to populate a video.js `MediaError` object * - `MediaError` (video.js): will return itself if it's already a * video.js `MediaError` object. * * @see [MediaError Spec]{@link https://dev.w3.org/html5/spec-author-view/video.html#mediaerror} * @see [Encrypted MediaError Spec]{@link https://www.w3.org/TR/2013/WD-encrypted-media-20130510/#error-codes} * * @class MediaError */ function MediaError(value) { // Allow redundant calls to this constructor to avoid having `instanceof` // checks peppered around the code. if (value instanceof MediaError) { return value; } if (typeof value === 'number') { this.code = value; } else if (typeof value === 'string') { // default code is zero, so this is a custom error this.message = value; } else if ((0, _obj.isObject)(value)) { // We assign the `code` property manually because native `MediaError` objects // do not expose it as an own/enumerable property of the object. if (typeof value.code === 'number') { this.code = value.code; } (0, _obj.assign)(this, value); } if (!this.message) { this.message = MediaError.defaultMessages[this.code] || ''; } } /** * The error code that refers two one of the defined `MediaError` types * * @type {Number} */ /** * @file media-error.js */ MediaError.prototype.code = 0; /** * An optional message that to show with the error. Message is not part of the HTML5 * video spec but allows for more informative custom errors. * * @type {String} */ MediaError.prototype.message = ''; /** * An optional status code that can be set by plugins to allow even more detail about * the error. For example a plugin might provide a specific HTTP status code and an * error message for that code. Then when the plugin gets that error this class will * know how to display an error message for it. This allows a custom message to show * up on the `Player` error overlay. * * @type {Array} */ MediaError.prototype.status = null; /** * Errors indexed by the W3C standard. The order **CANNOT CHANGE**! See the * specification listed under {@link MediaError} for more information. * * @enum {array} * @readonly * @property {string} 0 - MEDIA_ERR_CUSTOM * @property {string} 1 - MEDIA_ERR_CUSTOM * @property {string} 2 - MEDIA_ERR_ABORTED * @property {string} 3 - MEDIA_ERR_NETWORK * @property {string} 4 - MEDIA_ERR_SRC_NOT_SUPPORTED * @property {string} 5 - MEDIA_ERR_ENCRYPTED */ MediaError.errorTypes = ['MEDIA_ERR_CUSTOM', 'MEDIA_ERR_ABORTED', 'MEDIA_ERR_NETWORK', 'MEDIA_ERR_DECODE', 'MEDIA_ERR_SRC_NOT_SUPPORTED', 'MEDIA_ERR_ENCRYPTED']; /** * The default `MediaError` messages based on the {@link MediaError.errorTypes}. * * @type {Array} * @constant */ MediaError.defaultMessages = { 1: 'You aborted the media playback', 2: 'A network error caused the media download to fail part-way.', 3: 'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.', 4: 'The media could not be loaded, either because the server or network failed or because the format is not supported.', 5: 'The media is encrypted and we do not have the keys to decrypt it.' }; // Add types as properties on MediaError // e.g. MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED = 4; for (var errNum = 0; errNum < MediaError.errorTypes.length; errNum++) { MediaError[MediaError.errorTypes[errNum]] = errNum; // values should be accessible on both the class and instance MediaError.prototype[MediaError.errorTypes[errNum]] = errNum; } // jsdocs for instance/static members added above // instance methods use `#` and static methods use `.` /** * W3C error code for any custom error. * * @member MediaError#MEDIA_ERR_CUSTOM * @constant {number} * @default 0 */ /** * W3C error code for any custom error. * * @member MediaError.MEDIA_ERR_CUSTOM * @constant {number} * @default 0 */ /** * W3C error code for media error aborted. * * @member MediaError#MEDIA_ERR_ABORTED * @constant {number} * @default 1 */ /** * W3C error code for media error aborted. * * @member MediaError.MEDIA_ERR_ABORTED * @constant {number} * @default 1 */ /** * W3C error code for any network error. * * @member MediaError#MEDIA_ERR_NETWORK * @constant {number} * @default 2 */ /** * W3C error code for any network error. * * @member MediaError.MEDIA_ERR_NETWORK * @constant {number} * @default 2 */ /** * W3C error code for any decoding error. * * @member MediaError#MEDIA_ERR_DECODE * @constant {number} * @default 3 */ /** * W3C error code for any decoding error. * * @member MediaError.MEDIA_ERR_DECODE * @constant {number} * @default 3 */ /** * W3C error code for any time that a source is not supported. * * @member MediaError#MEDIA_ERR_SRC_NOT_SUPPORTED * @constant {number} * @default 4 */ /** * W3C error code for any time that a source is not supported. * * @member MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED * @constant {number} * @default 4 */ /** * W3C error code for any time that a source is encrypted. * * @member MediaError#MEDIA_ERR_ENCRYPTED * @constant {number} * @default 5 */ /** * W3C error code for any time that a source is encrypted. * * @member MediaError.MEDIA_ERR_ENCRYPTED * @constant {number} * @default 5 */ exports['default'] = MediaError; },{"./utils/obj":130}],89:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _clickableComponent = require('../clickable-component.js'); var _clickableComponent2 = _interopRequireDefault(_clickableComponent); var _component = require('../component.js'); var _component2 = _interopRequireDefault(_component); var _menu = require('./menu.js'); var _menu2 = _interopRequireDefault(_menu); var _dom = require('../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _fn = require('../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _toTitleCase = require('../utils/to-title-case.js'); var _toTitleCase2 = _interopRequireDefault(_toTitleCase); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file menu-button.js */ /** * A `MenuButton` class for any popup {@link Menu}. * * @extends ClickableComponent */ var MenuButton = function (_ClickableComponent) { _inherits(MenuButton, _ClickableComponent); /** * Creates an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options={}] * The key/value store of player options. */ function MenuButton(player) { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; _classCallCheck(this, MenuButton); var _this = _possibleConstructorReturn(this, _ClickableComponent.call(this, player, options)); _this.update(); _this.enabled_ = true; _this.el_.setAttribute('aria-haspopup', 'true'); _this.el_.setAttribute('role', 'menuitem'); _this.on('keydown', _this.handleSubmenuKeyPress); return _this; } /** * Update the menu based on the current state of its items. */ MenuButton.prototype.update = function update() { var menu = this.createMenu(); if (this.menu) { this.removeChild(this.menu); } this.menu = menu; this.addChild(menu); /** * Track the state of the menu button * * @type {Boolean} * @private */ this.buttonPressed_ = false; this.el_.setAttribute('aria-expanded', 'false'); if (this.items && this.items.length <= this.hideThreshold_) { this.hide(); } else { this.show(); } }; /** * Create the menu and add all items to it. * * @return {Menu} * The constructed menu */ MenuButton.prototype.createMenu = function createMenu() { var menu = new _menu2['default'](this.player_); /** * Hide the menu if the number of items is less than or equal to this threshold. This defaults * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list * it here because every time we run `createMenu` we need to reset the value. * * @protected * @type {Number} */ this.hideThreshold_ = 0; // Add a title list item to the top if (this.options_.title) { var title = Dom.createEl('li', { className: 'vjs-menu-title', innerHTML: (0, _toTitleCase2['default'])(this.options_.title), tabIndex: -1 }); this.hideThreshold_ += 1; menu.children_.unshift(title); Dom.insertElFirst(title, menu.contentEl()); } this.items = this.createItems(); if (this.items) { // Add menu items to the menu for (var i = 0; i < this.items.length; i++) { menu.addItem(this.items[i]); } } return menu; }; /** * Create the list of menu items. Specific to each subclass. * * @abstract */ MenuButton.prototype.createItems = function createItems() {}; /** * Create the `MenuButtons`s DOM element. * * @return {Element} * The element that gets created. */ MenuButton.prototype.createEl = function createEl() { return _ClickableComponent.prototype.createEl.call(this, 'div', { className: this.buildCSSClass() }); }; /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ MenuButton.prototype.buildCSSClass = function buildCSSClass() { var menuButtonClass = 'vjs-menu-button'; // If the inline option is passed, we want to use different styles altogether. if (this.options_.inline === true) { menuButtonClass += '-inline'; } else { menuButtonClass += '-popup'; } return 'vjs-menu-button ' + menuButtonClass + ' ' + _ClickableComponent.prototype.buildCSSClass.call(this); }; /** * Handle a click on a `MenuButton`. * See {@link ClickableComponent#handleClick} for instances where this is called. * * @param {EventTarget~Event} event * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click */ MenuButton.prototype.handleClick = function handleClick(event) { // When you click the button it adds focus, which will show the menu. // So we'll remove focus when the mouse leaves the button. Focus is needed // for tab navigation. this.one(this.menu.contentEl(), 'mouseleave', Fn.bind(this, function (e) { this.unpressButton(); this.el_.blur(); })); if (this.buttonPressed_) { this.unpressButton(); } else { this.pressButton(); } }; /** * Handle tab, escape, down arrow, and up arrow keys for `MenuButton`. See * {@link ClickableComponent#handleKeyPress} for instances where this is called. * * @param {EventTarget~Event} event * The `keydown` event that caused this function to be called. * * @listens keydown */ MenuButton.prototype.handleKeyPress = function handleKeyPress(event) { // Escape (27) key or Tab (9) key unpress the 'button' if (event.which === 27 || event.which === 9) { if (this.buttonPressed_) { this.unpressButton(); } // Don't preventDefault for Tab key - we still want to lose focus if (event.which !== 9) { event.preventDefault(); } // Up (38) key or Down (40) key press the 'button' } else if (event.which === 38 || event.which === 40) { if (!this.buttonPressed_) { this.pressButton(); event.preventDefault(); } } else { _ClickableComponent.prototype.handleKeyPress.call(this, event); } }; /** * Handle a `keydown` event on a sub-menu. The listener for this is added in * the constructor. * * @param {EventTarget~Event} event * Key press event * * @listens keydown */ MenuButton.prototype.handleSubmenuKeyPress = function handleSubmenuKeyPress(event) { // Escape (27) key or Tab (9) key unpress the 'button' if (event.which === 27 || event.which === 9) { if (this.buttonPressed_) { this.unpressButton(); } // Don't preventDefault for Tab key - we still want to lose focus if (event.which !== 9) { event.preventDefault(); } } }; /** * Put the current `MenuButton` into a pressed state. */ MenuButton.prototype.pressButton = function pressButton() { if (this.enabled_) { this.buttonPressed_ = true; this.menu.lockShowing(); this.el_.setAttribute('aria-expanded', 'true'); // set the focus into the submenu this.menu.focus(); } }; /** * Take the current `MenuButton` out of a pressed state. */ MenuButton.prototype.unpressButton = function unpressButton() { if (this.enabled_) { this.buttonPressed_ = false; this.menu.unlockShowing(); this.el_.setAttribute('aria-expanded', 'false'); // Set focus back to this menu button this.el_.focus(); } }; /** * Disable the `MenuButton`. Don't allow it to be clicked. * * @return {MenuButton} * Returns itself; method can be chained. */ MenuButton.prototype.disable = function disable() { // Unpress, but don't force focus on this button this.buttonPressed_ = false; this.menu.unlockShowing(); this.el_.setAttribute('aria-expanded', 'false'); this.enabled_ = false; return _ClickableComponent.prototype.disable.call(this); }; /** * Enable the `MenuButton`. Allow it to be clicked. * * @return {MenuButton} * Returns itself; method can be chained. */ MenuButton.prototype.enable = function enable() { this.enabled_ = true; return _ClickableComponent.prototype.enable.call(this); }; return MenuButton; }(_clickableComponent2['default']); _component2['default'].registerComponent('MenuButton', MenuButton); exports['default'] = MenuButton; },{"../clickable-component.js":45,"../component.js":47,"../utils/dom.js":123,"../utils/fn.js":125,"../utils/to-title-case.js":133,"./menu.js":91}],90:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _clickableComponent = require('../clickable-component.js'); var _clickableComponent2 = _interopRequireDefault(_clickableComponent); var _component = require('../component.js'); var _component2 = _interopRequireDefault(_component); var _obj = require('../utils/obj'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file menu-item.js */ /** * The component for a menu item. `
  • ` * * @extends ClickableComponent */ var MenuItem = function (_ClickableComponent) { _inherits(MenuItem, _ClickableComponent); /** * Creates an instance of the this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options={}] * The key/value store of player options. * */ function MenuItem(player, options) { _classCallCheck(this, MenuItem); var _this = _possibleConstructorReturn(this, _ClickableComponent.call(this, player, options)); _this.selectable = options.selectable; _this.selected(options.selected); if (_this.selectable) { // TODO: May need to be either menuitemcheckbox or menuitemradio, // and may need logical grouping of menu items. _this.el_.setAttribute('role', 'menuitemcheckbox'); } else { _this.el_.setAttribute('role', 'menuitem'); } return _this; } /** * Create the `MenuItem's DOM element * * @param {string} [type=li] * Element's node type, not actually used, always set to `li`. * * @param {Object} [props={}] * An object of properties that should be set on the element * * @param {Object} [attrs={}] * An object of attributes that should be set on the element * * @return {Element} * The element that gets created. */ MenuItem.prototype.createEl = function createEl(type, props, attrs) { // The control is textual, not just an icon this.nonIconControl = true; return _ClickableComponent.prototype.createEl.call(this, 'li', (0, _obj.assign)({ className: 'vjs-menu-item', innerHTML: this.localize(this.options_.label), tabIndex: -1 }, props), attrs); }; /** * Any click on a `MenuItem` puts int into the selected state. * See {@link ClickableComponent#handleClick} for instances where this is called. * * @param {EventTarget~Event} event * The `keydown`, `tap`, or `click` event that caused this function to be * called. * * @listens tap * @listens click */ MenuItem.prototype.handleClick = function handleClick(event) { this.selected(true); }; /** * Set the state for this menu item as selected or not. * * @param {boolean} selected * if the menu item is selected or not */ MenuItem.prototype.selected = function selected(_selected) { if (this.selectable) { if (_selected) { this.addClass('vjs-selected'); this.el_.setAttribute('aria-checked', 'true'); // aria-checked isn't fully supported by browsers/screen readers, // so indicate selected state to screen reader in the control text. this.controlText(', selected'); } else { this.removeClass('vjs-selected'); this.el_.setAttribute('aria-checked', 'false'); // Indicate un-selected state to screen reader // Note that a space clears out the selected state text this.controlText(' '); } } }; return MenuItem; }(_clickableComponent2['default']); _component2['default'].registerComponent('MenuItem', MenuItem); exports['default'] = MenuItem; },{"../clickable-component.js":45,"../component.js":47,"../utils/obj":130}],91:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../component.js'); var _component2 = _interopRequireDefault(_component); var _dom = require('../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _fn = require('../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _events = require('../utils/events.js'); var Events = _interopRequireWildcard(_events); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file menu.js */ /** * The Menu component is used to build popup menus, including subtitle and * captions selection menus. * * @extends Component */ var Menu = function (_Component) { _inherits(Menu, _Component); /** * Create an instance of this class. * * @param {Player} player * the player that this component should attach to * * @param {Object} [options] * Object of option names and values * */ function Menu(player, options) { _classCallCheck(this, Menu); var _this = _possibleConstructorReturn(this, _Component.call(this, player, options)); _this.focusedChild_ = -1; _this.on('keydown', _this.handleKeyPress); return _this; } /** * Add a {@link MenuItem} to the menu. * * @param {Object|string} component * The name or instance of the `MenuItem` to add. * */ Menu.prototype.addItem = function addItem(component) { this.addChild(component); component.on('click', Fn.bind(this, function (event) { this.unlockShowing(); // TODO: Need to set keyboard focus back to the menuButton })); }; /** * Create the `Menu`s DOM element. * * @return {Element} * the element that was created */ Menu.prototype.createEl = function createEl() { var contentElType = this.options_.contentElType || 'ul'; this.contentEl_ = Dom.createEl(contentElType, { className: 'vjs-menu-content' }); this.contentEl_.setAttribute('role', 'menu'); var el = _Component.prototype.createEl.call(this, 'div', { append: this.contentEl_, className: 'vjs-menu' }); el.setAttribute('role', 'presentation'); el.appendChild(this.contentEl_); // Prevent clicks from bubbling up. Needed for Menu Buttons, // where a click on the parent is significant Events.on(el, 'click', function (event) { event.preventDefault(); event.stopImmediatePropagation(); }); return el; }; /** * Handle a `keydown` event on this menu. This listener is added in the constructor. * * @param {EventTarget~Event} event * A `keydown` event that happened on the menu. * * @listens keydown */ Menu.prototype.handleKeyPress = function handleKeyPress(event) { // Left and Down Arrows if (event.which === 37 || event.which === 40) { event.preventDefault(); this.stepForward(); // Up and Right Arrows } else if (event.which === 38 || event.which === 39) { event.preventDefault(); this.stepBack(); } }; /** * Move to next (lower) menu item for keyboard users. */ Menu.prototype.stepForward = function stepForward() { var stepChild = 0; if (this.focusedChild_ !== undefined) { stepChild = this.focusedChild_ + 1; } this.focus(stepChild); }; /** * Move to previous (higher) menu item for keyboard users. */ Menu.prototype.stepBack = function stepBack() { var stepChild = 0; if (this.focusedChild_ !== undefined) { stepChild = this.focusedChild_ - 1; } this.focus(stepChild); }; /** * Set focus on a {@link MenuItem} in the `Menu`. * * @param {Object|string} [item=0] * Index of child item set focus on. */ Menu.prototype.focus = function focus() { var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; var children = this.children().slice(); var haveTitle = children.length && children[0].className && /vjs-menu-title/.test(children[0].className); if (haveTitle) { children.shift(); } if (children.length > 0) { if (item < 0) { item = 0; } else if (item >= children.length) { item = children.length - 1; } this.focusedChild_ = item; children[item].el_.focus(); } }; return Menu; }(_component2['default']); _component2['default'].registerComponent('Menu', Menu); exports['default'] = Menu; },{"../component.js":47,"../utils/dom.js":123,"../utils/events.js":124,"../utils/fn.js":125}],92:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _dom = require('./utils/dom'); var Dom = _interopRequireWildcard(_dom); var _fn = require('./utils/fn'); var Fn = _interopRequireWildcard(_fn); var _component = require('./component'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file modal-dialog.js */ var MODAL_CLASS_NAME = 'vjs-modal-dialog'; var ESC = 27; /** * The `ModalDialog` displays over the video and its controls, which blocks * interaction with the player until it is closed. * * Modal dialogs include a "Close" button and will close when that button * is activated - or when ESC is pressed anywhere. * * @extends Component */ var ModalDialog = function (_Component) { _inherits(ModalDialog, _Component); /** * Create an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. * * @param {Mixed} [options.content=undefined] * Provide customized content for this modal. * * @param {string} [options.description] * A text description for the modal, primarily for accessibility. * * @param {boolean} [options.fillAlways=false] * Normally, modals are automatically filled only the first time * they open. This tells the modal to refresh its content * every time it opens. * * @param {string} [options.label] * A text label for the modal, primarily for accessibility. * * @param {boolean} [options.temporary=true] * If `true`, the modal can only be opened once; it will be * disposed as soon as it's closed. * * @param {boolean} [options.uncloseable=false] * If `true`, the user will not be able to close the modal * through the UI in the normal ways. Programmatic closing is * still possible. */ function ModalDialog(player, options) { _classCallCheck(this, ModalDialog); var _this = _possibleConstructorReturn(this, _Component.call(this, player, options)); _this.opened_ = _this.hasBeenOpened_ = _this.hasBeenFilled_ = false; _this.closeable(!_this.options_.uncloseable); _this.content(_this.options_.content); // Make sure the contentEl is defined AFTER any children are initialized // because we only want the contents of the modal in the contentEl // (not the UI elements like the close button). _this.contentEl_ = Dom.createEl('div', { className: MODAL_CLASS_NAME + '-content' }, { role: 'document' }); _this.descEl_ = Dom.createEl('p', { className: MODAL_CLASS_NAME + '-description vjs-offscreen', id: _this.el().getAttribute('aria-describedby') }); Dom.textContent(_this.descEl_, _this.description()); _this.el_.appendChild(_this.descEl_); _this.el_.appendChild(_this.contentEl_); return _this; } /** * Create the `ModalDialog`'s DOM element * * @return {Element} * The DOM element that gets created. */ ModalDialog.prototype.createEl = function createEl() { return _Component.prototype.createEl.call(this, 'div', { className: this.buildCSSClass(), tabIndex: -1 }, { 'aria-describedby': this.id() + '_description', 'aria-hidden': 'true', 'aria-label': this.label(), 'role': 'dialog' }); }; /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ ModalDialog.prototype.buildCSSClass = function buildCSSClass() { return MODAL_CLASS_NAME + ' vjs-hidden ' + _Component.prototype.buildCSSClass.call(this); }; /** * Handles `keydown` events on the document, looking for ESC, which closes * the modal. * * @param {EventTarget~Event} e * The keypress that triggered this event. * * @listens keydown */ ModalDialog.prototype.handleKeyPress = function handleKeyPress(e) { if (e.which === ESC && this.closeable()) { this.close(); } }; /** * Returns the label string for this modal. Primarily used for accessibility. * * @return {string} * the localized or raw label of this modal. */ ModalDialog.prototype.label = function label() { return this.options_.label || this.localize('Modal Window'); }; /** * Returns the description string for this modal. Primarily used for * accessibility. * * @return {string} * The localized or raw description of this modal. */ ModalDialog.prototype.description = function description() { var desc = this.options_.description || this.localize('This is a modal window.'); // Append a universal closeability message if the modal is closeable. if (this.closeable()) { desc += ' ' + this.localize('This modal can be closed by pressing the Escape key or activating the close button.'); } return desc; }; /** * Opens the modal. * * @fires ModalDialog#beforemodalopen * @fires ModalDialog#modalopen * * @return {ModalDialog} * Returns itself; method can be chained. */ ModalDialog.prototype.open = function open() { if (!this.opened_) { var player = this.player(); /** * Fired just before a `ModalDialog` is opened. * * @event ModalDialog#beforemodalopen * @type {EventTarget~Event} */ this.trigger('beforemodalopen'); this.opened_ = true; // Fill content if the modal has never opened before and // never been filled. if (this.options_.fillAlways || !this.hasBeenOpened_ && !this.hasBeenFilled_) { this.fill(); } // If the player was playing, pause it and take note of its previously // playing state. this.wasPlaying_ = !player.paused(); if (this.options_.pauseOnOpen && this.wasPlaying_) { player.pause(); } if (this.closeable()) { this.on(this.el_.ownerDocument, 'keydown', Fn.bind(this, this.handleKeyPress)); } player.controls(false); this.show(); this.el().setAttribute('aria-hidden', 'false'); /** * Fired just after a `ModalDialog` is opened. * * @event ModalDialog#modalopen * @type {EventTarget~Event} */ this.trigger('modalopen'); this.hasBeenOpened_ = true; } return this; }; /** * If the `ModalDialog` is currently open or closed. * * @param {boolean} [value] * If given, it will open (`true`) or close (`false`) the modal. * * @return {boolean} * the current open state of the modaldialog */ ModalDialog.prototype.opened = function opened(value) { if (typeof value === 'boolean') { this[value ? 'open' : 'close'](); } return this.opened_; }; /** * Closes the modal, does nothing if the `ModalDialog` is * not open. * * @fires ModalDialog#beforemodalclose * @fires ModalDialog#modalclose * * @return {ModalDialog} * Returns itself; method can be chained. */ ModalDialog.prototype.close = function close() { if (this.opened_) { var player = this.player(); /** * Fired just before a `ModalDialog` is closed. * * @event ModalDialog#beforemodalclose * @type {EventTarget~Event} */ this.trigger('beforemodalclose'); this.opened_ = false; if (this.wasPlaying_ && this.options_.pauseOnOpen) { player.play(); } if (this.closeable()) { this.off(this.el_.ownerDocument, 'keydown', Fn.bind(this, this.handleKeyPress)); } player.controls(true); this.hide(); this.el().setAttribute('aria-hidden', 'true'); /** * Fired just after a `ModalDialog` is closed. * * @event ModalDialog#modalclose * @type {EventTarget~Event} */ this.trigger('modalclose'); if (this.options_.temporary) { this.dispose(); } } return this; }; /** * Check to see if the `ModalDialog` is closeable via the UI. * * @param {boolean} [value] * If given as a boolean, it will set the `closeable` option. * * @return {boolean} * Returns the final value of the closable option. */ ModalDialog.prototype.closeable = function closeable(value) { if (typeof value === 'boolean') { var closeable = this.closeable_ = !!value; var close = this.getChild('closeButton'); // If this is being made closeable and has no close button, add one. if (closeable && !close) { // The close button should be a child of the modal - not its // content element, so temporarily change the content element. var temp = this.contentEl_; this.contentEl_ = this.el_; close = this.addChild('closeButton', { controlText: 'Close Modal Dialog' }); this.contentEl_ = temp; this.on(close, 'close', this.close); } // If this is being made uncloseable and has a close button, remove it. if (!closeable && close) { this.off(close, 'close', this.close); this.removeChild(close); close.dispose(); } } return this.closeable_; }; /** * Fill the modal's content element with the modal's "content" option. * The content element will be emptied before this change takes place. * * @return {ModalDialog} * Returns itself; method can be chained. */ ModalDialog.prototype.fill = function fill() { return this.fillWith(this.content()); }; /** * Fill the modal's content element with arbitrary content. * The content element will be emptied before this change takes place. * * @fires ModalDialog#beforemodalfill * @fires ModalDialog#modalfill * * @param {Mixed} [content] * The same rules apply to this as apply to the `content` option. * * @return {ModalDialog} * Returns itself; method can be chained. */ ModalDialog.prototype.fillWith = function fillWith(content) { var contentEl = this.contentEl(); var parentEl = contentEl.parentNode; var nextSiblingEl = contentEl.nextSibling; /** * Fired just before a `ModalDialog` is filled with content. * * @event ModalDialog#beforemodalfill * @type {EventTarget~Event} */ this.trigger('beforemodalfill'); this.hasBeenFilled_ = true; // Detach the content element from the DOM before performing // manipulation to avoid modifying the live DOM multiple times. parentEl.removeChild(contentEl); this.empty(); Dom.insertContent(contentEl, content); /** * Fired just after a `ModalDialog` is filled with content. * * @event ModalDialog#modalfill * @type {EventTarget~Event} */ this.trigger('modalfill'); // Re-inject the re-filled content element. if (nextSiblingEl) { parentEl.insertBefore(contentEl, nextSiblingEl); } else { parentEl.appendChild(contentEl); } return this; }; /** * Empties the content element. This happens anytime the modal is filled. * * @fires ModalDialog#beforemodalempty * @fires ModalDialog#modalempty * * @return {ModalDialog} * Returns itself; method can be chained. */ ModalDialog.prototype.empty = function empty() { /** * Fired just before a `ModalDialog` is emptied. * * @event ModalDialog#beforemodalempty * @type {EventTarget~Event} */ this.trigger('beforemodalempty'); Dom.emptyEl(this.contentEl()); /** * Fired just after a `ModalDialog` is emptied. * * @event ModalDialog#modalempty * @type {EventTarget~Event} */ this.trigger('modalempty'); return this; }; /** * Gets or sets the modal content, which gets normalized before being * rendered into the DOM. * * This does not update the DOM or fill the modal, but it is called during * that process. * * @param {Mixed} [value] * If defined, sets the internal content value to be used on the * next call(s) to `fill`. This value is normalized before being * inserted. To "clear" the internal content value, pass `null`. * * @return {Mixed} * The current content of the modal dialog */ ModalDialog.prototype.content = function content(value) { if (typeof value !== 'undefined') { this.content_ = value; } return this.content_; }; return ModalDialog; }(_component2['default']); /** * Default options for `ModalDialog` default options. * * @type {Object} * @private */ ModalDialog.prototype.options_ = { pauseOnOpen: true, temporary: true }; _component2['default'].registerComponent('ModalDialog', ModalDialog); exports['default'] = ModalDialog; },{"./component":47,"./utils/dom":123,"./utils/fn":125}],93:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('./component.js'); var _component2 = _interopRequireDefault(_component); var _document = require('global/document'); var _document2 = _interopRequireDefault(_document); var _window = require('global/window'); var _window2 = _interopRequireDefault(_window); var _events = require('./utils/events.js'); var Events = _interopRequireWildcard(_events); var _dom = require('./utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _fn = require('./utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _guid = require('./utils/guid.js'); var Guid = _interopRequireWildcard(_guid); var _browser = require('./utils/browser.js'); var browser = _interopRequireWildcard(_browser); var _log = require('./utils/log.js'); var _log2 = _interopRequireDefault(_log); var _toTitleCase = require('./utils/to-title-case.js'); var _toTitleCase2 = _interopRequireDefault(_toTitleCase); var _timeRanges = require('./utils/time-ranges.js'); var _buffer = require('./utils/buffer.js'); var _stylesheet = require('./utils/stylesheet.js'); var stylesheet = _interopRequireWildcard(_stylesheet); var _fullscreenApi = require('./fullscreen-api.js'); var _fullscreenApi2 = _interopRequireDefault(_fullscreenApi); var _mediaError = require('./media-error.js'); var _mediaError2 = _interopRequireDefault(_mediaError); var _tuple = require('safe-json-parse/tuple'); var _tuple2 = _interopRequireDefault(_tuple); var _obj = require('./utils/obj'); var _mergeOptions = require('./utils/merge-options.js'); var _mergeOptions2 = _interopRequireDefault(_mergeOptions); var _textTrackListConverter = require('./tracks/text-track-list-converter.js'); var _textTrackListConverter2 = _interopRequireDefault(_textTrackListConverter); var _modalDialog = require('./modal-dialog'); var _modalDialog2 = _interopRequireDefault(_modalDialog); var _tech = require('./tech/tech.js'); var _tech2 = _interopRequireDefault(_tech); var _audioTrackList = require('./tracks/audio-track-list.js'); var _audioTrackList2 = _interopRequireDefault(_audioTrackList); var _videoTrackList = require('./tracks/video-track-list.js'); var _videoTrackList2 = _interopRequireDefault(_videoTrackList); require('./tech/loader.js'); require('./tech/flash.js'); require('./poster-image.js'); require('./tracks/text-track-display.js'); require('./loading-spinner.js'); require('./big-play-button.js'); require('./close-button.js'); require('./control-bar/control-bar.js'); require('./error-display.js'); require('./tracks/text-track-settings.js'); require('./tech/html5.js'); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file player.js */ // Subclasses Component // The following imports are used only to ensure that the corresponding modules // are always included in the video.js package. Importing the modules will // execute them and they will register themselves with video.js. // Import Html5 tech, at least for disposing the original video tag. // The following tech events are simply re-triggered // on the player when they happen var TECH_EVENTS_RETRIGGER = [ /** * Fired while the user agent is downloading media data. * * @event Player#progress * @type {EventTarget~Event} */ /** * Retrigger the `progress` event that was triggered by the {@link Tech}. * * @private * @method Player#handleTechProgress_ * @fires Player#progress * @listens Tech#progress */ 'progress', /** * Fires when the loading of an audio/video is aborted. * * @event Player#abort * @type {EventTarget~Event} */ /** * Retrigger the `abort` event that was triggered by the {@link Tech}. * * @private * @method Player#handleTechAbort_ * @fires Player#abort * @listens Tech#abort */ 'abort', /** * Fires when the browser is intentionally not getting media data. * * @event Player#suspend * @type {EventTarget~Event} */ /** * Retrigger the `suspend` event that was triggered by the {@link Tech}. * * @private * @method Player#handleTechSuspend_ * @fires Player#suspend * @listens Tech#suspend */ 'suspend', /** * Fires when the current playlist is empty. * * @event Player#emptied * @type {EventTarget~Event} */ /** * Retrigger the `emptied` event that was triggered by the {@link Tech}. * * @private * @method Player#handleTechEmptied_ * @fires Player#emptied * @listens Tech#emptied */ 'emptied', /** * Fires when the browser is trying to get media data, but data is not available. * * @event Player#stalled * @type {EventTarget~Event} */ /** * Retrigger the `stalled` event that was triggered by the {@link Tech}. * * @private * @method Player#handleTechStalled_ * @fires Player#stalled * @listens Tech#stalled */ 'stalled', /** * Fires when the browser has loaded meta data for the audio/video. * * @event Player#loadedmetadata * @type {EventTarget~Event} */ /** * Retrigger the `stalled` event that was triggered by the {@link Tech}. * * @private * @method Player#handleTechLoadedmetadata_ * @fires Player#loadedmetadata * @listens Tech#loadedmetadata */ 'loadedmetadata', /** * Fires when the browser has loaded the current frame of the audio/video. * * @event player#loadeddata * @type {event} */ /** * Retrigger the `loadeddata` event that was triggered by the {@link Tech}. * * @private * @method Player#handleTechLoaddeddata_ * @fires Player#loadeddata * @listens Tech#loadeddata */ 'loadeddata', /** * Fires when the current playback position has changed. * * @event player#timeupdate * @type {event} */ /** * Retrigger the `timeupdate` event that was triggered by the {@link Tech}. * * @private * @method Player#handleTechTimeUpdate_ * @fires Player#timeupdate * @listens Tech#timeupdate */ 'timeupdate', /** * Fires when the playing speed of the audio/video is changed * * @event player#ratechange * @type {event} */ /** * Retrigger the `ratechange` event that was triggered by the {@link Tech}. * * @private * @method Player#handleTechRatechange_ * @fires Player#ratechange * @listens Tech#ratechange */ 'ratechange', /** * Fires when the volume has been changed * * @event player#volumechange * @type {event} */ /** * Retrigger the `volumechange` event that was triggered by the {@link Tech}. * * @private * @method Player#handleTechVolumechange_ * @fires Player#volumechange * @listens Tech#volumechange */ 'volumechange', /** * Fires when the text track has been changed * * @event player#texttrackchange * @type {event} */ /** * Retrigger the `texttrackchange` event that was triggered by the {@link Tech}. * * @private * @method Player#handleTechTexttrackchange_ * @fires Player#texttrackchange * @listens Tech#texttrackchange */ 'texttrackchange']; /** * An instance of the `Player` class is created when any of the Video.js setup methods * are used to initialize a video. * * After an instance has been created it can be accessed globally in two ways: * 1. By calling `videojs('example_video_1');` * 2. By using it directly via `videojs.players.example_video_1;` * * @extends Component */ var Player = function (_Component) { _inherits(Player, _Component); /** * Create an instance of this class. * * @param {Element} tag * The original video DOM element used for configuring options. * * @param {Object} [options] * Object of option names and values. * * @param {Component~ReadyCallback} [ready] * Ready callback function. */ function Player(tag, options, ready) { _classCallCheck(this, Player); // Make sure tag ID exists tag.id = tag.id || 'vjs_video_' + Guid.newGUID(); // Set Options // The options argument overrides options set in the video tag // which overrides globally set options. // This latter part coincides with the load order // (tag must exist before Player) options = (0, _obj.assign)(Player.getTagSettings(tag), options); // Delay the initialization of children because we need to set up // player properties first, and can't use `this` before `super()` options.initChildren = false; // Same with creating the element options.createEl = false; // we don't want the player to report touch activity on itself // see enableTouchActivity in Component options.reportTouchActivity = false; // If language is not set, get the closest lang attribute if (!options.language) { if (typeof tag.closest === 'function') { var closest = tag.closest('[lang]'); if (closest) { options.language = closest.getAttribute('lang'); } } else { var element = tag; while (element && element.nodeType === 1) { if (Dom.getElAttributes(element).hasOwnProperty('lang')) { options.language = element.getAttribute('lang'); break; } element = element.parentNode; } } } // Run base component initializing with new options // if the global option object was accidentally blown away by // someone, bail early with an informative error var _this = _possibleConstructorReturn(this, _Component.call(this, null, options, ready)); if (!_this.options_ || !_this.options_.techOrder || !_this.options_.techOrder.length) { throw new Error('No techOrder specified. Did you overwrite ' + 'videojs.options instead of just changing the ' + 'properties you want to override?'); } // Store the original tag used to set options _this.tag = tag; // Store the tag attributes used to restore html5 element _this.tagAttributes = tag && Dom.getElAttributes(tag); // Update current language _this.language(_this.options_.language); // Update Supported Languages if (options.languages) { // Normalise player option languages to lowercase var languagesToLower = {}; Object.getOwnPropertyNames(options.languages).forEach(function (name) { languagesToLower[name.toLowerCase()] = options.languages[name]; }); _this.languages_ = languagesToLower; } else { _this.languages_ = Player.prototype.options_.languages; } // Cache for video property values. _this.cache_ = {}; // Set poster _this.poster_ = options.poster || ''; // Set controls _this.controls_ = !!options.controls; // Original tag settings stored in options // now remove immediately so native controls don't flash. // May be turned back on by HTML5 tech if nativeControlsForTouch is true tag.controls = false; /* * Store the internal state of scrubbing * * @private * @return {Boolean} True if the user is scrubbing */ _this.scrubbing_ = false; _this.el_ = _this.createEl(); // We also want to pass the original player options to each component and plugin // as well so they don't need to reach back into the player for options later. // We also need to do another copy of this.options_ so we don't end up with // an infinite loop. var playerOptionsCopy = (0, _mergeOptions2['default'])(_this.options_); // Load plugins if (options.plugins) { var plugins = options.plugins; Object.getOwnPropertyNames(plugins).forEach(function (name) { if (typeof this[name] === 'function') { this[name](plugins[name]); } else { _log2['default'].error('Unable to find plugin:', name); } }, _this); } _this.options_.playerOptions = playerOptionsCopy; _this.initChildren(); // Set isAudio based on whether or not an audio tag was used _this.isAudio(tag.nodeName.toLowerCase() === 'audio'); // Update controls className. Can't do this when the controls are initially // set because the element doesn't exist yet. if (_this.controls()) { _this.addClass('vjs-controls-enabled'); } else { _this.addClass('vjs-controls-disabled'); } // Set ARIA label and region role depending on player type _this.el_.setAttribute('role', 'region'); if (_this.isAudio()) { _this.el_.setAttribute('aria-label', 'audio player'); } else { _this.el_.setAttribute('aria-label', 'video player'); } if (_this.isAudio()) { _this.addClass('vjs-audio'); } if (_this.flexNotSupported_()) { _this.addClass('vjs-no-flex'); } // TODO: Make this smarter. Toggle user state between touching/mousing // using events, since devices can have both touch and mouse events. // if (browser.TOUCH_ENABLED) { // this.addClass('vjs-touch-enabled'); // } // iOS Safari has broken hover handling if (!browser.IS_IOS) { _this.addClass('vjs-workinghover'); } // Make player easily findable by ID Player.players[_this.id_] = _this; // Add a major version class to aid css in plugins var majorVersion = '5.20.3'.split('.')[0]; _this.addClass('vjs-v' + majorVersion); // When the player is first initialized, trigger activity so components // like the control bar show themselves if needed _this.userActive(true); _this.reportUserActivity(); _this.listenForUserActivity_(); _this.on('fullscreenchange', _this.handleFullscreenChange_); _this.on('stageclick', _this.handleStageClick_); return _this; } /** * Destroys the video player and does any necessary cleanup. * * This is especially helpful if you are dynamically adding and removing videos * to/from the DOM. * * @fires Player#dispose */ Player.prototype.dispose = function dispose() { /** * Called when the player is being disposed of. * * @event Player#dispose * @type {EventTarget~Event} */ this.trigger('dispose'); // prevent dispose from being called twice this.off('dispose'); if (this.styleEl_ && this.styleEl_.parentNode) { this.styleEl_.parentNode.removeChild(this.styleEl_); } // Kill reference to this player Player.players[this.id_] = null; if (this.tag && this.tag.player) { this.tag.player = null; } if (this.el_ && this.el_.player) { this.el_.player = null; } if (this.tech_) { this.tech_.dispose(); } _Component.prototype.dispose.call(this); }; /** * Create the `Player`'s DOM element. * * @return {Element} * The DOM element that gets created. */ Player.prototype.createEl = function createEl() { var tag = this.tag; var el = void 0; var playerElIngest = this.playerElIngest_ = tag.parentNode && tag.parentNode.hasAttribute && tag.parentNode.hasAttribute('data-vjs-player'); if (playerElIngest) { el = this.el_ = tag.parentNode; } else { el = this.el_ = _Component.prototype.createEl.call(this, 'div'); } // set tabindex to -1 so we could focus on the player element tag.setAttribute('tabindex', '-1'); // Remove width/height attrs from tag so CSS can make it 100% width/height tag.removeAttribute('width'); tag.removeAttribute('height'); // Copy over all the attributes from the tag, including ID and class // ID will now reference player box, not the video tag var attrs = Dom.getElAttributes(tag); Object.getOwnPropertyNames(attrs).forEach(function (attr) { // workaround so we don't totally break IE7 // http://stackoverflow.com/questions/3653444/css-styles-not-applied-on-dynamic-elements-in-internet-explorer-7 if (attr === 'class') { el.className += ' ' + attrs[attr]; } else { el.setAttribute(attr, attrs[attr]); } }); // Update tag id/class for use as HTML5 playback tech // Might think we should do this after embedding in container so .vjs-tech class // doesn't flash 100% width/height, but class only applies with .video-js parent tag.playerId = tag.id; tag.id += '_html5_api'; tag.className = 'vjs-tech'; // Make player findable on elements tag.player = el.player = this; // Default state of video is paused this.addClass('vjs-paused'); // Add a style element in the player that we'll use to set the width/height // of the player in a way that's still overrideable by CSS, just like the // video element if (_window2['default'].VIDEOJS_NO_DYNAMIC_STYLE !== true) { this.styleEl_ = stylesheet.createStyleElement('vjs-styles-dimensions'); var defaultsStyleEl = Dom.$('.vjs-styles-defaults'); var head = Dom.$('head'); head.insertBefore(this.styleEl_, defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild); } // Pass in the width/height/aspectRatio options which will update the style el this.width(this.options_.width); this.height(this.options_.height); this.fluid(this.options_.fluid); this.aspectRatio(this.options_.aspectRatio); // Hide any links within the video/audio tag, because IE doesn't hide them completely. var links = tag.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { var linkEl = links.item(i); Dom.addElClass(linkEl, 'vjs-hidden'); linkEl.setAttribute('hidden', 'hidden'); } // insertElFirst seems to cause the networkState to flicker from 3 to 2, so // keep track of the original for later so we can know if the source originally failed tag.initNetworkState_ = tag.networkState; // Wrap video tag in div (el/box) container if (tag.parentNode && !playerElIngest) { tag.parentNode.insertBefore(el, tag); } // insert the tag as the first child of the player element // then manually add it to the children array so that this.addChild // will work properly for other components // // Breaks iPhone, fixed in HTML5 setup. Dom.insertElFirst(tag, el); this.children_.unshift(tag); this.el_ = el; return el; }; /** * A getter/setter for the `Player`'s width. * * @param {number} [value] * The value to set the `Player's width to. * * @return {number} * The current width of the `Player`. */ Player.prototype.width = function width(value) { return this.dimension('width', value); }; /** * A getter/setter for the `Player`'s height. * * @param {number} [value] * The value to set the `Player's heigth to. * * @return {number} * The current heigth of the `Player`. */ Player.prototype.height = function height(value) { return this.dimension('height', value); }; /** * A getter/setter for the `Player`'s width & height. * * @param {string} dimension * This string can be: * - 'width' * - 'height' * * @param {number} [value] * Value for dimension specified in the first argument. * * @return {Player|number} * - Returns itself when setting; method can be chained. * - The dimension arguments value when getting (width/height). */ Player.prototype.dimension = function dimension(_dimension, value) { var privDimension = _dimension + '_'; if (value === undefined) { return this[privDimension] || 0; } if (value === '') { // If an empty string is given, reset the dimension to be automatic this[privDimension] = undefined; } else { var parsedVal = parseFloat(value); if (isNaN(parsedVal)) { _log2['default'].error('Improper value "' + value + '" supplied for for ' + _dimension); return this; } this[privDimension] = parsedVal; } this.updateStyleEl_(); return this; }; /** * A getter/setter/toggler for the vjs-fluid `className` on the `Player`. * * @param {boolean} [bool] * - A value of true adds the class. * - A value of false removes the class. * - No value will toggle the fluid class. * * @return {boolean|undefined} * - The value of fluid when getting. * - `undefined` when setting. */ Player.prototype.fluid = function fluid(bool) { if (bool === undefined) { return !!this.fluid_; } this.fluid_ = !!bool; if (bool) { this.addClass('vjs-fluid'); } else { this.removeClass('vjs-fluid'); } this.updateStyleEl_(); }; /** * Get/Set the aspect ratio * * @param {string} [ratio] * Aspect ratio for player * * @return {string|undefined} * returns the current aspect ratio when getting */ /** * A getter/setter for the `Player`'s aspect ratio. * * @param {string} [ratio] * The value to set the `Player's aspect ratio to. * * @return {string|undefined} * - The current aspect ratio of the `Player` when getting. * - undefined when setting */ Player.prototype.aspectRatio = function aspectRatio(ratio) { if (ratio === undefined) { return this.aspectRatio_; } // Check for width:height format if (!/^\d+\:\d+$/.test(ratio)) { throw new Error('Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.'); } this.aspectRatio_ = ratio; // We're assuming if you set an aspect ratio you want fluid mode, // because in fixed mode you could calculate width and height yourself. this.fluid(true); this.updateStyleEl_(); }; /** * Update styles of the `Player` element (height, width and aspect ratio). * * @private * @listens Tech#loadedmetadata */ Player.prototype.updateStyleEl_ = function updateStyleEl_() { if (_window2['default'].VIDEOJS_NO_DYNAMIC_STYLE === true) { var _width = typeof this.width_ === 'number' ? this.width_ : this.options_.width; var _height = typeof this.height_ === 'number' ? this.height_ : this.options_.height; var techEl = this.tech_ && this.tech_.el(); if (techEl) { if (_width >= 0) { techEl.width = _width; } if (_height >= 0) { techEl.height = _height; } } return; } var width = void 0; var height = void 0; var aspectRatio = void 0; var idClass = void 0; // The aspect ratio is either used directly or to calculate width and height. if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') { // Use any aspectRatio that's been specifically set aspectRatio = this.aspectRatio_; } else if (this.videoWidth() > 0) { // Otherwise try to get the aspect ratio from the video metadata aspectRatio = this.videoWidth() + ':' + this.videoHeight(); } else { // Or use a default. The video element's is 2:1, but 16:9 is more common. aspectRatio = '16:9'; } // Get the ratio as a decimal we can use to calculate dimensions var ratioParts = aspectRatio.split(':'); var ratioMultiplier = ratioParts[1] / ratioParts[0]; if (this.width_ !== undefined) { // Use any width that's been specifically set width = this.width_; } else if (this.height_ !== undefined) { // Or calulate the width from the aspect ratio if a height has been set width = this.height_ / ratioMultiplier; } else { // Or use the video's metadata, or use the video el's default of 300 width = this.videoWidth() || 300; } if (this.height_ !== undefined) { // Use any height that's been specifically set height = this.height_; } else { // Otherwise calculate the height from the ratio and the width height = width * ratioMultiplier; } // Ensure the CSS class is valid by starting with an alpha character if (/^[^a-zA-Z]/.test(this.id())) { idClass = 'dimensions-' + this.id(); } else { idClass = this.id() + '-dimensions'; } // Ensure the right class is still on the player for the style element this.addClass(idClass); stylesheet.setTextContent(this.styleEl_, '\n .' + idClass + ' {\n width: ' + width + 'px;\n height: ' + height + 'px;\n }\n\n .' + idClass + '.vjs-fluid {\n padding-top: ' + ratioMultiplier * 100 + '%;\n }\n '); }; /** * Load/Create an instance of playback {@link Tech} including element * and API methods. Then append the `Tech` element in `Player` as a child. * * @param {string} techName * name of the playback technology * * @param {string} source * video source * * @private */ Player.prototype.loadTech_ = function loadTech_(techName, source) { var _this2 = this; // Pause and remove current playback technology if (this.tech_) { this.unloadTech_(); } // get rid of the HTML5 video tag as soon as we are using another tech if (techName !== 'Html5' && this.tag) { _tech2['default'].getTech('Html5').disposeMediaElement(this.tag); this.tag.player = null; this.tag = null; } this.techName_ = techName; // Turn off API access because we're loading a new tech that might load asynchronously this.isReady_ = false; // Grab tech-specific options from player options and add source and parent element to use. var techOptions = (0, _obj.assign)({ source: source, 'nativeControlsForTouch': this.options_.nativeControlsForTouch, 'playerId': this.id(), 'techId': this.id() + '_' + techName + '_api', 'videoTracks': this.videoTracks_, 'textTracks': this.textTracks_, 'audioTracks': this.audioTracks_, 'autoplay': this.options_.autoplay, 'playsinline': this.options_.playsinline, 'preload': this.options_.preload, 'loop': this.options_.loop, 'muted': this.options_.muted, 'poster': this.poster(), 'language': this.language(), 'playerElIngest': this.playerElIngest_ || false, 'vtt.js': this.options_['vtt.js'] }, this.options_[techName.toLowerCase()]); if (this.tag) { techOptions.tag = this.tag; } if (source) { this.currentType_ = source.type; if (source.src === this.cache_.src && this.cache_.currentTime > 0) { techOptions.startTime = this.cache_.currentTime; } this.cache_.sources = null; this.cache_.source = source; this.cache_.src = source.src; } // Initialize tech instance var TechComponent = _tech2['default'].getTech(techName); // Support old behavior of techs being registered as components. // Remove once that deprecated behavior is removed. if (!TechComponent) { TechComponent = _component2['default'].getComponent(techName); } this.tech_ = new TechComponent(techOptions); // player.triggerReady is always async, so don't need this to be async this.tech_.ready(Fn.bind(this, this.handleTechReady_), true); _textTrackListConverter2['default'].jsonToTextTracks(this.textTracksJson_ || [], this.tech_); // Listen to all HTML5-defined events and trigger them on the player TECH_EVENTS_RETRIGGER.forEach(function (event) { _this2.on(_this2.tech_, event, _this2['handleTech' + (0, _toTitleCase2['default'])(event) + '_']); }); this.on(this.tech_, 'loadstart', this.handleTechLoadStart_); this.on(this.tech_, 'waiting', this.handleTechWaiting_); this.on(this.tech_, 'canplay', this.handleTechCanPlay_); this.on(this.tech_, 'canplaythrough', this.handleTechCanPlayThrough_); this.on(this.tech_, 'playing', this.handleTechPlaying_); this.on(this.tech_, 'ended', this.handleTechEnded_); this.on(this.tech_, 'seeking', this.handleTechSeeking_); this.on(this.tech_, 'seeked', this.handleTechSeeked_); this.on(this.tech_, 'play', this.handleTechPlay_); this.on(this.tech_, 'firstplay', this.handleTechFirstPlay_); this.on(this.tech_, 'pause', this.handleTechPause_); this.on(this.tech_, 'durationchange', this.handleTechDurationChange_); this.on(this.tech_, 'fullscreenchange', this.handleTechFullscreenChange_); this.on(this.tech_, 'error', this.handleTechError_); this.on(this.tech_, 'loadedmetadata', this.updateStyleEl_); this.on(this.tech_, 'posterchange', this.handleTechPosterChange_); this.on(this.tech_, 'textdata', this.handleTechTextData_); this.usingNativeControls(this.techGet_('controls')); if (this.controls() && !this.usingNativeControls()) { this.addTechControlsListeners_(); } // Add the tech element in the DOM if it was not already there // Make sure to not insert the original video element if using Html5 if (this.tech_.el().parentNode !== this.el() && (techName !== 'Html5' || !this.tag)) { Dom.insertElFirst(this.tech_.el(), this.el()); } // Get rid of the original video tag reference after the first tech is loaded if (this.tag) { this.tag.player = null; this.tag = null; } }; /** * Unload and dispose of the current playback {@link Tech}. * * @private */ Player.prototype.unloadTech_ = function unloadTech_() { // Save the current text tracks so that we can reuse the same text tracks with the next tech this.videoTracks_ = this.videoTracks(); this.textTracks_ = this.textTracks(); this.audioTracks_ = this.audioTracks(); this.textTracksJson_ = _textTrackListConverter2['default'].textTracksToJson(this.tech_); this.isReady_ = false; this.tech_.dispose(); this.tech_ = false; }; /** * Return a reference to the current {@link Tech}, but only if given an object with the * `IWillNotUseThisInPlugins` property having a true value. This is try and prevent misuse * of techs by plugins. * * @param {Object} safety * An object that must contain `{IWillNotUseThisInPlugins: true}` * * @param {boolean} safety.IWillNotUseThisInPlugins * Must be set to true or else this function will throw an error. * * @return {Tech} * The Tech */ Player.prototype.tech = function tech(safety) { if (safety && safety.IWillNotUseThisInPlugins) { return this.tech_; } var errorText = '\n Please make sure that you are not using this inside of a plugin.\n To disable this alert and error, please pass in an object with\n `IWillNotUseThisInPlugins` to the `tech` method. See\n https://github.com/videojs/video.js/issues/2617 for more info.\n '; _window2['default'].alert(errorText); throw new Error(errorText); }; /** * Set up click and touch listeners for the playback element * * - On desktops: a click on the video itself will toggle playback * - On mobile devices: a click on the video toggles controls * which is done by toggling the user state between active and * inactive * - A tap can signal that a user has become active or has become inactive * e.g. a quick tap on an iPhone movie should reveal the controls. Another * quick tap should hide them again (signaling the user is in an inactive * viewing state) * - In addition to this, we still want the user to be considered inactive after * a few seconds of inactivity. * * > Note: the only part of iOS interaction we can't mimic with this setup * is a touch and hold on the video element counting as activity in order to * keep the controls showing, but that shouldn't be an issue. A touch and hold * on any controls will still keep the user active * * @private */ Player.prototype.addTechControlsListeners_ = function addTechControlsListeners_() { // Make sure to remove all the previous listeners in case we are called multiple times. this.removeTechControlsListeners_(); // Some browsers (Chrome & IE) don't trigger a click on a flash swf, but do // trigger mousedown/up. // http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object // Any touch events are set to block the mousedown event from happening this.on(this.tech_, 'mousedown', this.handleTechClick_); // If the controls were hidden we don't want that to change without a tap event // so we'll check if the controls were already showing before reporting user // activity this.on(this.tech_, 'touchstart', this.handleTechTouchStart_); this.on(this.tech_, 'touchmove', this.handleTechTouchMove_); this.on(this.tech_, 'touchend', this.handleTechTouchEnd_); // The tap listener needs to come after the touchend listener because the tap // listener cancels out any reportedUserActivity when setting userActive(false) this.on(this.tech_, 'tap', this.handleTechTap_); }; /** * Remove the listeners used for click and tap controls. This is needed for * toggling to controls disabled, where a tap/touch should do nothing. * * @private */ Player.prototype.removeTechControlsListeners_ = function removeTechControlsListeners_() { // We don't want to just use `this.off()` because there might be other needed // listeners added by techs that extend this. this.off(this.tech_, 'tap', this.handleTechTap_); this.off(this.tech_, 'touchstart', this.handleTechTouchStart_); this.off(this.tech_, 'touchmove', this.handleTechTouchMove_); this.off(this.tech_, 'touchend', this.handleTechTouchEnd_); this.off(this.tech_, 'mousedown', this.handleTechClick_); }; /** * Player waits for the tech to be ready * * @private */ Player.prototype.handleTechReady_ = function handleTechReady_() { this.triggerReady(); // Keep the same volume as before if (this.cache_.volume) { this.techCall_('setVolume', this.cache_.volume); } // Look if the tech found a higher resolution poster while loading this.handleTechPosterChange_(); // Update the duration if available this.handleTechDurationChange_(); // Chrome and Safari both have issues with autoplay. // In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work. // In Chrome (15), if you have autoplay + a poster + no controls, the video gets hidden (but audio plays) // This fixes both issues. Need to wait for API, so it updates displays correctly if ((this.src() || this.currentSrc()) && this.tag && this.options_.autoplay && this.paused()) { try { // Chrome Fix. Fixed in Chrome v16. delete this.tag.poster; } catch (e) { (0, _log2['default'])('deleting tag.poster throws in some browsers', e); } this.play(); } }; /** * Retrigger the `loadstart` event that was triggered by the {@link Tech}. This * function will also trigger {@link Player#firstplay} if it is the first loadstart * for a video. * * @fires Player#loadstart * @fires Player#firstplay * @listens Tech#loadstart * @private */ Player.prototype.handleTechLoadStart_ = function handleTechLoadStart_() { // TODO: Update to use `emptied` event instead. See #1277. this.removeClass('vjs-ended'); this.removeClass('vjs-seeking'); // reset the error state this.error(null); // If it's already playing we want to trigger a firstplay event now. // The firstplay event relies on both the play and loadstart events // which can happen in any order for a new source if (!this.paused()) { /** * Fired when the user agent begins looking for media data * * @event Player#loadstart * @type {EventTarget~Event} */ this.trigger('loadstart'); this.trigger('firstplay'); } else { // reset the hasStarted state this.hasStarted(false); this.trigger('loadstart'); } }; /** * Add/remove the vjs-has-started class * * @fires Player#firstplay * * @param {boolean} hasStarted * - true: adds the class * - false: remove the class * * @return {boolean} * the boolean value of hasStarted */ Player.prototype.hasStarted = function hasStarted(_hasStarted) { if (_hasStarted !== undefined) { // only update if this is a new value if (this.hasStarted_ !== _hasStarted) { this.hasStarted_ = _hasStarted; if (_hasStarted) { this.addClass('vjs-has-started'); // trigger the firstplay event if this newly has played this.trigger('firstplay'); } else { this.removeClass('vjs-has-started'); } } return this; } return !!this.hasStarted_; }; /** * Fired whenever the media begins or resumes playback * * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play} * @fires Player#play * @listens Tech#play * @private */ Player.prototype.handleTechPlay_ = function handleTechPlay_() { this.removeClass('vjs-ended'); this.removeClass('vjs-paused'); this.addClass('vjs-playing'); // hide the poster when the user hits play this.hasStarted(true); /** * Triggered whenever an {@link Tech#play} event happens. Indicates that * playback has started or resumed. * * @event Player#play * @type {EventTarget~Event} */ this.trigger('play'); }; /** * Retrigger the `waiting` event that was triggered by the {@link Tech}. * * @fires Player#waiting * @listens Tech#waiting * @private */ Player.prototype.handleTechWaiting_ = function handleTechWaiting_() { var _this3 = this; this.addClass('vjs-waiting'); /** * A readyState change on the DOM element has caused playback to stop. * * @event Player#waiting * @type {EventTarget~Event} */ this.trigger('waiting'); this.one('timeupdate', function () { return _this3.removeClass('vjs-waiting'); }); }; /** * Retrigger the `canplay` event that was triggered by the {@link Tech}. * > Note: This is not consistent between browsers. See #1351 * * @fires Player#canplay * @listens Tech#canplay * @private */ Player.prototype.handleTechCanPlay_ = function handleTechCanPlay_() { this.removeClass('vjs-waiting'); /** * The media has a readyState of HAVE_FUTURE_DATA or greater. * * @event Player#canplay * @type {EventTarget~Event} */ this.trigger('canplay'); }; /** * Retrigger the `canplaythrough` event that was triggered by the {@link Tech}. * * @fires Player#canplaythrough * @listens Tech#canplaythrough * @private */ Player.prototype.handleTechCanPlayThrough_ = function handleTechCanPlayThrough_() { this.removeClass('vjs-waiting'); /** * The media has a readyState of HAVE_ENOUGH_DATA or greater. This means that the * entire media file can be played without buffering. * * @event Player#canplaythrough * @type {EventTarget~Event} */ this.trigger('canplaythrough'); }; /** * Retrigger the `playing` event that was triggered by the {@link Tech}. * * @fires Player#playing * @listens Tech#playing * @private */ Player.prototype.handleTechPlaying_ = function handleTechPlaying_() { this.removeClass('vjs-waiting'); /** * The media is no longer blocked from playback, and has started playing. * * @event Player#playing * @type {EventTarget~Event} */ this.trigger('playing'); }; /** * Retrigger the `seeking` event that was triggered by the {@link Tech}. * * @fires Player#seeking * @listens Tech#seeking * @private */ Player.prototype.handleTechSeeking_ = function handleTechSeeking_() { this.addClass('vjs-seeking'); /** * Fired whenever the player is jumping to a new time * * @event Player#seeking * @type {EventTarget~Event} */ this.trigger('seeking'); }; /** * Retrigger the `seeked` event that was triggered by the {@link Tech}. * * @fires Player#seeked * @listens Tech#seeked * @private */ Player.prototype.handleTechSeeked_ = function handleTechSeeked_() { this.removeClass('vjs-seeking'); /** * Fired when the player has finished jumping to a new time * * @event Player#seeked * @type {EventTarget~Event} */ this.trigger('seeked'); }; /** * Retrigger the `firstplay` event that was triggered by the {@link Tech}. * * @fires Player#firstplay * @listens Tech#firstplay * @deprecated As of 6.0 passing the `starttime` option to the player will be deprecated * @private */ Player.prototype.handleTechFirstPlay_ = function handleTechFirstPlay_() { // If the first starttime attribute is specified // then we will start at the given offset in seconds if (this.options_.starttime) { _log2['default'].warn('Passing the `starttime` option to the player will be deprecated in 6.0'); this.currentTime(this.options_.starttime); } this.addClass('vjs-has-started'); /** * Fired the first time a video is played. Not part of the HLS spec, and this is * probably not the best implementation yet, so use sparingly. If you don't have a * reason to prevent playback, use `myPlayer.one('play');` instead. * * @event Player#firstplay * @type {EventTarget~Event} */ this.trigger('firstplay'); }; /** * Retrigger the `pause` event that was triggered by the {@link Tech}. * * @fires Player#pause * @listens Tech#pause * @private */ Player.prototype.handleTechPause_ = function handleTechPause_() { this.removeClass('vjs-playing'); this.addClass('vjs-paused'); /** * Fired whenever the media has been paused * * @event Player#pause * @type {EventTarget~Event} */ this.trigger('pause'); }; /** * Retrigger the `ended` event that was triggered by the {@link Tech}. * * @fires Player#ended * @listens Tech#ended * @private */ Player.prototype.handleTechEnded_ = function handleTechEnded_() { this.addClass('vjs-ended'); if (this.options_.loop) { this.currentTime(0); this.play(); } else if (!this.paused()) { this.pause(); } /** * Fired when the end of the media resource is reached (currentTime == duration) * * @event Player#ended * @type {EventTarget~Event} */ this.trigger('ended'); }; /** * Fired when the duration of the media resource is first known or changed * * @listens Tech#durationchange * @private */ Player.prototype.handleTechDurationChange_ = function handleTechDurationChange_() { this.duration(this.techGet_('duration')); }; /** * Handle a click on the media element to play/pause * * @param {EventTarget~Event} event * the event that caused this function to trigger * * @listens Tech#mousedown * @private */ Player.prototype.handleTechClick_ = function handleTechClick_(event) { // We're using mousedown to detect clicks thanks to Flash, but mousedown // will also be triggered with right-clicks, so we need to prevent that if (event.button !== 0) { return; } // When controls are disabled a click should not toggle playback because // the click is considered a control if (this.controls()) { if (this.paused()) { this.play(); } else { this.pause(); } } }; /** * Handle a tap on the media element. It will toggle the user * activity state, which hides and shows the controls. * * @listens Tech#tap * @private */ Player.prototype.handleTechTap_ = function handleTechTap_() { this.userActive(!this.userActive()); }; /** * Handle touch to start * * @listens Tech#touchstart * @private */ Player.prototype.handleTechTouchStart_ = function handleTechTouchStart_() { this.userWasActive = this.userActive(); }; /** * Handle touch to move * * @listens Tech#touchmove * @private */ Player.prototype.handleTechTouchMove_ = function handleTechTouchMove_() { if (this.userWasActive) { this.reportUserActivity(); } }; /** * Handle touch to end * * @param {EventTarget~Event} event * the touchend event that triggered * this function * * @listens Tech#touchend * @private */ Player.prototype.handleTechTouchEnd_ = function handleTechTouchEnd_(event) { // Stop the mouse events from also happening event.preventDefault(); }; /** * Fired when the player switches in or out of fullscreen mode * * @private * @listens Player#fullscreenchange */ Player.prototype.handleFullscreenChange_ = function handleFullscreenChange_() { if (this.isFullscreen()) { this.addClass('vjs-fullscreen'); } else { this.removeClass('vjs-fullscreen'); } }; /** * native click events on the SWF aren't triggered on IE11, Win8.1RT * use stageclick events triggered from inside the SWF instead * * @private * @listens stageclick */ Player.prototype.handleStageClick_ = function handleStageClick_() { this.reportUserActivity(); }; /** * Handle Tech Fullscreen Change * * @param {EventTarget~Event} event * the fullscreenchange event that triggered this function * * @param {Object} data * the data that was sent with the event * * @private * @listens Tech#fullscreenchange * @fires Player#fullscreenchange */ Player.prototype.handleTechFullscreenChange_ = function handleTechFullscreenChange_(event, data) { if (data) { this.isFullscreen(data.isFullscreen); } /** * Fired when going in and out of fullscreen. * * @event Player#fullscreenchange * @type {EventTarget~Event} */ this.trigger('fullscreenchange'); }; /** * Fires when an error occurred during the loading of an audio/video. * * @private * @listens Tech#error */ Player.prototype.handleTechError_ = function handleTechError_() { var error = this.tech_.error(); this.error(error); }; /** * Retrigger the `textdata` event that was triggered by the {@link Tech}. * * @fires Player#textdata * @listens Tech#textdata * @private */ Player.prototype.handleTechTextData_ = function handleTechTextData_() { var data = null; if (arguments.length > 1) { data = arguments[1]; } /** * Fires when we get a textdata event from tech * * @event Player#textdata * @type {EventTarget~Event} */ this.trigger('textdata', data); }; /** * Get object for cached values. * * @return {Object} * get the current object cache */ Player.prototype.getCache = function getCache() { return this.cache_; }; /** * Pass values to the playback tech * * @param {string} [method] * the method to call * * @param {Object} arg * the argument to pass * * @private */ Player.prototype.techCall_ = function techCall_(method, arg) { // If it's not ready yet, call method when it is if (this.tech_ && !this.tech_.isReady_) { this.tech_.ready(function () { this[method](arg); }, true); // Otherwise call method now } else { try { if (this.tech_) { this.tech_[method](arg); } } catch (e) { (0, _log2['default'])(e); throw e; } } }; /** * Get calls can't wait for the tech, and sometimes don't need to. * * @param {string} method * Tech method * * @return {Function|undefined} * the method or undefined * * @private */ Player.prototype.techGet_ = function techGet_(method) { if (this.tech_ && this.tech_.isReady_) { // Flash likes to die and reload when you hide or reposition it. // In these cases the object methods go away and we get errors. // When that happens we'll catch the errors and inform tech that it's not ready any more. try { return this.tech_[method](); } catch (e) { // When building additional tech libs, an expected method may not be defined yet if (this.tech_[method] === undefined) { (0, _log2['default'])('Video.js: ' + method + ' method not defined for ' + this.techName_ + ' playback technology.', e); // When a method isn't available on the object it throws a TypeError } else if (e.name === 'TypeError') { (0, _log2['default'])('Video.js: ' + method + ' unavailable on ' + this.techName_ + ' playback technology element.', e); this.tech_.isReady_ = false; } else { (0, _log2['default'])(e); } throw e; } } return; }; /** * start media playback * * @return {Player} * A reference to the player object this function was called on */ Player.prototype.play = function play() { // Only calls the tech's play if we already have a src loaded if (this.src() || this.currentSrc()) { this.techCall_('play'); } else { this.tech_.one('loadstart', function () { this.play(); }); } return this; }; /** * Pause the video playback * * @return {Player} * A reference to the player object this function was called on */ Player.prototype.pause = function pause() { this.techCall_('pause'); return this; }; /** * Check if the player is paused or has yet to play * * @return {boolean} * - false: if the media is currently playing * - true: if media is not currently playing */ Player.prototype.paused = function paused() { // The initial state of paused should be true (in Safari it's actually false) return this.techGet_('paused') === false ? false : true; }; /** * Returns whether or not the user is "scrubbing". Scrubbing is * when the user has clicked the progress bar handle and is * dragging it along the progress bar. * * @param {boolean} [isScrubbing] * wether the user is or is not scrubbing * * @return {boolean|Player} * A instance of the player that called this function when setting, * and the value of scrubbing when getting */ Player.prototype.scrubbing = function scrubbing(isScrubbing) { if (isScrubbing !== undefined) { this.scrubbing_ = !!isScrubbing; if (isScrubbing) { this.addClass('vjs-scrubbing'); } else { this.removeClass('vjs-scrubbing'); } return this; } return this.scrubbing_; }; /** * Get or set the current time (in seconds) * * @param {number|string} [seconds] * The time to seek to in seconds * * @return {Player|number} * - the current time in seconds when getting * - a reference to the current player object when setting */ Player.prototype.currentTime = function currentTime(seconds) { if (seconds !== undefined) { this.techCall_('setCurrentTime', seconds); return this; } // cache last currentTime and return. default to 0 seconds // // Caching the currentTime is meant to prevent a massive amount of reads on the tech's // currentTime when scrubbing, but may not provide much performance benefit afterall. // Should be tested. Also something has to read the actual current time or the cache will // never get updated. this.cache_.currentTime = this.techGet_('currentTime') || 0; return this.cache_.currentTime; }; /** * Normally gets the length in time of the video in seconds; * in all but the rarest use cases an argument will NOT be passed to the method * * > **NOTE**: The video must have started loading before the duration can be * known, and in the case of Flash, may not be known until the video starts * playing. * * @fires Player#durationchange * * @param {number} [seconds] * The duration of the video to set in seconds * * @return {number|Player} * - The duration of the video in seconds when getting * - A reference to the player that called this function * when setting */ Player.prototype.duration = function duration(seconds) { if (seconds === undefined) { // return NaN if the duration is not known return this.cache_.duration !== undefined ? this.cache_.duration : NaN; } seconds = parseFloat(seconds); // Standardize on Inifity for signaling video is live if (seconds < 0) { seconds = Infinity; } if (seconds !== this.cache_.duration) { // Cache the last set value for optimized scrubbing (esp. Flash) this.cache_.duration = seconds; if (seconds === Infinity) { this.addClass('vjs-live'); } else { this.removeClass('vjs-live'); } /** * @event Player#durationchange * @type {EventTarget~Event} */ this.trigger('durationchange'); } return this; }; /** * Calculates how much time is left in the video. Not part * of the native video API. * * @return {number} * The time remaining in seconds */ Player.prototype.remainingTime = function remainingTime() { return this.duration() - this.currentTime(); }; // // Kind of like an array of portions of the video that have been downloaded. /** * Get a TimeRange object with an array of the times of the video * that have been downloaded. If you just want the percent of the * video that's been downloaded, use bufferedPercent. * * @see [Buffered Spec]{@link http://dev.w3.org/html5/spec/video.html#dom-media-buffered} * * @return {TimeRange} * A mock TimeRange object (following HTML spec) */ Player.prototype.buffered = function buffered() { var buffered = this.techGet_('buffered'); if (!buffered || !buffered.length) { buffered = (0, _timeRanges.createTimeRange)(0, 0); } return buffered; }; /** * Get the percent (as a decimal) of the video that's been downloaded. * This method is not a part of the native HTML video API. * * @return {number} * A decimal between 0 and 1 representing the percent * that is bufferred 0 being 0% and 1 being 100% */ Player.prototype.bufferedPercent = function bufferedPercent() { return (0, _buffer.bufferedPercent)(this.buffered(), this.duration()); }; /** * Get the ending time of the last buffered time range * This is used in the progress bar to encapsulate all time ranges. * * @return {number} * The end of the last buffered time range */ Player.prototype.bufferedEnd = function bufferedEnd() { var buffered = this.buffered(); var duration = this.duration(); var end = buffered.end(buffered.length - 1); if (end > duration) { end = duration; } return end; }; /** * Get or set the current volume of the media * * @param {number} [percentAsDecimal] * The new volume as a decimal percent: * - 0 is muted/0%/off * - 1.0 is 100%/full * - 0.5 is half volume or 50% * * @return {Player|number} * a reference to the calling player when setting and the * current volume as a percent when getting */ Player.prototype.volume = function volume(percentAsDecimal) { var vol = void 0; if (percentAsDecimal !== undefined) { // Force value to between 0 and 1 vol = Math.max(0, Math.min(1, parseFloat(percentAsDecimal))); this.cache_.volume = vol; this.techCall_('setVolume', vol); return this; } // Default to 1 when returning current volume. vol = parseFloat(this.techGet_('volume')); return isNaN(vol) ? 1 : vol; }; /** * Get the current muted state, or turn mute on or off * * @param {boolean} [muted] * - true to mute * - false to unmute * * @return {boolean|Player} * - true if mute is on and getting * - false if mute is off and getting * - A reference to the current player when setting */ Player.prototype.muted = function muted(_muted) { if (_muted !== undefined) { this.techCall_('setMuted', _muted); return this; } return this.techGet_('muted') || false; }; /** * Check if current tech can support native fullscreen * (e.g. with built in controls like iOS, so not our flash swf) * * @return {boolean} * if native fullscreen is supported */ Player.prototype.supportsFullScreen = function supportsFullScreen() { return this.techGet_('supportsFullScreen') || false; }; /** * Check if the player is in fullscreen mode or tell the player that it * is or is not in fullscreen mode. * * > NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official * property and instead document.fullscreenElement is used. But isFullscreen is * still a valuable property for internal player workings. * * @param {boolean} [isFS] * Set the players current fullscreen state * * @return {boolean|Player} * - true if fullscreen is on and getting * - false if fullscreen is off and getting * - A reference to the current player when setting */ Player.prototype.isFullscreen = function isFullscreen(isFS) { if (isFS !== undefined) { this.isFullscreen_ = !!isFS; return this; } return !!this.isFullscreen_; }; /** * Increase the size of the video to full screen * In some browsers, full screen is not supported natively, so it enters * "full window mode", where the video fills the browser window. * In browsers and devices that support native full screen, sometimes the * browser's default controls will be shown, and not the Video.js custom skin. * This includes most mobile devices (iOS, Android) and older versions of * Safari. * * @fires Player#fullscreenchange * @return {Player} * A reference to the current player */ Player.prototype.requestFullscreen = function requestFullscreen() { var fsApi = _fullscreenApi2['default']; this.isFullscreen(true); if (fsApi.requestFullscreen) { // the browser supports going fullscreen at the element level so we can // take the controls fullscreen as well as the video // Trigger fullscreenchange event after change // We have to specifically add this each time, and remove // when canceling fullscreen. Otherwise if there's multiple // players on a page, they would all be reacting to the same fullscreen // events Events.on(_document2['default'], fsApi.fullscreenchange, Fn.bind(this, function documentFullscreenChange(e) { this.isFullscreen(_document2['default'][fsApi.fullscreenElement]); // If cancelling fullscreen, remove event listener. if (this.isFullscreen() === false) { Events.off(_document2['default'], fsApi.fullscreenchange, documentFullscreenChange); } /** * @event Player#fullscreenchange * @type {EventTarget~Event} */ this.trigger('fullscreenchange'); })); this.el_[fsApi.requestFullscreen](); } else if (this.tech_.supportsFullScreen()) { // we can't take the video.js controls fullscreen but we can go fullscreen // with native controls this.techCall_('enterFullScreen'); } else { // fullscreen isn't supported so we'll just stretch the video element to // fill the viewport this.enterFullWindow(); /** * @event Player#fullscreenchange * @type {EventTarget~Event} */ this.trigger('fullscreenchange'); } return this; }; /** * Return the video to its normal size after having been in full screen mode * * @fires Player#fullscreenchange * * @return {Player} * A reference to the current player */ Player.prototype.exitFullscreen = function exitFullscreen() { var fsApi = _fullscreenApi2['default']; this.isFullscreen(false); // Check for browser element fullscreen support if (fsApi.requestFullscreen) { _document2['default'][fsApi.exitFullscreen](); } else if (this.tech_.supportsFullScreen()) { this.techCall_('exitFullScreen'); } else { this.exitFullWindow(); /** * @event Player#fullscreenchange * @type {EventTarget~Event} */ this.trigger('fullscreenchange'); } return this; }; /** * When fullscreen isn't supported we can stretch the * video container to as wide as the browser will let us. * * @fires Player#enterFullWindow */ Player.prototype.enterFullWindow = function enterFullWindow() { this.isFullWindow = true; // Storing original doc overflow value to return to when fullscreen is off this.docOrigOverflow = _document2['default'].documentElement.style.overflow; // Add listener for esc key to exit fullscreen Events.on(_document2['default'], 'keydown', Fn.bind(this, this.fullWindowOnEscKey)); // Hide any scroll bars _document2['default'].documentElement.style.overflow = 'hidden'; // Apply fullscreen styles Dom.addElClass(_document2['default'].body, 'vjs-full-window'); /** * @event Player#enterFullWindow * @type {EventTarget~Event} */ this.trigger('enterFullWindow'); }; /** * Check for call to either exit full window or * full screen on ESC key * * @param {string} event * Event to check for key press */ Player.prototype.fullWindowOnEscKey = function fullWindowOnEscKey(event) { if (event.keyCode === 27) { if (this.isFullscreen() === true) { this.exitFullscreen(); } else { this.exitFullWindow(); } } }; /** * Exit full window * * @fires Player#exitFullWindow */ Player.prototype.exitFullWindow = function exitFullWindow() { this.isFullWindow = false; Events.off(_document2['default'], 'keydown', this.fullWindowOnEscKey); // Unhide scroll bars. _document2['default'].documentElement.style.overflow = this.docOrigOverflow; // Remove fullscreen styles Dom.removeElClass(_document2['default'].body, 'vjs-full-window'); // Resize the box, controller, and poster to original sizes // this.positionAll(); /** * @event Player#exitFullWindow * @type {EventTarget~Event} */ this.trigger('exitFullWindow'); }; /** * Check whether the player can play a given mimetype * * @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype * * @param {string} type * The mimetype to check * * @return {string} * 'probably', 'maybe', or '' (empty string) */ Player.prototype.canPlayType = function canPlayType(type) { var can = void 0; // Loop through each playback technology in the options order for (var i = 0, j = this.options_.techOrder; i < j.length; i++) { var techName = (0, _toTitleCase2['default'])(j[i]); var tech = _tech2['default'].getTech(techName); // Support old behavior of techs being registered as components. // Remove once that deprecated behavior is removed. if (!tech) { tech = _component2['default'].getComponent(techName); } // Check if the current tech is defined before continuing if (!tech) { _log2['default'].error('The "' + techName + '" tech is undefined. Skipped browser support check for that tech.'); continue; } // Check if the browser supports this technology if (tech.isSupported()) { can = tech.canPlayType(type); if (can) { return can; } } } return ''; }; /** * Select source based on tech-order or source-order * Uses source-order selection if `options.sourceOrder` is truthy. Otherwise, * defaults to tech-order selection * * @param {Array} sources * The sources for a media asset * * @return {Object|boolean} * Object of source and tech order or false */ Player.prototype.selectSource = function selectSource(sources) { var _this4 = this; // Get only the techs specified in `techOrder` that exist and are supported by the // current platform var techs = this.options_.techOrder.map(_toTitleCase2['default']).map(function (techName) { // `Component.getComponent(...)` is for support of old behavior of techs // being registered as components. // Remove once that deprecated behavior is removed. return [techName, _tech2['default'].getTech(techName) || _component2['default'].getComponent(techName)]; }).filter(function (_ref) { var techName = _ref[0], tech = _ref[1]; // Check if the current tech is defined before continuing if (tech) { // Check if the browser supports this technology return tech.isSupported(); } _log2['default'].error('The "' + techName + '" tech is undefined. Skipped browser support check for that tech.'); return false; }); // Iterate over each `innerArray` element once per `outerArray` element and execute // `tester` with both. If `tester` returns a non-falsy value, exit early and return // that value. var findFirstPassingTechSourcePair = function findFirstPassingTechSourcePair(outerArray, innerArray, tester) { var found = void 0; outerArray.some(function (outerChoice) { return innerArray.some(function (innerChoice) { found = tester(outerChoice, innerChoice); if (found) { return true; } }); }); return found; }; var foundSourceAndTech = void 0; var flip = function flip(fn) { return function (a, b) { return fn(b, a); }; }; var finder = function finder(_ref2, source) { var techName = _ref2[0], tech = _ref2[1]; if (tech.canPlaySource(source, _this4.options_[techName.toLowerCase()])) { return { source: source, tech: techName }; } }; // Depending on the truthiness of `options.sourceOrder`, we swap the order of techs and sources // to select from them based on their priority. if (this.options_.sourceOrder) { // Source-first ordering foundSourceAndTech = findFirstPassingTechSourcePair(sources, techs, flip(finder)); } else { // Tech-first ordering foundSourceAndTech = findFirstPassingTechSourcePair(techs, sources, finder); } return foundSourceAndTech || false; }; /** * The source function updates the video source * There are three types of variables you can pass as the argument. * **URL string**: A URL to the the video file. Use this method if you are sure * the current playback technology (HTML5/Flash) can support the source you * provide. Currently only MP4 files can be used in both HTML5 and Flash. * * @param {Tech~SourceObject|Tech~SourceObject[]} [source] * One SourceObject or an array of SourceObjects * * @return {string|Player} * - The current video source when getting * - The player when setting */ Player.prototype.src = function src(source) { if (source === undefined) { return this.techGet_('src'); } var currentTech = _tech2['default'].getTech(this.techName_); // Support old behavior of techs being registered as components. // Remove once that deprecated behavior is removed. if (!currentTech) { currentTech = _component2['default'].getComponent(this.techName_); } // case: Array of source objects to choose from and pick the best to play if (Array.isArray(source)) { this.sourceList_(source); // case: URL String (http://myvideo...) } else if (typeof source === 'string') { // create a source object from the string this.src({ src: source }); // case: Source object { src: '', type: '' ... } } else if (source instanceof Object) { // check if the source has a type and the loaded tech cannot play the source // if there's no type we'll just try the current tech if (source.type && !currentTech.canPlaySource(source, this.options_[this.techName_.toLowerCase()])) { // create a source list with the current source and send through // the tech loop to check for a compatible technology this.sourceList_([source]); } else { this.cache_.sources = null; this.cache_.source = source; this.cache_.src = source.src; this.currentType_ = source.type || ''; // wait until the tech is ready to set the source this.ready(function () { // The setSource tech method was added with source handlers // so older techs won't support it // We need to check the direct prototype for the case where subclasses // of the tech do not support source handlers if (currentTech.prototype.hasOwnProperty('setSource')) { this.techCall_('setSource', source); } else { this.techCall_('src', source.src); } if (this.options_.preload === 'auto') { this.load(); } if (this.options_.autoplay) { this.play(); } // Set the source synchronously if possible (#2326) }, true); } } return this; }; /** * Handle an array of source objects * * @param {Tech~SourceObject[]} sources * Array of source objects * * @private */ Player.prototype.sourceList_ = function sourceList_(sources) { var sourceTech = this.selectSource(sources); if (sourceTech) { if (sourceTech.tech === this.techName_) { // if this technology is already loaded, set the source this.src(sourceTech.source); } else { // load this technology with the chosen source this.loadTech_(sourceTech.tech, sourceTech.source); } this.cache_.sources = sources; } else { // We need to wrap this in a timeout to give folks a chance to add error event handlers this.setTimeout(function () { this.error({ code: 4, message: this.localize(this.options_.notSupportedMessage) }); }, 0); // we could not find an appropriate tech, but let's still notify the delegate that this is it // this needs a better comment about why this is needed this.triggerReady(); } }; /** * Begin loading the src data. * * @return {Player} * A reference to the player */ Player.prototype.load = function load() { this.techCall_('load'); return this; }; /** * Reset the player. Loads the first tech in the techOrder, * and calls `reset` on the tech`. * * @return {Player} * A reference to the player */ Player.prototype.reset = function reset() { this.loadTech_((0, _toTitleCase2['default'])(this.options_.techOrder[0]), null); this.techCall_('reset'); return this; }; /** * Returns all of the current source objects. * * @return {Tech~SourceObject[]} * The current source objects */ Player.prototype.currentSources = function currentSources() { var source = this.currentSource(); var sources = []; // assume `{}` or `{ src }` if (Object.keys(source).length !== 0) { sources.push(source); } return this.cache_.sources || sources; }; /** * Returns the current source object. * * @return {Tech~SourceObject} * The current source object */ Player.prototype.currentSource = function currentSource() { var source = {}; var src = this.currentSrc(); if (src) { source.src = src; } return this.cache_.source || source; }; /** * Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4 * Can be used in conjuction with `currentType` to assist in rebuilding the current source object. * * @return {string} * The current source */ Player.prototype.currentSrc = function currentSrc() { return this.techGet_('currentSrc') || this.cache_.src || ''; }; /** * Get the current source type e.g. video/mp4 * This can allow you rebuild the current source object so that you could load the same * source and tech later * * @return {string} * The source MIME type */ Player.prototype.currentType = function currentType() { return this.currentType_ || ''; }; /** * Get or set the preload attribute * * @param {boolean} [value] * - true means that we should preload * - false maens that we should not preload * * @return {string|Player} * - the preload attribute value when getting * - the player when setting */ Player.prototype.preload = function preload(value) { if (value !== undefined) { this.techCall_('setPreload', value); this.options_.preload = value; return this; } return this.techGet_('preload'); }; /** * Get or set the autoplay attribute. * * @param {boolean} [value] * - true means that we should autoplay * - false maens that we should not autoplay * * @return {string|Player} * - the current value of autoplay * - the player when setting */ Player.prototype.autoplay = function autoplay(value) { if (value !== undefined) { this.techCall_('setAutoplay', value); this.options_.autoplay = value; return this; } return this.techGet_('autoplay', value); }; /** * Set or unset the playsinline attribute. * Playsinline tells the browser that non-fullscreen playback is preferred. * * @param {boolean} [value] * - true means that we should try to play inline by default * - false means that we should use the browser's default playback mode, * which in most cases is inline. iOS Safari is a notable exception * and plays fullscreen by default. * * @return {string|Player} * - the current value of playsinline * - the player when setting * * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline} */ Player.prototype.playsinline = function playsinline(value) { if (value !== undefined) { this.techCall_('setPlaysinline', value); this.options_.playsinline = value; return this; } return this.techGet_('playsinline'); }; /** * Get or set the loop attribute on the video element. * * @param {boolean} [value] * - true means that we should loop the video * - false means that we should not loop the video * * @return {string|Player} * - the current value of loop when getting * - the player when setting */ Player.prototype.loop = function loop(value) { if (value !== undefined) { this.techCall_('setLoop', value); this.options_.loop = value; return this; } return this.techGet_('loop'); }; /** * Get or set the poster image source url * * @fires Player#posterchange * * @param {string} [src] * Poster image source URL * * @return {string|Player} * - the current value of poster when getting * - the player when setting */ Player.prototype.poster = function poster(src) { if (src === undefined) { return this.poster_; } // The correct way to remove a poster is to set as an empty string // other falsey values will throw errors if (!src) { src = ''; } // update the internal poster variable this.poster_ = src; // update the tech's poster this.techCall_('setPoster', src); // alert components that the poster has been set /** * This event fires when the poster image is changed on the player. * * @event Player#posterchange * @type {EventTarget~Event} */ this.trigger('posterchange'); return this; }; /** * Some techs (e.g. YouTube) can provide a poster source in an * asynchronous way. We want the poster component to use this * poster source so that it covers up the tech's controls. * (YouTube's play button). However we only want to use this * soruce if the player user hasn't set a poster through * the normal APIs. * * @fires Player#posterchange * @listens Tech#posterchange * @private */ Player.prototype.handleTechPosterChange_ = function handleTechPosterChange_() { if (!this.poster_ && this.tech_ && this.tech_.poster) { this.poster_ = this.tech_.poster() || ''; // Let components know the poster has changed this.trigger('posterchange'); } }; /** * Get or set whether or not the controls are showing. * * @fires Player#controlsenabled * * @param {boolean} [bool] * - true to turn controls on * - false to turn controls off * * @return {boolean|Player} * - the current value of controls when getting * - the player when setting */ Player.prototype.controls = function controls(bool) { if (bool !== undefined) { bool = !!bool; // Don't trigger a change event unless it actually changed if (this.controls_ !== bool) { this.controls_ = bool; if (this.usingNativeControls()) { this.techCall_('setControls', bool); } if (bool) { this.removeClass('vjs-controls-disabled'); this.addClass('vjs-controls-enabled'); /** * @event Player#controlsenabled * @type {EventTarget~Event} */ this.trigger('controlsenabled'); if (!this.usingNativeControls()) { this.addTechControlsListeners_(); } } else { this.removeClass('vjs-controls-enabled'); this.addClass('vjs-controls-disabled'); /** * @event Player#controlsdisabled * @type {EventTarget~Event} */ this.trigger('controlsdisabled'); if (!this.usingNativeControls()) { this.removeTechControlsListeners_(); } } } return this; } return !!this.controls_; }; /** * Toggle native controls on/off. Native controls are the controls built into * devices (e.g. default iPhone controls), Flash, or other techs * (e.g. Vimeo Controls) * **This should only be set by the current tech, because only the tech knows * if it can support native controls** * * @fires Player#usingnativecontrols * @fires Player#usingcustomcontrols * * @param {boolean} [bool] * - true to turn native controls on * - false to turn native controls off * * @return {boolean|Player} * - the current value of native controls when getting * - the player when setting */ Player.prototype.usingNativeControls = function usingNativeControls(bool) { if (bool !== undefined) { bool = !!bool; // Don't trigger a change event unless it actually changed if (this.usingNativeControls_ !== bool) { this.usingNativeControls_ = bool; if (bool) { this.addClass('vjs-using-native-controls'); /** * player is using the native device controls * * @event Player#usingnativecontrols * @type {EventTarget~Event} */ this.trigger('usingnativecontrols'); } else { this.removeClass('vjs-using-native-controls'); /** * player is using the custom HTML controls * * @event Player#usingcustomcontrols * @type {EventTarget~Event} */ this.trigger('usingcustomcontrols'); } } return this; } return !!this.usingNativeControls_; }; /** * Set or get the current MediaError * * @fires Player#error * * @param {MediaError|string|number} [err] * A MediaError or a string/number to be turned * into a MediaError * * @return {MediaError|null|Player} * - The current MediaError when getting (or null) * - The player when setting */ Player.prototype.error = function error(err) { if (err === undefined) { return this.error_ || null; } // restoring to default if (err === null) { this.error_ = err; this.removeClass('vjs-error'); if (this.errorDisplay) { this.errorDisplay.close(); } return this; } this.error_ = new _mediaError2['default'](err); // add the vjs-error classname to the player this.addClass('vjs-error'); // log the name of the error type and any message // ie8 just logs "[object object]" if you just log the error object _log2['default'].error('(CODE:' + this.error_.code + ' ' + _mediaError2['default'].errorTypes[this.error_.code] + ')', this.error_.message, this.error_); /** * @event Player#error * @type {EventTarget~Event} */ this.trigger('error'); return this; }; /** * Report user activity * * @param {Object} event * Event object */ Player.prototype.reportUserActivity = function reportUserActivity(event) { this.userActivity_ = true; }; /** * Get/set if user is active * * @fires Player#useractive * @fires Player#userinactive * * @param {boolean} [bool] * - true if the user is active * - false if the user is inactive * @return {boolean|Player} * - the current value of userActive when getting * - the player when setting */ Player.prototype.userActive = function userActive(bool) { if (bool !== undefined) { bool = !!bool; if (bool !== this.userActive_) { this.userActive_ = bool; if (bool) { // If the user was inactive and is now active we want to reset the // inactivity timer this.userActivity_ = true; this.removeClass('vjs-user-inactive'); this.addClass('vjs-user-active'); /** * @event Player#useractive * @type {EventTarget~Event} */ this.trigger('useractive'); } else { // We're switching the state to inactive manually, so erase any other // activity this.userActivity_ = false; // Chrome/Safari/IE have bugs where when you change the cursor it can // trigger a mousemove event. This causes an issue when you're hiding // the cursor when the user is inactive, and a mousemove signals user // activity. Making it impossible to go into inactive mode. Specifically // this happens in fullscreen when we really need to hide the cursor. // // When this gets resolved in ALL browsers it can be removed // https://code.google.com/p/chromium/issues/detail?id=103041 if (this.tech_) { this.tech_.one('mousemove', function (e) { e.stopPropagation(); e.preventDefault(); }); } this.removeClass('vjs-user-active'); this.addClass('vjs-user-inactive'); /** * @event Player#userinactive * @type {EventTarget~Event} */ this.trigger('userinactive'); } } return this; } return this.userActive_; }; /** * Listen for user activity based on timeout value * * @private */ Player.prototype.listenForUserActivity_ = function listenForUserActivity_() { var mouseInProgress = void 0; var lastMoveX = void 0; var lastMoveY = void 0; var handleActivity = Fn.bind(this, this.reportUserActivity); var handleMouseMove = function handleMouseMove(e) { // #1068 - Prevent mousemove spamming // Chrome Bug: https://code.google.com/p/chromium/issues/detail?id=366970 if (e.screenX !== lastMoveX || e.screenY !== lastMoveY) { lastMoveX = e.screenX; lastMoveY = e.screenY; handleActivity(); } }; var handleMouseDown = function handleMouseDown() { handleActivity(); // For as long as the they are touching the device or have their mouse down, // we consider them active even if they're not moving their finger or mouse. // So we want to continue to update that they are active this.clearInterval(mouseInProgress); // Setting userActivity=true now and setting the interval to the same time // as the activityCheck interval (250) should ensure we never miss the // next activityCheck mouseInProgress = this.setInterval(handleActivity, 250); }; var handleMouseUp = function handleMouseUp(event) { handleActivity(); // Stop the interval that maintains activity if the mouse/touch is down this.clearInterval(mouseInProgress); }; // Any mouse movement will be considered user activity this.on('mousedown', handleMouseDown); this.on('mousemove', handleMouseMove); this.on('mouseup', handleMouseUp); // Listen for keyboard navigation // Shouldn't need to use inProgress interval because of key repeat this.on('keydown', handleActivity); this.on('keyup', handleActivity); // Run an interval every 250 milliseconds instead of stuffing everything into // the mousemove/touchmove function itself, to prevent performance degradation. // `this.reportUserActivity` simply sets this.userActivity_ to true, which // then gets picked up by this loop // http://ejohn.org/blog/learning-from-twitter/ var inactivityTimeout = void 0; this.setInterval(function () { // Check to see if mouse/touch activity has happened if (this.userActivity_) { // Reset the activity tracker this.userActivity_ = false; // If the user state was inactive, set the state to active this.userActive(true); // Clear any existing inactivity timeout to start the timer over this.clearTimeout(inactivityTimeout); var timeout = this.options_.inactivityTimeout; if (timeout > 0) { // In milliseconds, if no more activity has occurred the // user will be considered inactive inactivityTimeout = this.setTimeout(function () { // Protect against the case where the inactivityTimeout can trigger just // before the next user activity is picked up by the activity check loop // causing a flicker if (!this.userActivity_) { this.userActive(false); } }, timeout); } } }, 250); }; /** * Gets or sets the current playback rate. A playback rate of * 1.0 represents normal speed and 0.5 would indicate half-speed * playback, for instance. * * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-playbackrate * * @param {number} [rate] * New playback rate to set. * * @return {number|Player} * - The current playback rate when getting or 1.0 * - the player when setting */ Player.prototype.playbackRate = function playbackRate(rate) { if (rate !== undefined) { this.techCall_('setPlaybackRate', rate); return this; } if (this.tech_ && this.tech_.featuresPlaybackRate) { return this.techGet_('playbackRate'); } return 1.0; }; /** * Gets or sets the audio flag * * @param {boolean} bool * - true signals that this is an audio player * - false signals that this is not an audio player * * @return {Player|boolean} * - the current value of isAudio when getting * - the player if setting */ Player.prototype.isAudio = function isAudio(bool) { if (bool !== undefined) { this.isAudio_ = !!bool; return this; } return !!this.isAudio_; }; /** * Get the {@link VideoTrackList} * * @see https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist * * @return {VideoTrackList} * the current video track list */ Player.prototype.videoTracks = function videoTracks() { // if we have not yet loadTech_, we create videoTracks_ // these will be passed to the tech during loading if (!this.tech_) { this.videoTracks_ = this.videoTracks_ || new _videoTrackList2['default'](); return this.videoTracks_; } return this.tech_.videoTracks(); }; /** * Get the {@link AudioTrackList} * * @see https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist * * @return {AudioTrackList} * the current audio track list */ Player.prototype.audioTracks = function audioTracks() { // if we have not yet loadTech_, we create videoTracks_ // these will be passed to the tech during loading if (!this.tech_) { this.audioTracks_ = this.audioTracks_ || new _audioTrackList2['default'](); return this.audioTracks_; } return this.tech_.audioTracks(); }; /** * Get the {@link TextTrackList} * * Text tracks are tracks of timed text events. * - Captions: text displayed over the video * for the hearing impaired * - Subtitles: text displayed over the video for * those who don't understand language in the video * - Chapters: text displayed in a menu allowing the user to jump * to particular points (chapters) in the video * - Descriptions: (not yet implemented) audio descriptions that are read back to * the user by a screen reading device * * @see http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks * * @return {TextTrackList|undefined} * The current TextTrackList or undefined if * or undefined if we don't have a tech */ Player.prototype.textTracks = function textTracks() { // cannot use techGet_ directly because it checks to see whether the tech is ready. // Flash is unlikely to be ready in time but textTracks should still work. if (this.tech_) { return this.tech_.textTracks(); } }; /** * Get the "remote" {@link TextTrackList}. Remote Text Tracks * are tracks that were added to the HTML video element and can * be removed, whereas normal texttracks cannot be removed. * * * @return {TextTrackList|undefined} * The current remote text track list or undefined * if we don't have a tech */ Player.prototype.remoteTextTracks = function remoteTextTracks() { if (this.tech_) { return this.tech_.remoteTextTracks(); } }; /** * Get the "remote" {@link HTMLTrackElementList}. * This gives the user all of the DOM elements that match up * with the remote {@link TextTrackList}. * * @return {HTMLTrackElementList} * The current remote text track list elements * or undefined if we don't have a tech */ Player.prototype.remoteTextTrackEls = function remoteTextTrackEls() { if (this.tech_) { return this.tech_.remoteTextTrackEls(); } }; /** * A helper method for adding a {@link TextTrack} to our * {@link TextTrackList}. * * In addition to the W3C settings we allow adding additional info through options. * * @see http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack * * @param {string} [kind] * the kind of TextTrack you are adding * * @param {string} [label] * the label to give the TextTrack label * * @param {string} [language] * the language to set on the TextTrack * * @return {TextTrack|undefined} * the TextTrack that was added or undefined * if there is no tech */ Player.prototype.addTextTrack = function addTextTrack(kind, label, language) { if (this.tech_) { return this.tech_.addTextTrack(kind, label, language); } }; /** * Create a remote {@link TextTrack} and an {@link HTMLTrackElement}. It will * automatically removed from the video element whenever the source changes, unless * manualCleanup is set to false. * * @param {Object} options * Options to pass to {@link HTMLTrackElement} during creation. See * {@link HTMLTrackElement} for object properties that you should use. * * @param {boolean} [manualCleanup=true] if set to false, the TextTrack will be * * @return {HTMLTrackElement} * the HTMLTrackElement that was created and added * to the HTMLTrackElementList and the remote * TextTrackList * * @deprecated The default value of the "manualCleanup" parameter will default * to "false" in upcoming versions of Video.js */ Player.prototype.addRemoteTextTrack = function addRemoteTextTrack(options, manualCleanup) { if (this.tech_) { return this.tech_.addRemoteTextTrack(options, manualCleanup); } }; /** * Remove a remote {@link TextTrack} from the respective * {@link TextTrackList} and {@link HTMLTrackElementList}. * * @param {Object} track * Remote {@link TextTrack} to remove * * @return {undefined} * does not return anything */ Player.prototype.removeRemoteTextTrack = function removeRemoteTextTrack() { var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, _ref3$track = _ref3.track, track = _ref3$track === undefined ? arguments[0] : _ref3$track; // destructure the input into an object with a track argument, defaulting to arguments[0] // default the whole argument to an empty object if nothing was passed in if (this.tech_) { return this.tech_.removeRemoteTextTrack(track); } }; /** * Gets available media playback quality metrics as specified by the W3C's Media * Playback Quality API. * * @see [Spec]{@link https://wicg.github.io/media-playback-quality} * * @return {Object|undefined} * An object with supported media playback quality metrics or undefined if there * is no tech or the tech does not support it. */ Player.prototype.getVideoPlaybackQuality = function getVideoPlaybackQuality() { return this.techGet_('getVideoPlaybackQuality'); }; /** * Get video width * * @return {number} * current video width */ Player.prototype.videoWidth = function videoWidth() { return this.tech_ && this.tech_.videoWidth && this.tech_.videoWidth() || 0; }; /** * Get video height * * @return {number} * current video height */ Player.prototype.videoHeight = function videoHeight() { return this.tech_ && this.tech_.videoHeight && this.tech_.videoHeight() || 0; }; // Methods to add support for // initialTime: function() { return this.techCall_('initialTime'); }, // startOffsetTime: function() { return this.techCall_('startOffsetTime'); }, // played: function() { return this.techCall_('played'); }, // defaultPlaybackRate: function() { return this.techCall_('defaultPlaybackRate'); }, // defaultMuted: function() { return this.techCall_('defaultMuted'); } /** * The player's language code * NOTE: The language should be set in the player options if you want the * the controls to be built with a specific language. Changing the lanugage * later will not update controls text. * * @param {string} [code] * the language code to set the player to * * @return {string|Player} * - The current language code when getting * - A reference to the player when setting */ Player.prototype.language = function language(code) { if (code === undefined) { return this.language_; } this.language_ = String(code).toLowerCase(); return this; }; /** * Get the player's language dictionary * Merge every time, because a newly added plugin might call videojs.addLanguage() at any time * Languages specified directly in the player options have precedence * * @return {Array} * An array of of supported languages */ Player.prototype.languages = function languages() { return (0, _mergeOptions2['default'])(Player.prototype.options_.languages, this.languages_); }; /** * returns a JavaScript object reperesenting the current track * information. **DOES not return it as JSON** * * @return {Object} * Object representing the current of track info */ Player.prototype.toJSON = function toJSON() { var options = (0, _mergeOptions2['default'])(this.options_); var tracks = options.tracks; options.tracks = []; for (var i = 0; i < tracks.length; i++) { var track = tracks[i]; // deep merge tracks and null out player so no circular references track = (0, _mergeOptions2['default'])(track); track.player = undefined; options.tracks[i] = track; } return options; }; /** * Creates a simple modal dialog (an instance of the {@link ModalDialog} * component) that immediately overlays the player with arbitrary * content and removes itself when closed. * * @param {string|Function|Element|Array|null} content * Same as {@link ModalDialog#content}'s param of the same name. * The most straight-forward usage is to provide a string or DOM * element. * * @param {Object} [options] * Extra options which will be passed on to the {@link ModalDialog}. * * @return {ModalDialog} * the {@link ModalDialog} that was created */ Player.prototype.createModal = function createModal(content, options) { var _this5 = this; options = options || {}; options.content = content || ''; var modal = new _modalDialog2['default'](this, options); this.addChild(modal); modal.on('dispose', function () { _this5.removeChild(modal); }); return modal.open(); }; /** * Gets tag settings * * @param {Element} tag * The player tag * * @return {Object} * An object containing all of the settings * for a player tag */ Player.getTagSettings = function getTagSettings(tag) { var baseOptions = { sources: [], tracks: [] }; var tagOptions = Dom.getElAttributes(tag); var dataSetup = tagOptions['data-setup']; if (Dom.hasElClass(tag, 'vjs-fluid')) { tagOptions.fluid = true; } // Check if data-setup attr exists. if (dataSetup !== null) { // Parse options JSON // If empty string, make it a parsable json object. var _safeParseTuple = (0, _tuple2['default'])(dataSetup || '{}'), err = _safeParseTuple[0], data = _safeParseTuple[1]; if (err) { _log2['default'].error(err); } (0, _obj.assign)(tagOptions, data); } (0, _obj.assign)(baseOptions, tagOptions); // Get tag children settings if (tag.hasChildNodes()) { var children = tag.childNodes; for (var i = 0, j = children.length; i < j; i++) { var child = children[i]; // Change case needed: http://ejohn.org/blog/nodename-case-sensitivity/ var childName = child.nodeName.toLowerCase(); if (childName === 'source') { baseOptions.sources.push(Dom.getElAttributes(child)); } else if (childName === 'track') { baseOptions.tracks.push(Dom.getElAttributes(child)); } } } return baseOptions; }; /** * Determine wether or not flexbox is supported * * @return {boolean} * - true if flexbox is supported * - false if flexbox is not supported */ Player.prototype.flexNotSupported_ = function flexNotSupported_() { var elem = _document2['default'].createElement('i'); // Note: We don't actually use flexBasis (or flexOrder), but it's one of the more // common flex features that we can rely on when checking for flex support. return !('flexBasis' in elem.style || 'webkitFlexBasis' in elem.style || 'mozFlexBasis' in elem.style || 'msFlexBasis' in elem.style || // IE10-specific (2012 flex spec) 'msFlexOrder' in elem.style); }; return Player; }(_component2['default']); /** * Global player list * * @type {Object} */ Player.players = {}; var navigator = _window2['default'].navigator; /* * Player instance options, surfaced using options * options = Player.prototype.options_ * Make changes in options, not here. * * @type {Object} * @private */ Player.prototype.options_ = { // Default order of fallback technology techOrder: ['html5', 'flash'], // techOrder: ['flash','html5'], html5: {}, flash: {}, // defaultVolume: 0.85, defaultVolume: 0.00, // default inactivity timeout inactivityTimeout: 2000, // default playback rates playbackRates: [], // Add playback rate selection by adding rates // 'playbackRates': [0.5, 1, 1.5, 2], // Included control sets children: ['mediaLoader', 'posterImage', 'textTrackDisplay', 'loadingSpinner', 'bigPlayButton', 'controlBar', 'errorDisplay', 'textTrackSettings'], language: navigator && (navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language) || 'en', // locales and their language translations languages: {}, // Default message to show when a video cannot be played. notSupportedMessage: 'No compatible source was found for this media.' }; [ /** * Returns whether or not the player is in the "ended" state. * * @return {Boolean} True if the player is in the ended state, false if not. * @method Player#ended */ 'ended', /** * Returns whether or not the player is in the "seeking" state. * * @return {Boolean} True if the player is in the seeking state, false if not. * @method Player#seeking */ 'seeking', /** * Returns the TimeRanges of the media that are currently available * for seeking to. * * @return {TimeRanges} the seekable intervals of the media timeline * @method Player#seekable */ 'seekable', /** * Returns the current state of network activity for the element, from * the codes in the list below. * - NETWORK_EMPTY (numeric value 0) * The element has not yet been initialised. All attributes are in * their initial states. * - NETWORK_IDLE (numeric value 1) * The element's resource selection algorithm is active and has * selected a resource, but it is not actually using the network at * this time. * - NETWORK_LOADING (numeric value 2) * The user agent is actively trying to download data. * - NETWORK_NO_SOURCE (numeric value 3) * The element's resource selection algorithm is active, but it has * not yet found a resource to use. * * @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states * @return {number} the current network activity state * @method Player#networkState */ 'networkState', /** * Returns a value that expresses the current state of the element * with respect to rendering the current playback position, from the * codes in the list below. * - HAVE_NOTHING (numeric value 0) * No information regarding the media resource is available. * - HAVE_METADATA (numeric value 1) * Enough of the resource has been obtained that the duration of the * resource is available. * - HAVE_CURRENT_DATA (numeric value 2) * Data for the immediate current playback position is available. * - HAVE_FUTURE_DATA (numeric value 3) * Data for the immediate current playback position is available, as * well as enough data for the user agent to advance the current * playback position in the direction of playback. * - HAVE_ENOUGH_DATA (numeric value 4) * The user agent estimates that enough data is available for * playback to proceed uninterrupted. * * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate * @return {number} the current playback rendering state * @method Player#readyState */ 'readyState'].forEach(function (fn) { Player.prototype[fn] = function () { return this.techGet_(fn); }; }); TECH_EVENTS_RETRIGGER.forEach(function (event) { Player.prototype['handleTech' + (0, _toTitleCase2['default'])(event) + '_'] = function () { return this.trigger(event); }; }); /** * Fired when the player has initial duration and dimension information * * @event Player#loadedmetadata * @type {EventTarget~Event} */ /** * Fired when the player has downloaded data at the current playback position * * @event Player#loadeddata * @type {EventTarget~Event} */ /** * Fired when the current playback position has changed * * During playback this is fired every 15-250 milliseconds, depending on the * playback technology in use. * * @event Player#timeupdate * @type {EventTarget~Event} */ /** * Fired when the volume changes * * @event Player#volumechange * @type {EventTarget~Event} */ _component2['default'].registerComponent('Player', Player); exports['default'] = Player; },{"./big-play-button.js":43,"./close-button.js":46,"./component.js":47,"./control-bar/control-bar.js":50,"./error-display.js":83,"./fullscreen-api.js":86,"./loading-spinner.js":87,"./media-error.js":88,"./modal-dialog":92,"./poster-image.js":97,"./tech/flash.js":101,"./tech/html5.js":102,"./tech/loader.js":103,"./tech/tech.js":104,"./tracks/audio-track-list.js":105,"./tracks/text-track-display.js":110,"./tracks/text-track-list-converter.js":111,"./tracks/text-track-settings.js":113,"./tracks/video-track-list.js":118,"./utils/browser.js":120,"./utils/buffer.js":121,"./utils/dom.js":123,"./utils/events.js":124,"./utils/fn.js":125,"./utils/guid.js":127,"./utils/log.js":128,"./utils/merge-options.js":129,"./utils/obj":130,"./utils/stylesheet.js":131,"./utils/time-ranges.js":132,"./utils/to-title-case.js":133,"global/document":136,"global/window":137,"safe-json-parse/tuple":40}],94:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _player = require('./player.js'); var _player2 = _interopRequireDefault(_player); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } /** * The method for registering a video.js plugin. {@link videojs:videojs.registerPlugin]. * * @param {string} name * The name of the plugin that is being registered * * @param {plugins:PluginFn} init * The function that gets run when a `Player` initializes. */ var plugin = function plugin(name, init) { _player2['default'].prototype[name] = init; }; /** * @file plugins.js * @module plugins */ exports['default'] = plugin; },{"./player.js":93}],95:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _clickableComponent = require('../clickable-component.js'); var _clickableComponent2 = _interopRequireDefault(_clickableComponent); var _component = require('../component.js'); var _component2 = _interopRequireDefault(_component); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file popup-button.js */ /** * A button class for use with {@link Popup} controls * * @extends ClickableComponent */ var PopupButton = function (_ClickableComponent) { _inherits(PopupButton, _ClickableComponent); /** * Create an instance of this class. * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function PopupButton(player) { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; _classCallCheck(this, PopupButton); var _this = _possibleConstructorReturn(this, _ClickableComponent.call(this, player, options)); _this.update(); return _this; } /** * Update the `Popup` that this button is attached to. */ PopupButton.prototype.update = function update() { var popup = this.createPopup(); if (this.popup) { this.removeChild(this.popup); } this.popup = popup; this.addChild(popup); if (this.items && this.items.length === 0) { this.hide(); } else if (this.items && this.items.length > 1) { this.show(); } }; /** * Create a `Popup`. - Override with specific functionality for component * * @abstract */ PopupButton.prototype.createPopup = function createPopup() {}; /** * Create the `PopupButton`s DOM element. * * @return {Element} * The element that gets created. */ PopupButton.prototype.createEl = function createEl() { return _ClickableComponent.prototype.createEl.call(this, 'div', { className: this.buildCSSClass() }); }; /** * Builds the default DOM `className`. * * @return {string} * The DOM `className` for this object. */ PopupButton.prototype.buildCSSClass = function buildCSSClass() { var menuButtonClass = 'vjs-menu-button'; // If the inline option is passed, we want to use different styles altogether. if (this.options_.inline === true) { menuButtonClass += '-inline'; } else { menuButtonClass += '-popup'; } return 'vjs-menu-button ' + menuButtonClass + ' ' + _ClickableComponent.prototype.buildCSSClass.call(this); }; return PopupButton; }(_clickableComponent2['default']); _component2['default'].registerComponent('PopupButton', PopupButton); exports['default'] = PopupButton; },{"../clickable-component.js":45,"../component.js":47}],96:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../component.js'); var _component2 = _interopRequireDefault(_component); var _dom = require('../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _fn = require('../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _events = require('../utils/events.js'); var Events = _interopRequireWildcard(_events); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file popup.js */ /** * The Popup component is used to build pop up controls. * * @extends Component */ var Popup = function (_Component) { _inherits(Popup, _Component); function Popup() { _classCallCheck(this, Popup); return _possibleConstructorReturn(this, _Component.apply(this, arguments)); } /** * Add a popup item to the popup * * @param {Object|string} component * Component or component type to add * */ Popup.prototype.addItem = function addItem(component) { this.addChild(component); component.on('click', Fn.bind(this, function () { this.unlockShowing(); })); }; /** * Create the `PopupButton`s DOM element. * * @return {Element} * The element that gets created. */ Popup.prototype.createEl = function createEl() { var contentElType = this.options_.contentElType || 'ul'; this.contentEl_ = Dom.createEl(contentElType, { className: 'vjs-menu-content' }); var el = _Component.prototype.createEl.call(this, 'div', { append: this.contentEl_, className: 'vjs-menu' }); el.appendChild(this.contentEl_); // Prevent clicks from bubbling up. Needed for Popup Buttons, // where a click on the parent is significant Events.on(el, 'click', function (event) { event.preventDefault(); event.stopImmediatePropagation(); }); return el; }; return Popup; }(_component2['default']); _component2['default'].registerComponent('Popup', Popup); exports['default'] = Popup; },{"../component.js":47,"../utils/dom.js":123,"../utils/events.js":124,"../utils/fn.js":125}],97:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _clickableComponent = require('./clickable-component.js'); var _clickableComponent2 = _interopRequireDefault(_clickableComponent); var _component = require('./component.js'); var _component2 = _interopRequireDefault(_component); var _fn = require('./utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _dom = require('./utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _browser = require('./utils/browser.js'); var browser = _interopRequireWildcard(_browser); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file poster-image.js */ /** * A `ClickableComponent` that handles showing the poster image for the player. * * @extends ClickableComponent */ var PosterImage = function (_ClickableComponent) { _inherits(PosterImage, _ClickableComponent); /** * Create an instance of this class. * * @param {Player} player * The `Player` that this class should attach to. * * @param {Object} [options] * The key/value store of player options. */ function PosterImage(player, options) { _classCallCheck(this, PosterImage); var _this = _possibleConstructorReturn(this, _ClickableComponent.call(this, player, options)); _this.update(); player.on('posterchange', Fn.bind(_this, _this.update)); return _this; } /** * Clean up and dispose of the `PosterImage`. */ PosterImage.prototype.dispose = function dispose() { this.player().off('posterchange', this.update); _ClickableComponent.prototype.dispose.call(this); }; /** * Create the `PosterImage`s DOM element. * * @return {Element} * The element that gets created. */ PosterImage.prototype.createEl = function createEl() { var el = Dom.createEl('div', { className: 'vjs-poster', // Don't want poster to be tabbable. tabIndex: -1 }); // To ensure the poster image resizes while maintaining its original aspect // ratio, use a div with `background-size` when available. For browsers that // do not support `background-size` (e.g. IE8), fall back on using a regular // img element. if (!browser.BACKGROUND_SIZE_SUPPORTED) { this.fallbackImg_ = Dom.createEl('img'); el.appendChild(this.fallbackImg_); } return el; }; /** * An {@link EventTarget~EventListener} for {@link Player#posterchange} events. * * @listens Player#posterchange * * @param {EventTarget~Event} [event] * The `Player#posterchange` event that triggered this function. */ PosterImage.prototype.update = function update(event) { var url = this.player().poster(); this.setSrc(url); // If there's no poster source we should display:none on this component // so it's not still clickable or right-clickable if (url) { this.show(); } else { this.hide(); } }; /** * Set the source of the `PosterImage` depending on the display method. * * @param {string} url * The URL to the source for the `PosterImage`. */ PosterImage.prototype.setSrc = function setSrc(url) { if (this.fallbackImg_) { this.fallbackImg_.src = url; } else { var backgroundImage = ''; // Any falsey values should stay as an empty string, otherwise // this will throw an extra error if (url) { backgroundImage = 'url("' + url + '")'; } this.el_.style.backgroundImage = backgroundImage; } }; /** * An {@link EventTarget~EventListener} for clicks on the `PosterImage`. See * {@link ClickableComponent#handleClick} for instances where this will be triggered. * * @listens tap * @listens click * @listens keydown * * @param {EventTarget~Event} event + The `click`, `tap` or `keydown` event that caused this function to be called. */ PosterImage.prototype.handleClick = function handleClick(event) { // We don't want a click to trigger playback when controls are disabled if (!this.player_.controls()) { return; } if (this.player_.paused()) { this.player_.play(); } else { this.player_.pause(); } }; return PosterImage; }(_clickableComponent2['default']); _component2['default'].registerComponent('PosterImage', PosterImage); exports['default'] = PosterImage; },{"./clickable-component.js":45,"./component.js":47,"./utils/browser.js":120,"./utils/dom.js":123,"./utils/fn.js":125}],98:[function(require,module,exports){ 'use strict'; exports.__esModule = true; exports.hasLoaded = exports.autoSetupTimeout = exports.autoSetup = undefined; var _dom = require('./utils/dom'); var Dom = _interopRequireWildcard(_dom); var _events = require('./utils/events.js'); var Events = _interopRequireWildcard(_events); var _document = require('global/document'); var _document2 = _interopRequireDefault(_document); var _window = require('global/window'); var _window2 = _interopRequireDefault(_window); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } /** * @file setup.js - Functions for setting up a player without * user interaction based on the data-setup `attribute` of the video tag. * * @module setup */ var _windowLoaded = false; var videojs = void 0; /** * Set up any tags that have a data-setup `attribute` when the player is started. */ var autoSetup = function autoSetup() { // Protect against breakage in non-browser environments. if (!Dom.isReal()) { return; } // One day, when we stop supporting IE8, go back to this, but in the meantime...*hack hack hack* // var vids = Array.prototype.slice.call(document.getElementsByTagName('video')); // var audios = Array.prototype.slice.call(document.getElementsByTagName('audio')); // var mediaEls = vids.concat(audios); // Because IE8 doesn't support calling slice on a node list, we need to loop // through each list of elements to build up a new, combined list of elements. var vids = _document2['default'].getElementsByTagName('video'); var audios = _document2['default'].getElementsByTagName('audio'); var mediaEls = []; if (vids && vids.length > 0) { for (var i = 0, e = vids.length; i < e; i++) { mediaEls.push(vids[i]); } } if (audios && audios.length > 0) { for (var _i = 0, _e = audios.length; _i < _e; _i++) { mediaEls.push(audios[_i]); } } // Check if any media elements exist if (mediaEls && mediaEls.length > 0) { for (var _i2 = 0, _e2 = mediaEls.length; _i2 < _e2; _i2++) { var mediaEl = mediaEls[_i2]; // Check if element exists, has getAttribute func. // IE seems to consider typeof el.getAttribute == 'object' instead of // 'function' like expected, at least when loading the player immediately. if (mediaEl && mediaEl.getAttribute) { // Make sure this player hasn't already been set up. if (mediaEl.player === undefined) { var options = mediaEl.getAttribute('data-setup'); // Check if data-setup attr exists. // We only auto-setup if they've added the data-setup attr. if (options !== null) { // Create new video.js instance. videojs(mediaEl); } } // If getAttribute isn't defined, we need to wait for the DOM. } else { autoSetupTimeout(1); break; } } // No videos were found, so keep looping unless page is finished loading. } else if (!_windowLoaded) { autoSetupTimeout(1); } }; /** * Wait until the page is loaded before running autoSetup. This will be called in * autoSetup if `hasLoaded` returns false. * * @param {number} wait * How long to wait in ms * * @param {videojs} [vjs] * The videojs library function */ function autoSetupTimeout(wait, vjs) { if (vjs) { videojs = vjs; } _window2['default'].setTimeout(autoSetup, wait); } if (Dom.isReal() && _document2['default'].readyState === 'complete') { _windowLoaded = true; } else { /** * Listen for the load event on window, and set _windowLoaded to true. * * @listens load */ Events.one(_window2['default'], 'load', function () { _windowLoaded = true; }); } /** * check if the document has been loaded */ var hasLoaded = function hasLoaded() { return _windowLoaded; }; exports.autoSetup = autoSetup; exports.autoSetupTimeout = autoSetupTimeout; exports.hasLoaded = hasLoaded; },{"./utils/dom":123,"./utils/events.js":124,"global/document":136,"global/window":137}],99:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../component.js'); var _component2 = _interopRequireDefault(_component); var _dom = require('../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _obj = require('../utils/obj'); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file slider.js */ /** * The base functionality for a slider. Can be vertical or horizontal. * For instance the volume bar or the seek bar on a video is a slider. * * @extends Component */ var Slider = function (_Component) { _inherits(Slider, _Component); /** * Create an instance of this class * * @param {Player} player * The `Player` that this class should be attached to. * * @param {Object} [options] * The key/value store of player options. */ function Slider(player, options) { _classCallCheck(this, Slider); // Set property names to bar to match with the child Slider class is looking for var _this = _possibleConstructorReturn(this, _Component.call(this, player, options)); _this.bar = _this.getChild(_this.options_.barName); // Set a horizontal or vertical class on the slider depending on the slider type _this.vertical(!!_this.options_.vertical); _this.on('mousedown', _this.handleMouseDown); _this.on('touchstart', _this.handleMouseDown); _this.on('focus', _this.handleFocus); _this.on('blur', _this.handleBlur); _this.on('click', _this.handleClick); _this.on(player, 'controlsvisible', _this.update); _this.on(player, _this.playerEvent, _this.update); return _this; } /** * Create the `Button`s DOM element. * * @param {string} type * Type of element to create. * * @param {Object} [props={}] * List of properties in Object form. * * @param {Object} [attributes={}] * list of attributes in Object form. * * @return {Element} * The element that gets created. */ Slider.prototype.createEl = function createEl(type) { var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; // Add the slider element class to all sub classes props.className = props.className + ' vjs-slider'; props = (0, _obj.assign)({ tabIndex: 0 }, props); attributes = (0, _obj.assign)({ 'role': 'slider', 'aria-valuenow': 0, 'aria-valuemin': 0, 'aria-valuemax': 100, 'tabIndex': 0 }, attributes); return _Component.prototype.createEl.call(this, type, props, attributes); }; /** * Handle `mousedown` or `touchstart` events on the `Slider`. * * @param {EventTarget~Event} event * `mousedown` or `touchstart` event that triggered this function * * @listens mousedown * @listens touchstart * @fires Slider#slideractive */ Slider.prototype.handleMouseDown = function handleMouseDown(event) { var doc = this.bar.el_.ownerDocument; event.preventDefault(); Dom.blockTextSelection(); this.addClass('vjs-sliding'); /** * Triggered when the slider is in an active state * * @event Slider#slideractive * @type {EventTarget~Event} */ this.trigger('slideractive'); this.on(doc, 'mousemove', this.handleMouseMove); this.on(doc, 'mouseup', this.handleMouseUp); this.on(doc, 'touchmove', this.handleMouseMove); this.on(doc, 'touchend', this.handleMouseUp); this.handleMouseMove(event); }; /** * Handle the `mousemove`, `touchmove`, and `mousedown` events on this `Slider`. * The `mousemove` and `touchmove` events will only only trigger this function during * `mousedown` and `touchstart`. This is due to {@link Slider#handleMouseDown} and * {@link Slider#handleMouseUp}. * * @param {EventTarget~Event} event * `mousedown`, `mousemove`, `touchstart`, or `touchmove` event that triggered * this function * * @listens mousemove * @listens touchmove */ Slider.prototype.handleMouseMove = function handleMouseMove(event) {}; /** * Handle `mouseup` or `touchend` events on the `Slider`. * * @param {EventTarget~Event} event * `mouseup` or `touchend` event that triggered this function. * * @listens touchend * @listens mouseup * @fires Slider#sliderinactive */ Slider.prototype.handleMouseUp = function handleMouseUp() { var doc = this.bar.el_.ownerDocument; Dom.unblockTextSelection(); this.removeClass('vjs-sliding'); /** * Triggered when the slider is no longer in an active state. * * @event Slider#sliderinactive * @type {EventTarget~Event} */ this.trigger('sliderinactive'); this.off(doc, 'mousemove', this.handleMouseMove); this.off(doc, 'mouseup', this.handleMouseUp); this.off(doc, 'touchmove', this.handleMouseMove); this.off(doc, 'touchend', this.handleMouseUp); this.update(); }; /** * Update the progress bar of the `Slider`. */ Slider.prototype.update = function update() { // In VolumeBar init we have a setTimeout for update that pops and update to the end of the // execution stack. The player is destroyed before then update will cause an error if (!this.el_) { return; } // If scrubbing, we could use a cached value to make the handle keep up with the user's mouse. // On HTML5 browsers scrubbing is really smooth, but some flash players are slow, so we might want to utilize this later. // var progress = (this.player_.scrubbing()) ? this.player_.getCache().currentTime / this.player_.duration() : this.player_.currentTime() / this.player_.duration(); var progress = this.getPercent(); var bar = this.bar; // If there's no bar... if (!bar) { return; } // Protect against no duration and other division issues if (typeof progress !== 'number' || progress !== progress || progress < 0 || progress === Infinity) { progress = 0; } // Convert to a percentage for setting var percentage = (progress * 100).toFixed(2) + '%'; // Set the new bar width or height if (this.vertical()) { bar.el().style.height = percentage; } else { bar.el().style.width = percentage; } }; /** * Calculate distance for slider * * @param {EventTarget~Event} event * The event that caused this function to run. * * @return {number} * The current position of the Slider. * - postition.x for vertical `Slider`s * - postition.y for horizontal `Slider`s */ Slider.prototype.calculateDistance = function calculateDistance(event) { var position = Dom.getPointerPosition(this.el_, event); if (this.vertical()) { return position.y; } return position.x; }; /** * Handle a `focus` event on this `Slider`. * * @param {EventTarget~Event} event * The `focus` event that caused this function to run. * * @listens focus */ Slider.prototype.handleFocus = function handleFocus() { this.on(this.bar.el_.ownerDocument, 'keydown', this.handleKeyPress); }; /** * Handle a `keydown` event on the `Slider`. Watches for left, rigth, up, and down * arrow keys. This function will only be called when the slider has focus. See * {@link Slider#handleFocus} and {@link Slider#handleBlur}. * * @param {EventTarget~Event} event * the `keydown` event that caused this function to run. * * @listens keydown */ Slider.prototype.handleKeyPress = function handleKeyPress(event) { // Left and Down Arrows if (event.which === 37 || event.which === 40) { event.preventDefault(); this.stepBack(); // Up and Right Arrows } else if (event.which === 38 || event.which === 39) { event.preventDefault(); this.stepForward(); } }; /** * Handle a `blur` event on this `Slider`. * * @param {EventTarget~Event} event * The `blur` event that caused this function to run. * * @listens blur */ Slider.prototype.handleBlur = function handleBlur() { this.off(this.bar.el_.ownerDocument, 'keydown', this.handleKeyPress); }; /** * Listener for click events on slider, used to prevent clicks * from bubbling up to parent elements like button menus. * * @param {Object} event * Event that caused this object to run */ Slider.prototype.handleClick = function handleClick(event) { event.stopImmediatePropagation(); event.preventDefault(); }; /** * Get/set if slider is horizontal for vertical * * @param {boolean} [bool] * - true if slider is vertical, * - false is horizontal * * @return {boolean|Slider} * - true if slider is vertical, and getting * - false is horizontal, and getting * - a reference to this object when setting */ Slider.prototype.vertical = function vertical(bool) { if (bool === undefined) { return this.vertical_ || false; } this.vertical_ = !!bool; if (this.vertical_) { this.addClass('vjs-slider-vertical'); } else { this.addClass('vjs-slider-horizontal'); } return this; }; return Slider; }(_component2['default']); _component2['default'].registerComponent('Slider', Slider); exports['default'] = Slider; },{"../component.js":47,"../utils/dom.js":123,"../utils/obj":130}],100:[function(require,module,exports){ 'use strict'; exports.__esModule = true; /** * @file flash-rtmp.js * @module flash-rtmp */ /** * Add RTMP properties to the {@link Flash} Tech. * * @param {Flash} Flash * The flash tech class. * * @mixin FlashRtmpDecorator */ function FlashRtmpDecorator(Flash) { Flash.streamingFormats = { 'rtmp/mp4': 'MP4', 'rtmp/flv': 'FLV' }; /** * Join connection and stream with an ampersand. * * @param {string} connection * The connection string. * * @param {string} stream * The stream string. */ Flash.streamFromParts = function (connection, stream) { return connection + '&' + stream; }; /** * The flash parts object that contains connection and stream info. * * @typedef {Object} Flash~PartsObject * * @property {string} connection * The connection string of a source, defaults to an empty string. * * @property {string} stream * The stream string of the source, defaults to an empty string. */ /** * Convert a source url into a stream and connection parts. * * @param {string} src * the source url * * @return {Flash~PartsObject} * The parts object that contains a connection and a stream */ Flash.streamToParts = function (src) { var parts = { connection: '', stream: '' }; if (!src) { return parts; } // Look for the normal URL separator we expect, '&'. // If found, we split the URL into two pieces around the // first '&'. var connEnd = src.search(/&(?!\w+=)/); var streamBegin = void 0; if (connEnd !== -1) { streamBegin = connEnd + 1; } else { // If there's not a '&', we use the last '/' as the delimiter. connEnd = streamBegin = src.lastIndexOf('/') + 1; if (connEnd === 0) { // really, there's not a '/'? connEnd = streamBegin = src.length; } } parts.connection = src.substring(0, connEnd); parts.stream = src.substring(streamBegin, src.length); return parts; }; /** * Check if the source type is a streaming type. * * @param {string} srcType * The mime type to check. * * @return {boolean} * - True if the source type is a streaming type. * - False if the source type is not a streaming type. */ Flash.isStreamingType = function (srcType) { return srcType in Flash.streamingFormats; }; // RTMP has four variations, any string starting // with one of these protocols should be valid /** * Regular expression used to check if the source is an rtmp source. * * @property {RegExp} Flash.RTMP_RE */ Flash.RTMP_RE = /^rtmp[set]?:\/\//i; /** * Check if the source itself is a streaming type. * * @param {string} src * The url to the source. * * @return {boolean} * - True if the source url indicates that the source is streaming. * - False if the shource url indicates that the source url is not streaming. */ Flash.isStreamingSrc = function (src) { return Flash.RTMP_RE.test(src); }; /** * A source handler for RTMP urls * @type {Object} */ Flash.rtmpSourceHandler = {}; /** * Check if Flash can play the given mime type. * * @param {string} type * The mime type to check * * @return {string} * 'maybe', or '' (empty string) */ Flash.rtmpSourceHandler.canPlayType = function (type) { if (Flash.isStreamingType(type)) { return 'maybe'; } return ''; }; /** * Check if Flash can handle the source natively * * @param {Object} source * The source object * * @param {Object} [options] * The options passed to the tech * * @return {string} * 'maybe', or '' (empty string) */ Flash.rtmpSourceHandler.canHandleSource = function (source, options) { var can = Flash.rtmpSourceHandler.canPlayType(source.type); if (can) { return can; } if (Flash.isStreamingSrc(source.src)) { return 'maybe'; } return ''; }; /** * Pass the source to the flash object. * * @param {Object} source * The source object * * @param {Flash} tech * The instance of the Flash tech * * @param {Object} [options] * The options to pass to the source */ Flash.rtmpSourceHandler.handleSource = function (source, tech, options) { var srcParts = Flash.streamToParts(source.src); tech.setRtmpConnection(srcParts.connection); tech.setRtmpStream(srcParts.stream); }; // Register the native source handler Flash.registerSourceHandler(Flash.rtmpSourceHandler); return Flash; } exports['default'] = FlashRtmpDecorator; },{}],101:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _tech = require('./tech'); var _tech2 = _interopRequireDefault(_tech); var _dom = require('../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _url = require('../utils/url.js'); var Url = _interopRequireWildcard(_url); var _timeRanges = require('../utils/time-ranges.js'); var _flashRtmp = require('./flash-rtmp'); var _flashRtmp2 = _interopRequireDefault(_flashRtmp); var _component = require('../component'); var _component2 = _interopRequireDefault(_component); var _window = require('global/window'); var _window2 = _interopRequireDefault(_window); var _obj = require('../utils/obj'); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file flash.js * VideoJS-SWF - Custom Flash Player with HTML5-ish API * https://github.com/zencoder/video-js-swf * Not using setupTriggers. Using global onEvent func to distribute events */ var navigator = _window2['default'].navigator; /** * Flash Media Controller - Wrapper for Flash Media API * * @mixes FlashRtmpDecorator * @mixes Tech~SouceHandlerAdditions * @extends Tech */ var Flash = function (_Tech) { _inherits(Flash, _Tech); /** * Create an instance of this Tech. * * @param {Object} [options] * The key/value store of player options. * * @param {Component~ReadyCallback} ready * Callback function to call when the `Flash` Tech is ready. */ function Flash(options, ready) { _classCallCheck(this, Flash); // Set the source when ready var _this = _possibleConstructorReturn(this, _Tech.call(this, options, ready)); if (options.source) { _this.ready(function () { this.setSource(options.source); }, true); } // Having issues with Flash reloading on certain page actions (hide/resize/fullscreen) in certain browsers // This allows resetting the playhead when we catch the reload if (options.startTime) { _this.ready(function () { this.load(); this.play(); this.currentTime(options.startTime); }, true); } // Add global window functions that the swf expects // A 4.x workflow we weren't able to solve for in 5.0 // because of the need to hard code these functions // into the swf for security reasons _window2['default'].videojs = _window2['default'].videojs || {}; _window2['default'].videojs.Flash = _window2['default'].videojs.Flash || {}; _window2['default'].videojs.Flash.onReady = Flash.onReady; _window2['default'].videojs.Flash.onEvent = Flash.onEvent; _window2['default'].videojs.Flash.onError = Flash.onError; _this.on('seeked', function () { this.lastSeekTarget_ = undefined; }); return _this; } /** * Create the `Flash` Tech's DOM element. * * @return {Element} * The element that gets created. */ Flash.prototype.createEl = function createEl() { var options = this.options_; // If video.js is hosted locally you should also set the location // for the hosted swf, which should be relative to the page (not video.js) // Otherwise this adds a CDN url. // The CDN also auto-adds a swf URL for that specific version. if (!options.swf) { var ver = '5.4.1'; options.swf = '//vjs.zencdn.net/swf/' + ver + '/video-js.swf'; } // Generate ID for swf object var objId = options.techId; // Merge default flashvars with ones passed in to init var flashVars = (0, _obj.assign)({ // SWF Callback Functions readyFunction: 'videojs.Flash.onReady', eventProxyFunction: 'videojs.Flash.onEvent', errorEventProxyFunction: 'videojs.Flash.onError', // Player Settings autoplay: options.autoplay, preload: options.preload, loop: options.loop, muted: options.muted }, options.flashVars); // Merge default parames with ones passed in var params = (0, _obj.assign)({ // Opaque is needed to overlay controls, but can affect playback performance wmode: 'opaque', // Using bgcolor prevents a white flash when the object is loading bgcolor: '#000000' }, options.params); // Merge default attributes with ones passed in var attributes = (0, _obj.assign)({ // Both ID and Name needed or swf to identify itself id: objId, name: objId, 'class': 'vjs-tech' }, options.attributes); this.el_ = Flash.embed(options.swf, flashVars, params, attributes); this.el_.tech = this; return this.el_; }; /** * Called by {@link Player#play} to play using the `Flash` `Tech`. */ Flash.prototype.play = function play() { if (this.ended()) { this.setCurrentTime(0); } this.el_.vjs_play(); }; /** * Called by {@link Player#pause} to pause using the `Flash` `Tech`. */ Flash.prototype.pause = function pause() { this.el_.vjs_pause(); }; /** * A getter/setter for the `Flash` Tech's source object. * > Note: Please use {@link Flash#setSource} * * @param {Tech~SourceObject} [src] * The source object you want to set on the `Flash` techs. * * @return {Tech~SourceObject|undefined} * - The current source object when a source is not passed in. * - undefined when setting * * @deprecated Since version 5. */ Flash.prototype.src = function src(_src) { if (_src === undefined) { return this.currentSrc(); } // Setting src through `src` not `setSrc` will be deprecated return this.setSrc(_src); }; /** * A getter/setter for the `Flash` Tech's source object. * * @param {Tech~SourceObject} [src] * The source object you want to set on the `Flash` techs. * * @return {Tech~SourceObject|undefined} * - The current source object when a source is not passed in. * - undefined when setting */ Flash.prototype.setSrc = function setSrc(src) { var _this2 = this; // Make sure source URL is absolute. src = Url.getAbsoluteURL(src); this.el_.vjs_src(src); // Currently the SWF doesn't autoplay if you load a source later. // e.g. Load player w/ no source, wait 2s, set src. if (this.autoplay()) { this.setTimeout(function () { return _this2.play(); }, 0); } }; /** * Indicates whether the media is currently seeking to a new position or not. * * @return {boolean} * - True if seeking to a new position * - False otherwise */ Flash.prototype.seeking = function seeking() { return this.lastSeekTarget_ !== undefined; }; /** * Returns the current time in seconds that the media is at in playback. * * @param {number} time * Current playtime of the media in seconds. */ Flash.prototype.setCurrentTime = function setCurrentTime(time) { var seekable = this.seekable(); if (seekable.length) { // clamp to the current seekable range time = time > seekable.start(0) ? time : seekable.start(0); time = time < seekable.end(seekable.length - 1) ? time : seekable.end(seekable.length - 1); this.lastSeekTarget_ = time; this.trigger('seeking'); this.el_.vjs_setProperty('currentTime', time); _Tech.prototype.setCurrentTime.call(this); } }; /** * Get the current playback time in seconds * * @return {number} * The current time of playback in seconds. */ Flash.prototype.currentTime = function currentTime() { // when seeking make the reported time keep up with the requested time // by reading the time we're seeking to if (this.seeking()) { return this.lastSeekTarget_ || 0; } return this.el_.vjs_getProperty('currentTime'); }; /** * Get the current source * * @method currentSrc * @return {Tech~SourceObject} * The current source */ Flash.prototype.currentSrc = function currentSrc() { if (this.currentSource_) { return this.currentSource_.src; } return this.el_.vjs_getProperty('currentSrc'); }; /** * Get the total duration of the current media. * * @return {number} 8 The total duration of the current media. */ Flash.prototype.duration = function duration() { if (this.readyState() === 0) { return NaN; } var duration = this.el_.vjs_getProperty('duration'); return duration >= 0 ? duration : Infinity; }; /** * Load media into Tech. */ Flash.prototype.load = function load() { this.el_.vjs_load(); }; /** * Get the poster image that was set on the tech. */ Flash.prototype.poster = function poster() { this.el_.vjs_getProperty('poster'); }; /** * Poster images are not handled by the Flash tech so make this is a no-op. */ Flash.prototype.setPoster = function setPoster() {}; /** * Determine the time ranges that can be seeked to in the media. * * @return {TimeRange} * Returns the time ranges that can be seeked to. */ Flash.prototype.seekable = function seekable() { var duration = this.duration(); if (duration === 0) { return (0, _timeRanges.createTimeRange)(); } return (0, _timeRanges.createTimeRange)(0, duration); }; /** * Get and create a `TimeRange` object for buffering. * * @return {TimeRange} * The time range object that was created. */ Flash.prototype.buffered = function buffered() { var ranges = this.el_.vjs_getProperty('buffered'); if (ranges.length === 0) { return (0, _timeRanges.createTimeRange)(); } return (0, _timeRanges.createTimeRange)(ranges[0][0], ranges[0][1]); }; /** * Get fullscreen support - * * Flash does not allow fullscreen through javascript * so this always returns false. * * @return {boolean} * The Flash tech does not support fullscreen, so it will always return false. */ Flash.prototype.supportsFullScreen = function supportsFullScreen() { // Flash does not allow fullscreen through javascript return false; }; /** * Flash does not allow fullscreen through javascript * so this always returns false. * * @return {boolean} * The Flash tech does not support fullscreen, so it will always return false. */ Flash.prototype.enterFullScreen = function enterFullScreen() { return false; }; /** * Gets available media playback quality metrics as specified by the W3C's Media * Playback Quality API. * * @see [Spec]{@link https://wicg.github.io/media-playback-quality} * * @return {Object} * An object with supported media playback quality metrics */ Flash.prototype.getVideoPlaybackQuality = function getVideoPlaybackQuality() { var videoPlaybackQuality = this.el_.vjs_getProperty('getVideoPlaybackQuality'); if (_window2['default'].performance && typeof _window2['default'].performance.now === 'function') { videoPlaybackQuality.creationTime = _window2['default'].performance.now(); } else if (_window2['default'].performance && _window2['default'].performance.timing && typeof _window2['default'].performance.timing.navigationStart === 'number') { videoPlaybackQuality.creationTime = _window2['default'].Date.now() - _window2['default'].performance.timing.navigationStart; } return videoPlaybackQuality; }; return Flash; }(_tech2['default']); // Create setters and getters for attributes var _api = Flash.prototype; var _readWrite = 'rtmpConnection,rtmpStream,preload,defaultPlaybackRate,playbackRate,autoplay,loop,mediaGroup,controller,controls,volume,muted,defaultMuted'.split(','); var _readOnly = 'networkState,readyState,initialTime,startOffsetTime,paused,ended,videoWidth,videoHeight'.split(','); function _createSetter(attr) { var attrUpper = attr.charAt(0).toUpperCase() + attr.slice(1); _api['set' + attrUpper] = function (val) { return this.el_.vjs_setProperty(attr, val); }; } function _createGetter(attr) { _api[attr] = function () { return this.el_.vjs_getProperty(attr); }; } // Create getter and setters for all read/write attributes for (var i = 0; i < _readWrite.length; i++) { _createGetter(_readWrite[i]); _createSetter(_readWrite[i]); } // Create getters for read-only attributes for (var _i = 0; _i < _readOnly.length; _i++) { _createGetter(_readOnly[_i]); } /** ------------------------------ Getters ------------------------------ **/ /** * Get the value of `rtmpConnection` from the swf. * * @method Flash#rtmpConnection * @return {string} * The current value of `rtmpConnection` on the swf. */ /** * Get the value of `rtmpStream` from the swf. * * @method Flash#rtmpStream * @return {string} * The current value of `rtmpStream` on the swf. */ /** * Get the value of `preload` from the swf. `preload` indicates * what should download before the media is interacted with. It can have the following * values: * - none: nothing should be downloaded * - metadata: poster and the first few frames of the media may be downloaded to get * media dimensions and other metadata * - auto: allow the media and metadata for the media to be downloaded before * interaction * * @method Flash#preload * @return {string} * The value of `preload` from the swf. Will be 'none', 'metadata', * or 'auto'. */ /** * Get the value of `defaultPlaybackRate` from the swf. * * @method Flash#defaultPlaybackRate * @return {number} * The current value of `defaultPlaybackRate` on the swf. */ /** * Get the value of `playbackRate` from the swf. `playbackRate` indicates * the rate at which the media is currently playing back. Examples: * - if playbackRate is set to 2, media will play twice as fast. * - if playbackRate is set to 0.5, media will play half as fast. * * @method Flash#playbackRate * @return {number} * The value of `playbackRate` from the swf. A number indicating * the current playback speed of the media, where 1 is normal speed. */ /** * Get the value of `autoplay` from the swf. `autoplay` indicates * that the media should start to play as soon as the page is ready. * * @method Flash#autoplay * @return {boolean} * - The value of `autoplay` from the swf. * - True indicates that the media ashould start as soon as the page loads. * - False indicates that the media should not start as soon as the page loads. */ /** * Get the value of `loop` from the swf. `loop` indicates * that the media should return to the start of the media and continue playing once * it reaches the end. * * @method Flash#loop * @return {boolean} * - The value of `loop` from the swf. * - True indicates that playback should seek back to start once * the end of a media is reached. * - False indicates that playback should not loop back to the start when the * end of the media is reached. */ /** * Get the value of `mediaGroup` from the swf. * * @method Flash#mediaGroup * @return {string} * The current value of `mediaGroup` on the swf. */ /** * Get the value of `controller` from the swf. * * @method Flash#controller * @return {string} * The current value of `controller` on the swf. */ /** * Get the value of `controls` from the swf. `controls` indicates * whether the native flash controls should be shown or hidden. * * @method Flash#controls * @return {boolean} * - The value of `controls` from the swf. * - True indicates that native controls should be showing. * - False indicates that native controls should be hidden. */ /** * Get the value of the `volume` from the swf. `volume` indicates the current * audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and * so on. * * @method Flash#volume * @return {number} * The volume percent as a decimal. Value will be between 0-1. */ /** * Get the value of the `muted` from the swf. `muted` indicates the current * audio level should be silent. * * @method Flash#muted * @return {boolean} * - True if the audio should be set to silent * - False otherwise */ /** * Get the value of `defaultMuted` from the swf. `defaultMuted` indicates * whether the media should start muted or not. Only changes the default state of the * media. `muted` and `defaultMuted` can have different values. `muted` indicates the * current state. * * @method Flash#defaultMuted * @return {boolean} * - The value of `defaultMuted` from the swf. * - True indicates that the media should start muted. * - False indicates that the media should not start muted. */ /** * Get the value of `networkState` from the swf. `networkState` indicates * the current network state. It returns an enumeration from the following list: * - 0: NETWORK_EMPTY * - 1: NEWORK_IDLE * - 2: NETWORK_LOADING * - 3: NETWORK_NO_SOURCE * * @method Flash#networkState * @return {number} * The value of `networkState` from the swf. This will be a number * from the list in the description. */ /** * Get the value of `readyState` from the swf. `readyState` indicates * the current state of the media element. It returns an enumeration from the * following list: * - 0: HAVE_NOTHING * - 1: HAVE_METADATA * - 2: HAVE_CURRENT_DATA * - 3: HAVE_FUTURE_DATA * - 4: HAVE_ENOUGH_DATA * * @method Flash#readyState * @return {number} * The value of `readyState` from the swf. This will be a number * from the list in the description. */ /** * Get the value of `readyState` from the swf. `readyState` indicates * the current state of the media element. It returns an enumeration from the * following list: * - 0: HAVE_NOTHING * - 1: HAVE_METADATA * - 2: HAVE_CURRENT_DATA * - 3: HAVE_FUTURE_DATA * - 4: HAVE_ENOUGH_DATA * * @method Flash#readyState * @return {number} * The value of `readyState` from the swf. This will be a number * from the list in the description. */ /** * Get the value of `initialTime` from the swf. * * @method Flash#initialTime * @return {number} * The `initialTime` proprety on the swf. */ /** * Get the value of `startOffsetTime` from the swf. * * @method Flash#startOffsetTime * @return {number} * The `startOffsetTime` proprety on the swf. */ /** * Get the value of `paused` from the swf. `paused` indicates whether the swf * is current paused or not. * * @method Flash#paused * @return {boolean} * The value of `paused` from the swf. */ /** * Get the value of `ended` from the swf. `ended` indicates whether * the media has reached the end or not. * * @method Flash#ended * @return {boolean} * - True indicates that the media has ended. * - False indicates that the media has not ended. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-ended} */ /** * Get the value of `videoWidth` from the swf. `videoWidth` indicates * the current width of the media in css pixels. * * @method Flash#videoWidth * @return {number} * The value of `videoWidth` from the swf. This will be a number * in css pixels. */ /** * Get the value of `videoHeight` from the swf. `videoHeigth` indicates * the current height of the media in css pixels. * * @method Flassh.prototype.videoHeight * @return {number} * The value of `videoHeight` from the swf. This will be a number * in css pixels. */ /** ------------------------------ Setters ------------------------------ **/ /** * Set the value of `rtmpConnection` on the swf. * * @method Flash#setRtmpConnection * @param {string} rtmpConnection * New value to set the `rtmpConnection` property to. */ /** * Set the value of `rtmpStream` on the swf. * * @method Flash#setRtmpStream * @param {string} rtmpStream * New value to set the `rtmpStream` property to. */ /** * Set the value of `preload` on the swf. `preload` indicates * what should download before the media is interacted with. It can have the following * values: * - none: nothing should be downloaded * - metadata: poster and the first few frames of the media may be downloaded to get * media dimensions and other metadata * - auto: allow the media and metadata for the media to be downloaded before * interaction * * @method Flash#setPreload * @param {string} preload * The value of `preload` to set on the swf. Should be 'none', 'metadata', * or 'auto'. */ /** * Set the value of `defaultPlaybackRate` on the swf. * * @method Flash#setDefaultPlaybackRate * @param {number} defaultPlaybackRate * New value to set the `defaultPlaybackRate` property to. */ /** * Set the value of `playbackRate` on the swf. `playbackRate` indicates * the rate at which the media is currently playing back. Examples: * - if playbackRate is set to 2, media will play twice as fast. * - if playbackRate is set to 0.5, media will play half as fast. * * @method Flash#setPlaybackRate * @param {number} playbackRate * New value of `playbackRate` on the swf. A number indicating * the current playback speed of the media, where 1 is normal speed. */ /** * Set the value of `autoplay` on the swf. `autoplay` indicates * that the media should start to play as soon as the page is ready. * * @method Flash#setAutoplay * @param {boolean} autoplay * - The value of `autoplay` from the swf. * - True indicates that the media ashould start as soon as the page loads. * - False indicates that the media should not start as soon as the page loads. */ /** * Set the value of `loop` on the swf. `loop` indicates * that the media should return to the start of the media and continue playing once * it reaches the end. * * @method Flash#setLoop * @param {boolean} loop * - True indicates that playback should seek back to start once * the end of a media is reached. * - False indicates that playback should not loop back to the start when the * end of the media is reached. */ /** * Set the value of `mediaGroup` on the swf. * * @method Flash#setMediaGroup * @param {string} mediaGroup * New value of `mediaGroup` to set on the swf. */ /** * Set the value of `controller` on the swf. * * @method Flash#setController * @param {string} controller * New value the current value of `controller` on the swf. */ /** * Get the value of `controls` from the swf. `controls` indicates * whether the native flash controls should be shown or hidden. * * @method Flash#controls * @return {boolean} * - The value of `controls` from the swf. * - True indicates that native controls should be showing. * - False indicates that native controls should be hidden. */ /** * Set the value of the `volume` on the swf. `volume` indicates the current * audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and * so on. * * @method Flash#setVolume * @param {number} percentAsDecimal * The volume percent as a decimal. Value will be between 0-1. */ /** * Set the value of the `muted` on the swf. `muted` indicates that the current * audio level should be silent. * * @method Flash#setMuted * @param {boolean} muted * - True if the audio should be set to silent * - False otherwise */ /** * Set the value of `defaultMuted` on the swf. `defaultMuted` indicates * whether the media should start muted or not. Only changes the default state of the * media. `muted` and `defaultMuted` can have different values. `muted` indicates the * current state. * * @method Flash#setDefaultMuted * @param {boolean} defaultMuted * - True indicates that the media should start muted. * - False indicates that the media should not start muted. */ /* Flash Support Testing -------------------------------------------------------- */ /** * Check if the Flash tech is currently supported. * * @return {boolean} * - True if the flash tech is supported. * - False otherwise. */ Flash.isSupported = function () { return Flash.version()[0] >= 10; // return swfobject.hasFlashPlayerVersion('10'); }; // Add Source Handler pattern functions to this tech _tech2['default'].withSourceHandlers(Flash); /* * Native source handler for flash, simply passes the source to the swf element. * * @property {Tech~SourceObject} source * The source object * * @property {Flash} tech * The instance of the Flash tech */ Flash.nativeSourceHandler = {}; /** * Check if the Flash can play the given mime type. * * @param {string} type * The mimetype to check * * @return {string} * 'maybe', or '' (empty string) */ Flash.nativeSourceHandler.canPlayType = function (type) { if (type in Flash.formats) { return 'maybe'; } return ''; }; /** * Check if the media element can handle a source natively. * * @param {Tech~SourceObject} source * The source object * * @param {Object} [options] * Options to be passed to the tech. * * @return {string} * 'maybe', or '' (empty string). */ Flash.nativeSourceHandler.canHandleSource = function (source, options) { var type = void 0; function guessMimeType(src) { var ext = Url.getFileExtension(src); if (ext) { return 'video/' + ext; } return ''; } if (!source.type) { type = guessMimeType(source.src); } else { // Strip code information from the type because we don't get that specific type = source.type.replace(/;.*/, '').toLowerCase(); } return Flash.nativeSourceHandler.canPlayType(type); }; /** * Pass the source to the swf. * * @param {Tech~SourceObject} source * The source object * * @param {Flash} tech * The instance of the Flash tech * * @param {Object} [options] * The options to pass to the source */ Flash.nativeSourceHandler.handleSource = function (source, tech, options) { tech.setSrc(source.src); }; /** * noop for native source handler dispose, as cleanup will happen automatically. */ Flash.nativeSourceHandler.dispose = function () {}; // Register the native source handler Flash.registerSourceHandler(Flash.nativeSourceHandler); /** * Flash supported mime types. * * @constant {Object} */ Flash.formats = { 'video/flv': 'FLV', 'video/x-flv': 'FLV', 'video/mp4': 'MP4', 'video/m4v': 'MP4' }; /** * Called when the the swf is "ready", and makes sure that the swf is really * ready using {@link Flash#checkReady} */ Flash.onReady = function (currSwf) { var el = Dom.getEl(currSwf); var tech = el && el.tech; // if there is no el then the tech has been disposed // and the tech element was removed from the player div if (tech && tech.el()) { // check that the flash object is really ready Flash.checkReady(tech); } }; /** * The SWF isn't always ready when it says it is. Sometimes the API functions still * need to be added to the object. If it's not ready, we set a timeout to check again * shortly. * * @param {Flash} tech * The instance of the flash tech to check. */ Flash.checkReady = function (tech) { // stop worrying if the tech has been disposed if (!tech.el()) { return; } // check if API property exists if (tech.el().vjs_getProperty) { // tell tech it's ready tech.triggerReady(); } else { // wait longer this.setTimeout(function () { Flash.checkReady(tech); }, 50); } }; /** * Trigger events from the swf on the Flash Tech. * * @param {number} swfID * The id of the swf that had the event * * @param {string} eventName * The name of the event to trigger */ Flash.onEvent = function (swfID, eventName) { var tech = Dom.getEl(swfID).tech; var args = Array.prototype.slice.call(arguments, 2); // dispatch Flash events asynchronously for two reasons: // - Flash swallows any exceptions generated by javascript it // invokes // - Flash is suspended until the javascript returns which may cause // playback performance issues tech.setTimeout(function () { tech.trigger(eventName, args); }, 1); }; /** * Log errors from the swf on the Flash tech. * * @param {number} swfID * The id of the swf that had an error. * * @param {string} The error string * The error to set on the Flash Tech. * * @return {MediaError|undefined} * - Returns a MediaError when err is 'srcnotfound' * - Returns undefined otherwise. */ Flash.onError = function (swfID, err) { var tech = Dom.getEl(swfID).tech; // trigger MEDIA_ERR_SRC_NOT_SUPPORTED if (err === 'srcnotfound') { return tech.error(4); } // trigger a custom error tech.error('FLASH: ' + err); }; /** * Get the current version of Flash that is in use on the page. * * @return {Array} * an array of versions that are available. */ Flash.version = function () { var version = '0,0,0'; // IE try { version = new _window2['default'].ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version').replace(/\D+/g, ',').match(/^,?(.+),?$/)[1]; // other browsers } catch (e) { try { if (navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) { version = (navigator.plugins['Shockwave Flash 2.0'] || navigator.plugins['Shockwave Flash']).description.replace(/\D+/g, ',').match(/^,?(.+),?$/)[1]; } } catch (err) { // satisfy linter } } return version.split(','); }; /** * Only use for non-iframe embeds. * * @param {Object} swf * The videojs-swf object. * * @param {Object} flashVars * Names and values to use as flash option variables. * * @param {Object} params * Style parameters to set on the object. * * @param {Object} attributes * Attributes to set on the element. * * @return {Element} * The embeded Flash DOM element. */ Flash.embed = function (swf, flashVars, params, attributes) { var code = Flash.getEmbedCode(swf, flashVars, params, attributes); // Get element by embedding code and retrieving created element var obj = Dom.createEl('div', { innerHTML: code }).childNodes[0]; return obj; }; /** * Only use for non-iframe embeds. * * @param {Object} swf * The videojs-swf object. * * @param {Object} flashVars * Names and values to use as flash option variables. * * @param {Object} params * Style parameters to set on the object. * * @param {Object} attributes * Attributes to set on the element. * * @return {Element} * The embeded Flash DOM element. */ Flash.getEmbedCode = function (swf, flashVars, params, attributes) { var objTag = ''; }); attributes = (0, _obj.assign)({ // Add swf to attributes (need both for IE and Others to work) data: swf, // Default to 100% width/height width: '100%', height: '100%' }, attributes); // Create Attributes string Object.getOwnPropertyNames(attributes).forEach(function (key) { attrsString += key + '="' + attributes[key] + '" '; }); return '' + objTag + attrsString + '>' + paramsString + ''; }; // Run Flash through the RTMP decorator (0, _flashRtmp2['default'])(Flash); _component2['default'].registerComponent('Flash', Flash); _tech2['default'].registerTech('Flash', Flash); exports['default'] = Flash; },{"../component":47,"../utils/dom.js":123,"../utils/obj":130,"../utils/time-ranges.js":132,"../utils/url.js":134,"./flash-rtmp":100,"./tech":104,"global/window":137}],102:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _templateObject = _taggedTemplateLiteralLoose(['Text Tracks are being loaded from another origin but the crossorigin attribute isn\'t used.\n This may prevent text tracks from loading.'], ['Text Tracks are being loaded from another origin but the crossorigin attribute isn\'t used.\n This may prevent text tracks from loading.']); var _tech = require('./tech.js'); var _tech2 = _interopRequireDefault(_tech); var _component = require('../component'); var _component2 = _interopRequireDefault(_component); var _dom = require('../utils/dom.js'); var Dom = _interopRequireWildcard(_dom); var _url = require('../utils/url.js'); var Url = _interopRequireWildcard(_url); var _fn = require('../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _log = require('../utils/log.js'); var _log2 = _interopRequireDefault(_log); var _tsml = require('tsml'); var _tsml2 = _interopRequireDefault(_tsml); var _browser = require('../utils/browser.js'); var browser = _interopRequireWildcard(_browser); var _document = require('global/document'); var _document2 = _interopRequireDefault(_document); var _window = require('global/window'); var _window2 = _interopRequireDefault(_window); var _obj = require('../utils/obj'); var _mergeOptions = require('../utils/merge-options.js'); var _mergeOptions2 = _interopRequireDefault(_mergeOptions); var _toTitleCase = require('../utils/to-title-case.js'); var _toTitleCase2 = _interopRequireDefault(_toTitleCase); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file html5.js */ /** * HTML5 Media Controller - Wrapper for HTML5 Media API * * @mixes Tech~SouceHandlerAdditions * @extends Tech */ var Html5 = function (_Tech) { _inherits(Html5, _Tech); /** * Create an instance of this Tech. * * @param {Object} [options] * The key/value store of player options. * * @param {Component~ReadyCallback} ready * Callback function to call when the `HTML5` Tech is ready. */ function Html5(options, ready) { _classCallCheck(this, Html5); var _this = _possibleConstructorReturn(this, _Tech.call(this, options, ready)); var source = options.source; var crossoriginTracks = false; // Set the source if one is provided // 1) Check if the source is new (if not, we want to keep the original so playback isn't interrupted) // 2) Check to see if the network state of the tag was failed at init, and if so, reset the source // anyway so the error gets fired. if (source && (_this.el_.currentSrc !== source.src || options.tag && options.tag.initNetworkState_ === 3)) { _this.setSource(source); } else { _this.handleLateInit_(_this.el_); } if (_this.el_.hasChildNodes()) { var nodes = _this.el_.childNodes; var nodesLength = nodes.length; var removeNodes = []; while (nodesLength--) { var node = nodes[nodesLength]; var nodeName = node.nodeName.toLowerCase(); if (nodeName === 'track') { if (!_this.featuresNativeTextTracks) { // Empty video tag tracks so the built-in player doesn't use them also. // This may not be fast enough to stop HTML5 browsers from reading the tags // so we'll need to turn off any default tracks if we're manually doing // captions and subtitles. videoElement.textTracks removeNodes.push(node); } else { // store HTMLTrackElement and TextTrack to remote list _this.remoteTextTrackEls().addTrackElement_(node); _this.remoteTextTracks().addTrack_(node.track); if (!crossoriginTracks && !_this.el_.hasAttribute('crossorigin') && Url.isCrossOrigin(node.src)) { crossoriginTracks = true; } } } } for (var i = 0; i < removeNodes.length; i++) { _this.el_.removeChild(removeNodes[i]); } } // TODO: add text tracks into this list var trackTypes = ['audio', 'video']; // ProxyNative Video/Audio Track trackTypes.forEach(function (type) { var elTracks = _this.el()[type + 'Tracks']; var techTracks = _this[type + 'Tracks'](); var capitalType = (0, _toTitleCase2['default'])(type); if (!_this['featuresNative' + capitalType + 'Tracks'] || !elTracks || !elTracks.addEventListener) { return; } _this['handle' + capitalType + 'TrackChange_'] = function (e) { techTracks.trigger({ type: 'change', target: techTracks, currentTarget: techTracks, srcElement: techTracks }); }; _this['handle' + capitalType + 'TrackAdd_'] = function (e) { return techTracks.addTrack(e.track); }; _this['handle' + capitalType + 'TrackRemove_'] = function (e) { return techTracks.removeTrack(e.track); }; elTracks.addEventListener('change', _this['handle' + capitalType + 'TrackChange_']); elTracks.addEventListener('addtrack', _this['handle' + capitalType + 'TrackAdd_']); elTracks.addEventListener('removetrack', _this['handle' + capitalType + 'TrackRemove_']); _this['removeOld' + capitalType + 'Tracks_'] = function (e) { return _this.removeOldTracks_(techTracks, elTracks); }; // Remove (native) tracks that are not used anymore _this.on('loadstart', _this['removeOld' + capitalType + 'Tracks_']); }); if (_this.featuresNativeTextTracks) { if (crossoriginTracks) { _log2['default'].warn((0, _tsml2['default'])(_templateObject)); } _this.handleTextTrackChange_ = Fn.bind(_this, _this.handleTextTrackChange); _this.handleTextTrackAdd_ = Fn.bind(_this, _this.handleTextTrackAdd); _this.handleTextTrackRemove_ = Fn.bind(_this, _this.handleTextTrackRemove); _this.proxyNativeTextTracks_(); } // prevent iOS Safari from disabling metadata text tracks during native playback _this.restoreMetadataTracksInIOSNativePlayer_(); // Determine if native controls should be used // Our goal should be to get the custom controls on mobile solid everywhere // so we can remove this all together. Right now this will block custom // controls on touch enabled laptops like the Chrome Pixel if ((browser.TOUCH_ENABLED || browser.IS_IPHONE || browser.IS_NATIVE_ANDROID) && options.nativeControlsForTouch === true) { _this.setControls(true); } // on iOS, we want to proxy `webkitbeginfullscreen` and `webkitendfullscreen` // into a `fullscreenchange` event _this.proxyWebkitFullscreen_(); _this.triggerReady(); return _this; } /** * Dispose of `HTML5` media element and remove all tracks. */ Html5.prototype.dispose = function dispose() { var _this2 = this; // Un-ProxyNativeTracks ['audio', 'video', 'text'].forEach(function (type) { var capitalType = (0, _toTitleCase2['default'])(type); var tl = _this2.el_[type + 'Tracks']; if (tl && tl.removeEventListener) { tl.removeEventListener('change', _this2['handle' + capitalType + 'TrackChange_']); tl.removeEventListener('addtrack', _this2['handle' + capitalType + 'TrackAdd_']); tl.removeEventListener('removetrack', _this2['handle' + capitalType + 'TrackRemove_']); } // Stop removing old text tracks if (tl) { _this2.off('loadstart', _this2['removeOld' + capitalType + 'Tracks_']); } }); Html5.disposeMediaElement(this.el_); // tech will handle clearing of the emulated track list _Tech.prototype.dispose.call(this); }; /** * When a captions track is enabled in the iOS Safari native player, all other * tracks are disabled (including metadata tracks), which nulls all of their * associated cue points. This will restore metadata tracks to their pre-fullscreen * state in those cases so that cue points are not needlessly lost. * * @private */ Html5.prototype.restoreMetadataTracksInIOSNativePlayer_ = function restoreMetadataTracksInIOSNativePlayer_() { var textTracks = this.textTracks(); var metadataTracksPreFullscreenState = void 0; // captures a snapshot of every metadata track's current state var takeMetadataTrackSnapshot = function takeMetadataTrackSnapshot() { metadataTracksPreFullscreenState = []; for (var i = 0; i < textTracks.length; i++) { var track = textTracks[i]; if (track.kind === 'metadata') { metadataTracksPreFullscreenState.push({ track: track, storedMode: track.mode }); } } }; // snapshot each metadata track's initial state, and update the snapshot // each time there is a track 'change' event takeMetadataTrackSnapshot(); textTracks.addEventListener('change', takeMetadataTrackSnapshot); var restoreTrackMode = function restoreTrackMode() { for (var i = 0; i < metadataTracksPreFullscreenState.length; i++) { var storedTrack = metadataTracksPreFullscreenState[i]; if (storedTrack.track.mode === 'disabled' && storedTrack.track.mode !== storedTrack.storedMode) { storedTrack.track.mode = storedTrack.storedMode; } } // we only want this handler to be executed on the first 'change' event textTracks.removeEventListener('change', restoreTrackMode); }; // when we enter fullscreen playback, stop updating the snapshot and // restore all track modes to their pre-fullscreen state this.on('webkitbeginfullscreen', function () { textTracks.removeEventListener('change', takeMetadataTrackSnapshot); // remove the listener before adding it just in case it wasn't previously removed textTracks.removeEventListener('change', restoreTrackMode); textTracks.addEventListener('change', restoreTrackMode); }); // start updating the snapshot again after leaving fullscreen this.on('webkitendfullscreen', function () { // remove the listener before adding it just in case it wasn't previously removed textTracks.removeEventListener('change', takeMetadataTrackSnapshot); textTracks.addEventListener('change', takeMetadataTrackSnapshot); // remove the restoreTrackMode handler in case it wasn't triggered during fullscreen playback textTracks.removeEventListener('change', restoreTrackMode); }); }; /** * Create the `Html5` Tech's DOM element. * * @return {Element} * The element that gets created. */ Html5.prototype.createEl = function createEl() { var el = this.options_.tag; // Check if this browser supports moving the element into the box. // On the iPhone video will break if you move the element, // So we have to create a brand new element. // If we ingested the player div, we do not need to move the media element. if (!el || !(this.options_.playerElIngest || this.movingMediaElementInDOM)) { // If the original tag is still there, clone and remove it. if (el) { var clone = el.cloneNode(true); if (el.parentNode) { el.parentNode.insertBefore(clone, el); } Html5.disposeMediaElement(el); el = clone; } else { el = _document2['default'].createElement('video'); // determine if native controls should be used var tagAttributes = this.options_.tag && Dom.getElAttributes(this.options_.tag); var attributes = (0, _mergeOptions2['default'])({}, tagAttributes); if (!browser.TOUCH_ENABLED || this.options_.nativeControlsForTouch !== true) { delete attributes.controls; } Dom.setElAttributes(el, (0, _obj.assign)(attributes, { id: this.options_.techId, 'class': 'vjs-tech' })); } el.playerId = this.options_.playerId; } // Update specific tag settings, in case they were overridden var settingsAttrs = ['autoplay', 'preload', 'loop', 'muted', 'playsinline']; for (var i = settingsAttrs.length - 1; i >= 0; i--) { var attr = settingsAttrs[i]; var overwriteAttrs = {}; if (typeof this.options_[attr] !== 'undefined') { overwriteAttrs[attr] = this.options_[attr]; } Dom.setElAttributes(el, overwriteAttrs); } return el; }; /** * This will be triggered if the loadstart event has already fired, before videojs was * ready. Two known examples of when this can happen are: * 1. If we're loading the playback object after it has started loading * 2. The media is already playing the (often with autoplay on) then * * This function will fire another loadstart so that videojs can catchup. * * @fires Tech#loadstart * * @return {undefined} * returns nothing. */ Html5.prototype.handleLateInit_ = function handleLateInit_(el) { if (el.networkState === 0 || el.networkState === 3) { // The video element hasn't started loading the source yet // or didn't find a source return; } if (el.readyState === 0) { // NetworkState is set synchronously BUT loadstart is fired at the // end of the current stack, usually before setInterval(fn, 0). // So at this point we know loadstart may have already fired or is // about to fire, and either way the player hasn't seen it yet. // We don't want to fire loadstart prematurely here and cause a // double loadstart so we'll wait and see if it happens between now // and the next loop, and fire it if not. // HOWEVER, we also want to make sure it fires before loadedmetadata // which could also happen between now and the next loop, so we'll // watch for that also. var loadstartFired = false; var setLoadstartFired = function setLoadstartFired() { loadstartFired = true; }; this.on('loadstart', setLoadstartFired); var triggerLoadstart = function triggerLoadstart() { // We did miss the original loadstart. Make sure the player // sees loadstart before loadedmetadata if (!loadstartFired) { this.trigger('loadstart'); } }; this.on('loadedmetadata', triggerLoadstart); this.ready(function () { this.off('loadstart', setLoadstartFired); this.off('loadedmetadata', triggerLoadstart); if (!loadstartFired) { // We did miss the original native loadstart. Fire it now. this.trigger('loadstart'); } }); return; } // From here on we know that loadstart already fired and we missed it. // The other readyState events aren't as much of a problem if we double // them, so not going to go to as much trouble as loadstart to prevent // that unless we find reason to. var eventsToTrigger = ['loadstart']; // loadedmetadata: newly equal to HAVE_METADATA (1) or greater eventsToTrigger.push('loadedmetadata'); // loadeddata: newly increased to HAVE_CURRENT_DATA (2) or greater if (el.readyState >= 2) { eventsToTrigger.push('loadeddata'); } // canplay: newly increased to HAVE_FUTURE_DATA (3) or greater if (el.readyState >= 3) { eventsToTrigger.push('canplay'); } // canplaythrough: newly equal to HAVE_ENOUGH_DATA (4) if (el.readyState >= 4) { eventsToTrigger.push('canplaythrough'); } // We still need to give the player time to add event listeners this.ready(function () { eventsToTrigger.forEach(function (type) { this.trigger(type); }, this); }); }; /** * Add event listeners to native text track events. This adds the native text tracks * to our emulated {@link TextTrackList}. */ Html5.prototype.proxyNativeTextTracks_ = function proxyNativeTextTracks_() { var tt = this.el().textTracks; if (tt) { // Add tracks - if player is initialised after DOM loaded, textTracks // will not trigger addtrack for (var i = 0; i < tt.length; i++) { this.textTracks().addTrack_(tt[i]); } if (tt.addEventListener) { tt.addEventListener('change', this.handleTextTrackChange_); tt.addEventListener('addtrack', this.handleTextTrackAdd_); tt.addEventListener('removetrack', this.handleTextTrackRemove_); } // Remove (native) texttracks that are not used anymore this.on('loadstart', this.removeOldTextTracks_); } }; /** * Handle any {@link TextTrackList} `change` event. * * @param {EventTarget~Event} e * The `change` event that caused this to run. * * @listens TextTrackList#change */ Html5.prototype.handleTextTrackChange = function handleTextTrackChange(e) { var tt = this.textTracks(); this.textTracks().trigger({ type: 'change', target: tt, currentTarget: tt, srcElement: tt }); }; /** * Handle any {@link TextTrackList} `addtrack` event. * * @param {EventTarget~Event} e * The `addtrack` event that caused this to run. * * @listens TextTrackList#addtrack */ Html5.prototype.handleTextTrackAdd = function handleTextTrackAdd(e) { this.textTracks().addTrack_(e.track); }; /** * Handle any {@link TextTrackList} `removetrack` event. * * @param {EventTarget~Event} e * The `removetrack` event that caused this to run. * * @listens TextTrackList#removetrack */ Html5.prototype.handleTextTrackRemove = function handleTextTrackRemove(e) { this.textTracks().removeTrack_(e.track); }; /** * This function removes any {@link AudioTrack}s, {@link VideoTrack}s, or * {@link TextTrack}s that are not in the media elements TrackList. * * @param {TrackList} techTracks * HTML5 Tech's TrackList to search through * * @param {TrackList} elTracks * HTML5 media elements TrackList to search trough. * * @private */ Html5.prototype.removeOldTracks_ = function removeOldTracks_(techTracks, elTracks) { // This will loop over the techTracks and check if they are still used by the HTML5 media element // If not, they will be removed from the emulated list var removeTracks = []; if (!elTracks) { return; } for (var i = 0; i < techTracks.length; i++) { var techTrack = techTracks[i]; var found = false; for (var j = 0; j < elTracks.length; j++) { if (elTracks[j] === techTrack) { found = true; break; } } if (!found) { removeTracks.push(techTrack); } } for (var _i = 0; _i < removeTracks.length; _i++) { var track = removeTracks[_i]; techTracks.removeTrack_(track); } }; /** * Remove {@link TextTrack}s that dont exist in the native track list from our * emulated {@link TextTrackList}. * * @listens Tech#loadstart */ Html5.prototype.removeOldTextTracks_ = function removeOldTextTracks_(e) { var techTracks = this.textTracks(); var elTracks = this.el().textTracks; this.removeOldTracks_(techTracks, elTracks); }; /** * Called by {@link Player#play} to play using the `Html5` `Tech`. */ Html5.prototype.play = function play() { var playPromise = this.el_.play(); // Catch/silence error when a pause interrupts a play request // on browsers which return a promise if (playPromise !== undefined && typeof playPromise.then === 'function') { playPromise.then(null, function (e) {}); } }; /** * Set current time for the `HTML5` tech. * * @param {number} seconds * Set the current time of the media to this. */ Html5.prototype.setCurrentTime = function setCurrentTime(seconds) { try { this.el_.currentTime = seconds; } catch (e) { (0, _log2['default'])(e, 'Video is not ready. (Video.js)'); // this.warning(VideoJS.warnings.videoNotReady); } }; /** * Get the current duration of the HTML5 media element. * * @return {number} * The duration of the media or 0 if there is no duration. */ Html5.prototype.duration = function duration() { var _this3 = this; // Android Chrome will report duration as Infinity for VOD HLS until after // playback has started, which triggers the live display erroneously. // Return NaN if playback has not started and trigger a durationupdate once // the duration can be reliably known. if (this.el_.duration === Infinity && browser.IS_ANDROID && browser.IS_CHROME) { if (this.el_.currentTime === 0) { // Wait for the first `timeupdate` with currentTime > 0 - there may be // several with 0 var checkProgress = function checkProgress() { if (_this3.el_.currentTime > 0) { // Trigger durationchange for genuinely live video if (_this3.el_.duration === Infinity) { _this3.trigger('durationchange'); } _this3.off('timeupdate', checkProgress); } }; this.on('timeupdate', checkProgress); return NaN; } } return this.el_.duration || NaN; }; /** * Get the current width of the HTML5 media element. * * @return {number} * The width of the HTML5 media element. */ Html5.prototype.width = function width() { return this.el_.offsetWidth; }; /** * Get the current height of the HTML5 media element. * * @return {number} * The heigth of the HTML5 media element. */ Html5.prototype.height = function height() { return this.el_.offsetHeight; }; /** * Proxy iOS `webkitbeginfullscreen` and `webkitendfullscreen` into * `fullscreenchange` event. * * @private * @fires fullscreenchange * @listens webkitendfullscreen * @listens webkitbeginfullscreen * @listens webkitbeginfullscreen */ Html5.prototype.proxyWebkitFullscreen_ = function proxyWebkitFullscreen_() { var _this4 = this; if (!('webkitDisplayingFullscreen' in this.el_)) { return; } var endFn = function endFn() { this.trigger('fullscreenchange', { isFullscreen: false }); }; var beginFn = function beginFn() { if ('webkitPresentationMode' in this.el_ && this.el_.webkitPresentationMode !== 'picture-in-picture') { this.one('webkitendfullscreen', endFn); this.trigger('fullscreenchange', { isFullscreen: true }); } }; this.on('webkitbeginfullscreen', beginFn); this.on('dispose', function () { _this4.off('webkitbeginfullscreen', beginFn); _this4.off('webkitendfullscreen', endFn); }); }; /** * Check if fullscreen is supported on the current playback device. * * @return {boolean} * - True if fullscreen is supported. * - False if fullscreen is not supported. */ Html5.prototype.supportsFullScreen = function supportsFullScreen() { if (typeof this.el_.webkitEnterFullScreen === 'function') { var userAgent = _window2['default'].navigator && _window2['default'].navigator.userAgent || ''; // Seems to be broken in Chromium/Chrome && Safari in Leopard if (/Android/.test(userAgent) || !/Chrome|Mac OS X 10.5/.test(userAgent)) { return true; } } return false; }; /** * Request that the `HTML5` Tech enter fullscreen. */ Html5.prototype.enterFullScreen = function enterFullScreen() { var video = this.el_; if (video.paused && video.networkState <= video.HAVE_METADATA) { // attempt to prime the video element for programmatic access // this isn't necessary on the desktop but shouldn't hurt this.el_.play(); // playing and pausing synchronously during the transition to fullscreen // can get iOS ~6.1 devices into a play/pause loop this.setTimeout(function () { video.pause(); video.webkitEnterFullScreen(); }, 0); } else { video.webkitEnterFullScreen(); } }; /** * Request that the `HTML5` Tech exit fullscreen. */ Html5.prototype.exitFullScreen = function exitFullScreen() { this.el_.webkitExitFullScreen(); }; /** * A getter/setter for the `Html5` Tech's source object. * > Note: Please use {@link Html5#setSource} * * @param {Tech~SourceObject} [src] * The source object you want to set on the `HTML5` techs element. * * @return {Tech~SourceObject|undefined} * - The current source object when a source is not passed in. * - undefined when setting * * @deprecated Since version 5. */ Html5.prototype.src = function src(_src) { if (_src === undefined) { return this.el_.src; } // Setting src through `src` instead of `setSrc` will be deprecated this.setSrc(_src); }; /** * Reset the tech by removing all sources and then calling * {@link Html5.resetMediaElement}. */ Html5.prototype.reset = function reset() { Html5.resetMediaElement(this.el_); }; /** * Get the current source on the `HTML5` Tech. Falls back to returning the source from * the HTML5 media element. * * @return {Tech~SourceObject} * The current source object from the HTML5 tech. With a fallback to the * elements source. */ Html5.prototype.currentSrc = function currentSrc() { if (this.currentSource_) { return this.currentSource_.src; } return this.el_.currentSrc; }; /** * Set controls attribute for the HTML5 media Element. * * @param {string} val * Value to set the controls attribute to */ Html5.prototype.setControls = function setControls(val) { this.el_.controls = !!val; }; /** * Create and returns a remote {@link TextTrack} object. * * @param {string} kind * `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata) * * @param {string} [label] * Label to identify the text track * * @param {string} [language] * Two letter language abbreviation * * @return {TextTrack} * The TextTrack that gets created. */ Html5.prototype.addTextTrack = function addTextTrack(kind, label, language) { if (!this.featuresNativeTextTracks) { return _Tech.prototype.addTextTrack.call(this, kind, label, language); } return this.el_.addTextTrack(kind, label, language); }; /** * Creates either native TextTrack or an emulated TextTrack depending * on the value of `featuresNativeTextTracks` * * @param {Object} options * The object should contain the options to intialize the TextTrack with. * * @param {string} [options.kind] * `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata). * * @param {string} [options.label]. * Label to identify the text track * * @param {string} [options.language] * Two letter language abbreviation. * * @param {boolean} [options.default] * Default this track to on. * * @param {string} [options.id] * The internal id to assign this track. * * @param {string} [options.src] * A source url for the track. * * @return {HTMLTrackElement} * The track element that gets created. */ Html5.prototype.createRemoteTextTrack = function createRemoteTextTrack(options) { if (!this.featuresNativeTextTracks) { return _Tech.prototype.createRemoteTextTrack.call(this, options); } var htmlTrackElement = _document2['default'].createElement('track'); if (options.kind) { htmlTrackElement.kind = options.kind; } if (options.label) { htmlTrackElement.label = options.label; } if (options.language || options.srclang) { htmlTrackElement.srclang = options.language || options.srclang; } if (options['default']) { htmlTrackElement['default'] = options['default']; } if (options.id) { htmlTrackElement.id = options.id; } if (options.src) { htmlTrackElement.src = options.src; } return htmlTrackElement; }; /** * Creates a remote text track object and returns an html track element. * * @param {Object} options The object should contain values for * kind, language, label, and src (location of the WebVTT file) * @param {Boolean} [manualCleanup=true] if set to false, the TextTrack will be * automatically removed from the video element whenever the source changes * @return {HTMLTrackElement} An Html Track Element. * This can be an emulated {@link HTMLTrackElement} or a native one. * @deprecated The default value of the "manualCleanup" parameter will default * to "false" in upcoming versions of Video.js */ Html5.prototype.addRemoteTextTrack = function addRemoteTextTrack(options, manualCleanup) { var htmlTrackElement = _Tech.prototype.addRemoteTextTrack.call(this, options, manualCleanup); if (this.featuresNativeTextTracks) { this.el().appendChild(htmlTrackElement); } return htmlTrackElement; }; /** * Remove remote `TextTrack` from `TextTrackList` object * * @param {TextTrack} track * `TextTrack` object to remove */ Html5.prototype.removeRemoteTextTrack = function removeRemoteTextTrack(track) { _Tech.prototype.removeRemoteTextTrack.call(this, track); if (this.featuresNativeTextTracks) { var tracks = this.$$('track'); var i = tracks.length; while (i--) { if (track === tracks[i] || track === tracks[i].track) { this.el().removeChild(tracks[i]); } } } }; /** * Get the value of `playsinline` from the media element. `playsinline` indicates * to the browser that non-fullscreen playback is preferred when fullscreen * playback is the native default, such as in iOS Safari. * * @method Html5#playsinline * @return {boolean} * - The value of `playsinline` from the media element. * - True indicates that the media should play inline. * - False indicates that the media should not play inline. * * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline} */ Html5.prototype.playsinline = function playsinline() { return this.el_.hasAttribute('playsinline'); }; /** * Set the value of `playsinline` from the media element. `playsinline` indicates * to the browser that non-fullscreen playback is preferred when fullscreen * playback is the native default, such as in iOS Safari. * * @method Html5#setPlaysinline * @param {boolean} playsinline * - True indicates that the media should play inline. * - False indicates that the media should not play inline. * * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline} */ Html5.prototype.setPlaysinline = function setPlaysinline(value) { if (value) { this.el_.setAttribute('playsinline', 'playsinline'); } else { this.el_.removeAttribute('playsinline'); } }; /** * Gets available media playback quality metrics as specified by the W3C's Media * Playback Quality API. * * @see [Spec]{@link https://wicg.github.io/media-playback-quality} * * @return {Object} * An object with supported media playback quality metrics */ Html5.prototype.getVideoPlaybackQuality = function getVideoPlaybackQuality() { if (typeof this.el().getVideoPlaybackQuality === 'function') { return this.el().getVideoPlaybackQuality(); } var videoPlaybackQuality = {}; if (typeof this.el().webkitDroppedFrameCount !== 'undefined' && typeof this.el().webkitDecodedFrameCount !== 'undefined') { videoPlaybackQuality.droppedVideoFrames = this.el().webkitDroppedFrameCount; videoPlaybackQuality.totalVideoFrames = this.el().webkitDecodedFrameCount; } if (_window2['default'].performance && typeof _window2['default'].performance.now === 'function') { videoPlaybackQuality.creationTime = _window2['default'].performance.now(); } else if (_window2['default'].performance && _window2['default'].performance.timing && typeof _window2['default'].performance.timing.navigationStart === 'number') { videoPlaybackQuality.creationTime = _window2['default'].Date.now() - _window2['default'].performance.timing.navigationStart; } return videoPlaybackQuality; }; return Html5; }(_tech2['default']); /* HTML5 Support Testing ---------------------------------------------------- */ if (Dom.isReal()) { /** * Element for testing browser HTML5 media capabilities * * @type {Element} * @constant * @private */ Html5.TEST_VID = _document2['default'].createElement('video'); var track = _document2['default'].createElement('track'); track.kind = 'captions'; track.srclang = 'en'; track.label = 'English'; Html5.TEST_VID.appendChild(track); } /** * Check if HTML5 media is supported by this browser/device. * * @return {boolean} * - True if HTML5 media is supported. * - False if HTML5 media is not supported. */ Html5.isSupported = function () { // IE9 with no Media Player is a LIAR! (#984) try { Html5.TEST_VID.volume = 0.5; } catch (e) { return false; } return !!(Html5.TEST_VID && Html5.TEST_VID.canPlayType); }; /** * Check if the volume can be changed in this browser/device. * Volume cannot be changed in a lot of mobile devices. * Specifically, it can't be changed from 1 on iOS. * * @return {boolean} * - True if volume can be controlled * - False otherwise */ Html5.canControlVolume = function () { // IE will error if Windows Media Player not installed #3315 try { var volume = Html5.TEST_VID.volume; Html5.TEST_VID.volume = volume / 2 + 0.1; return volume !== Html5.TEST_VID.volume; } catch (e) { return false; } }; /** * Check if the playback rate can be changed in this browser/device. * * @return {boolean} * - True if playback rate can be controlled * - False otherwise */ Html5.canControlPlaybackRate = function () { // Playback rate API is implemented in Android Chrome, but doesn't do anything // https://github.com/videojs/video.js/issues/3180 if (browser.IS_ANDROID && browser.IS_CHROME && browser.CHROME_VERSION < 58) { return false; } // IE will error if Windows Media Player not installed #3315 try { var playbackRate = Html5.TEST_VID.playbackRate; Html5.TEST_VID.playbackRate = playbackRate / 2 + 0.1; return playbackRate !== Html5.TEST_VID.playbackRate; } catch (e) { return false; } }; /** * Check to see if native `TextTrack`s are supported by this browser/device. * * @return {boolean} * - True if native `TextTrack`s are supported. * - False otherwise */ Html5.supportsNativeTextTracks = function () { return browser.IS_ANY_SAFARI; }; /** * Check to see if native `VideoTrack`s are supported by this browser/device * * @return {boolean} * - True if native `VideoTrack`s are supported. * - False otherwise */ Html5.supportsNativeVideoTracks = function () { return !!(Html5.TEST_VID && Html5.TEST_VID.videoTracks); }; /** * Check to see if native `AudioTrack`s are supported by this browser/device * * @return {boolean} * - True if native `AudioTrack`s are supported. * - False otherwise */ Html5.supportsNativeAudioTracks = function () { return !!(Html5.TEST_VID && Html5.TEST_VID.audioTracks); }; /** * An array of events available on the Html5 tech. * * @private * @type {Array} */ Html5.Events = ['loadstart', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'seeking', 'seeked', 'ended', 'durationchange', 'timeupdate', 'progress', 'play', 'pause', 'ratechange', 'volumechange']; /** * Boolean indicating whether the `Tech` supports volume control. * * @type {boolean} * @default {@link Html5.canControlVolume} */ Html5.prototype.featuresVolumeControl = Html5.canControlVolume(); /** * Boolean indicating whether the `Tech` supports changing the speed at which the media * plays. Examples: * - Set player to play 2x (twice) as fast * - Set player to play 0.5x (half) as fast * * @type {boolean} * @default {@link Html5.canControlPlaybackRate} */ Html5.prototype.featuresPlaybackRate = Html5.canControlPlaybackRate(); /** * Boolean indicating whether the `HTML5` tech currently supports the media element * moving in the DOM. iOS breaks if you move the media element, so this is set this to * false there. Everywhere else this should be true. * * @type {boolean} * @default */ Html5.prototype.movingMediaElementInDOM = !browser.IS_IOS; // TODO: Previous comment: No longer appears to be used. Can probably be removed. // Is this true? /** * Boolean indicating whether the `HTML5` tech currently supports automatic media resize * when going into fullscreen. * * @type {boolean} * @default */ Html5.prototype.featuresFullscreenResize = true; /** * Boolean indicating whether the `HTML5` tech currently supports the progress event. * If this is false, manual `progress` events will be triggred instead. * * @type {boolean} * @default */ Html5.prototype.featuresProgressEvents = true; /** * Boolean indicating whether the `HTML5` tech currently supports the timeupdate event. * If this is false, manual `timeupdate` events will be triggred instead. * * @default */ Html5.prototype.featuresTimeupdateEvents = true; /** * Boolean indicating whether the `HTML5` tech currently supports native `TextTrack`s. * * @type {boolean} * @default {@link Html5.supportsNativeTextTracks} */ Html5.prototype.featuresNativeTextTracks = Html5.supportsNativeTextTracks(); /** * Boolean indicating whether the `HTML5` tech currently supports native `VideoTrack`s. * * @type {boolean} * @default {@link Html5.supportsNativeVideoTracks} */ Html5.prototype.featuresNativeVideoTracks = Html5.supportsNativeVideoTracks(); /** * Boolean indicating whether the `HTML5` tech currently supports native `AudioTrack`s. * * @type {boolean} * @default {@link Html5.supportsNativeAudioTracks} */ Html5.prototype.featuresNativeAudioTracks = Html5.supportsNativeAudioTracks(); // HTML5 Feature detection and Device Fixes --------------------------------- // var canPlayType = Html5.TEST_VID && Html5.TEST_VID.constructor.prototype.canPlayType; var mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i; var mp4RE = /^video\/mp4/i; Html5.patchCanPlayType = function () { // Android 4.0 and above can play HLS to some extent but it reports being unable to do so if (browser.ANDROID_VERSION >= 4.0 && !browser.IS_FIREFOX) { Html5.TEST_VID.constructor.prototype.canPlayType = function (type) { if (type && mpegurlRE.test(type)) { return 'maybe'; } return canPlayType.call(this, type); }; // Override Android 2.2 and less canPlayType method which is broken } else if (browser.IS_OLD_ANDROID) { Html5.TEST_VID.constructor.prototype.canPlayType = function (type) { if (type && mp4RE.test(type)) { return 'maybe'; } return canPlayType.call(this, type); }; } }; Html5.unpatchCanPlayType = function () { var r = Html5.TEST_VID.constructor.prototype.canPlayType; Html5.TEST_VID.constructor.prototype.canPlayType = canPlayType; return r; }; // by default, patch the media element Html5.patchCanPlayType(); Html5.disposeMediaElement = function (el) { if (!el) { return; } if (el.parentNode) { el.parentNode.removeChild(el); } // remove any child track or source nodes to prevent their loading while (el.hasChildNodes()) { el.removeChild(el.firstChild); } // remove any src reference. not setting `src=''` because that causes a warning // in firefox el.removeAttribute('src'); // force the media element to update its loading state by calling load() // however IE on Windows 7N has a bug that throws an error so need a try/catch (#793) if (typeof el.load === 'function') { // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473) (function () { try { el.load(); } catch (e) { // not supported } })(); } }; Html5.resetMediaElement = function (el) { if (!el) { return; } var sources = el.querySelectorAll('source'); var i = sources.length; while (i--) { el.removeChild(sources[i]); } // remove any src reference. // not setting `src=''` because that throws an error el.removeAttribute('src'); if (typeof el.load === 'function') { // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473) (function () { try { el.load(); } catch (e) { // satisfy linter } })(); } }; /* Native HTML5 element property wrapping ----------------------------------- */ // Wrap native properties with a getter [ /** * Get the value of `paused` from the media element. `paused` indicates whether the media element * is currently paused or not. * * @method Html5#paused * @return {boolean} * The value of `paused` from the media element. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-paused} */ 'paused', /** * Get the value of `currentTime` from the media element. `currentTime` indicates * the current second that the media is at in playback. * * @method Html5#currentTime * @return {number} * The value of `currentTime` from the media element. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-currenttime} */ 'currentTime', /** * Get the value of `buffered` from the media element. `buffered` is a `TimeRange` * object that represents the parts of the media that are already downloaded and * available for playback. * * @method Html5#buffered * @return {TimeRange} * The value of `buffered` from the media element. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-buffered} */ 'buffered', /** * Get the value of `volume` from the media element. `volume` indicates * the current playback volume of audio for a media. `volume` will be a value from 0 * (silent) to 1 (loudest and default). * * @method Html5#volume * @return {number} * The value of `volume` from the media element. Value will be between 0-1. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume} */ 'volume', /** * Get the value of `muted` from the media element. `muted` indicates * that the volume for the media should be set to silent. This does not actually change * the `volume` attribute. * * @method Html5#muted * @return {boolean} * - True if the value of `volume` should be ignored and the audio set to silent. * - False if the value of `volume` should be used. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted} */ 'muted', /** * Get the value of `poster` from the media element. `poster` indicates * that the url of an image file that can/will be shown when no media data is available. * * @method Html5#poster * @return {string} * The value of `poster` from the media element. Value will be a url to an * image. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-video-poster} */ 'poster', /** * Get the value of `preload` from the media element. `preload` indicates * what should download before the media is interacted with. It can have the following * values: * - none: nothing should be downloaded * - metadata: poster and the first few frames of the media may be downloaded to get * media dimensions and other metadata * - auto: allow the media and metadata for the media to be downloaded before * interaction * * @method Html5#preload * @return {string} * The value of `preload` from the media element. Will be 'none', 'metadata', * or 'auto'. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload} */ 'preload', /** * Get the value of `autoplay` from the media element. `autoplay` indicates * that the media should start to play as soon as the page is ready. * * @method Html5#autoplay * @return {boolean} * - The value of `autoplay` from the media element. * - True indicates that the media should start as soon as the page loads. * - False indicates that the media should not start as soon as the page loads. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay} */ 'autoplay', /** * Get the value of `controls` from the media element. `controls` indicates * whether the native media controls should be shown or hidden. * * @method Html5#controls * @return {boolean} * - The value of `controls` from the media element. * - True indicates that native controls should be showing. * - False indicates that native controls should be hidden. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-controls} */ 'controls', /** * Get the value of `loop` from the media element. `loop` indicates * that the media should return to the start of the media and continue playing once * it reaches the end. * * @method Html5#loop * @return {boolean} * - The value of `loop` from the media element. * - True indicates that playback should seek back to start once * the end of a media is reached. * - False indicates that playback should not loop back to the start when the * end of the media is reached. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop} */ 'loop', /** * Get the value of the `error` from the media element. `error` indicates any * MediaError that may have occured during playback. If error returns null there is no * current error. * * @method Html5#error * @return {MediaError|null} * The value of `error` from the media element. Will be `MediaError` if there * is a current error and null otherwise. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-error} */ 'error', /** * Get the value of `seeking` from the media element. `seeking` indicates whether the * media is currently seeking to a new position or not. * * @method Html5#seeking * @return {boolean} * - The value of `seeking` from the media element. * - True indicates that the media is currently seeking to a new position. * - Flase indicates that the media is not seeking to a new position at this time. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seeking} */ 'seeking', /** * Get the value of `seekable` from the media element. `seekable` returns a * `TimeRange` object indicating ranges of time that can currently be `seeked` to. * * @method Html5#seekable * @return {TimeRange} * The value of `seekable` from the media element. A `TimeRange` object * indicating the current ranges of time that can be seeked to. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-seekable} */ 'seekable', /** * Get the value of `ended` from the media element. `ended` indicates whether * the media has reached the end or not. * * @method Html5#ended * @return {boolean} * - The value of `ended` from the media element. * - True indicates that the media has ended. * - False indicates that the media has not ended. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-ended} */ 'ended', /** * Get the value of `defaultMuted` from the media element. `defaultMuted` indicates * whether the media should start muted or not. Only changes the default state of the * media. `muted` and `defaultMuted` can have different values. `muted` indicates the * current state. * * @method Html5#defaultMuted * @return {boolean} * - The value of `defaultMuted` from the media element. * - True indicates that the media should start muted. * - False indicates that the media should not start muted * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-defaultmuted} */ 'defaultMuted', /** * Get the value of `playbackRate` from the media element. `playbackRate` indicates * the rate at which the media is currently playing back. Examples: * - if playbackRate is set to 2, media will play twice as fast. * - if playbackRate is set to 0.5, media will play half as fast. * * @method Html5#playbackRate * @return {number} * The value of `playbackRate` from the media element. A number indicating * the current playback speed of the media, where 1 is normal speed. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate} */ 'playbackRate', /** * Get the value of `played` from the media element. `played` returns a `TimeRange` * object representing points in the media timeline that have been played. * * @method Html5#played * @return {TimeRange} * The value of `played` from the media element. A `TimeRange` object indicating * the ranges of time that have been played. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-played} */ 'played', /** * Get the value of `networkState` from the media element. `networkState` indicates * the current network state. It returns an enumeration from the following list: * - 0: NETWORK_EMPTY * - 1: NEWORK_IDLE * - 2: NETWORK_LOADING * - 3: NETWORK_NO_SOURCE * * @method Html5#networkState * @return {number} * The value of `networkState` from the media element. This will be a number * from the list in the description. * * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-networkstate} */ 'networkState', /** * Get the value of `readyState` from the media element. `readyState` indicates * the current state of the media element. It returns an enumeration from the * following list: * - 0: HAVE_NOTHING * - 1: HAVE_METADATA * - 2: HAVE_CURRENT_DATA * - 3: HAVE_FUTURE_DATA * - 4: HAVE_ENOUGH_DATA * * @method Html5#readyState * @return {number} * The value of `readyState` from the media element. This will be a number * from the list in the description. * * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#ready-states} */ 'readyState', /** * Get the value of `videoWidth` from the video element. `videoWidth` indicates * the current width of the video in css pixels. * * @method Html5#videoWidth * @return {number} * The value of `videoWidth` from the video element. This will be a number * in css pixels. * * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth} */ 'videoWidth', /** * Get the value of `videoHeight` from the video element. `videoHeigth` indicates * the current height of the video in css pixels. * * @method Html5#videoHeight * @return {number} * The value of `videoHeight` from the video element. This will be a number * in css pixels. * * @see [Spec] {@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-video-videowidth} */ 'videoHeight'].forEach(function (prop) { Html5.prototype[prop] = function () { return this.el_[prop]; }; }); // Wrap native properties with a setter in this format: // set + toTitleCase(name) [ /** * Set the value of `volume` on the media element. `volume` indicates the current * audio level as a percentage in decimal form. This means that 1 is 100%, 0.5 is 50%, and * so on. * * @method Html5#setVolume * @param {number} percentAsDecimal * The volume percent as a decimal. Valid range is from 0-1. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-a-volume} */ 'volume', /** * Set the value of `muted` on the media element. `muted` indicates the current * audio level should be silent. * * @method Html5#setMuted * @param {boolean} muted * - True if the audio should be set to silent * - False otherwise * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-muted} */ 'muted', /** * Set the value of `src` on the media element. `src` indicates the current * {@link Tech~SourceObject} for the media. * * @method Html5#setSrc * @param {Tech~SourceObject} src * The source object to set as the current source. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-src} */ 'src', /** * Set the value of `poster` on the media element. `poster` is the url to * an image file that can/will be shown when no media data is available. * * @method Html5#setPoster * @param {string} poster * The url to an image that should be used as the `poster` for the media * element. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-poster} */ 'poster', /** * Set the value of `preload` on the media element. `preload` indicates * what should download before the media is interacted with. It can have the following * values: * - none: nothing should be downloaded * - metadata: poster and the first few frames of the media may be downloaded to get * media dimensions and other metadata * - auto: allow the media and metadata for the media to be downloaded before * interaction * * @method Html5#setPreload * @param {string} preload * The value of `preload` to set on the media element. Must be 'none', 'metadata', * or 'auto'. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload} */ 'preload', /** * Set the value of `autoplay` on the media element. `autoplay` indicates * that the media should start to play as soon as the page is ready. * * @method Html5#setAutoplay * @param {boolean} autoplay * - True indicates that the media should start as soon as the page loads. * - False indicates that the media should not start as soon as the page loads. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-autoplay} */ 'autoplay', /** * Set the value of `loop` on the media element. `loop` indicates * that the media should return to the start of the media and continue playing once * it reaches the end. * * @method Html5#setLoop * @param {boolean} loop * - True indicates that playback should seek back to start once * the end of a media is reached. * - False indicates that playback should not loop back to the start when the * end of the media is reached. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-loop} */ 'loop', /** * Set the value of `playbackRate` on the media element. `playbackRate` indicates * the rate at which the media should play back. Examples: * - if playbackRate is set to 2, media will play twice as fast. * - if playbackRate is set to 0.5, media will play half as fast. * * @method Html5#setPlaybackRate * @return {number} * The value of `playbackRate` from the media element. A number indicating * the current playback speed of the media, where 1 is normal speed. * * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-playbackrate} */ 'playbackRate'].forEach(function (prop) { Html5.prototype['set' + (0, _toTitleCase2['default'])(prop)] = function (v) { this.el_[prop] = v; }; }); // wrap native functions with a function [ /** * A wrapper around the media elements `pause` function. This will call the `HTML5` * media elements `pause` function. * * @method Html5#pause * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-pause} */ 'pause', /** * A wrapper around the media elements `load` function. This will call the `HTML5`s * media element `load` function. * * @method Html5#load * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-load} */ 'load'].forEach(function (prop) { Html5.prototype[prop] = function () { return this.el_[prop](); }; }); _tech2['default'].withSourceHandlers(Html5); /** * Native source handler for Html5, simply passes the source to the media element. * * @proprety {Tech~SourceObject} source * The source object * * @proprety {Html5} tech * The instance of the HTML5 tech. */ Html5.nativeSourceHandler = {}; /** * Check if the media element can play the given mime type. * * @param {string} type * The mimetype to check * * @return {string} * 'probably', 'maybe', or '' (empty string) */ Html5.nativeSourceHandler.canPlayType = function (type) { // IE9 on Windows 7 without MediaPlayer throws an error here // https://github.com/videojs/video.js/issues/519 try { return Html5.TEST_VID.canPlayType(type); } catch (e) { return ''; } }; /** * Check if the media element can handle a source natively. * * @param {Tech~SourceObject} source * The source object * * @param {Object} [options] * Options to be passed to the tech. * * @return {string} * 'probably', 'maybe', or '' (empty string). */ Html5.nativeSourceHandler.canHandleSource = function (source, options) { // If a type was provided we should rely on that if (source.type) { return Html5.nativeSourceHandler.canPlayType(source.type); // If no type, fall back to checking 'video/[EXTENSION]' } else if (source.src) { var ext = Url.getFileExtension(source.src); return Html5.nativeSourceHandler.canPlayType('video/' + ext); } return ''; }; /** * Pass the source to the native media element. * * @param {Tech~SourceObject} source * The source object * * @param {Html5} tech * The instance of the Html5 tech * * @param {Object} [options] * The options to pass to the source */ Html5.nativeSourceHandler.handleSource = function (source, tech, options) { tech.setSrc(source.src); }; /** * A noop for the native dispose function, as cleanup is not needed. */ Html5.nativeSourceHandler.dispose = function () {}; // Register the native source handler Html5.registerSourceHandler(Html5.nativeSourceHandler); _component2['default'].registerComponent('Html5', Html5); _tech2['default'].registerTech('Html5', Html5); exports['default'] = Html5; },{"../component":47,"../utils/browser.js":120,"../utils/dom.js":123,"../utils/fn.js":125,"../utils/log.js":128,"../utils/merge-options.js":129,"../utils/obj":130,"../utils/to-title-case.js":133,"../utils/url.js":134,"./tech.js":104,"global/document":136,"global/window":137,"tsml":42}],103:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../component.js'); var _component2 = _interopRequireDefault(_component); var _tech = require('./tech.js'); var _tech2 = _interopRequireDefault(_tech); var _toTitleCase = require('../utils/to-title-case.js'); var _toTitleCase2 = _interopRequireDefault(_toTitleCase); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file loader.js */ /** * The `MediaLoader` is the `Component` that decides which playback technology to load * when a player is initialized. * * @extends Component */ var MediaLoader = function (_Component) { _inherits(MediaLoader, _Component); /** * Create an instance of this class. * * @param {Player} player * The `Player` that this class should attach to. * * @param {Object} [options] * The key/value stroe of player options. * * @param {Component~ReadyCallback} [ready] * The function that is run when this component is ready. */ function MediaLoader(player, options, ready) { _classCallCheck(this, MediaLoader); // If there are no sources when the player is initialized, // load the first supported playback technology. var _this = _possibleConstructorReturn(this, _Component.call(this, player, options, ready)); if (!options.playerOptions.sources || options.playerOptions.sources.length === 0) { for (var i = 0, j = options.playerOptions.techOrder; i < j.length; i++) { var techName = (0, _toTitleCase2['default'])(j[i]); var tech = _tech2['default'].getTech(techName); // Support old behavior of techs being registered as components. // Remove once that deprecated behavior is removed. if (!techName) { tech = _component2['default'].getComponent(techName); } // Check if the browser supports this technology if (tech && tech.isSupported()) { player.loadTech_(techName); break; } } } else { // Loop through playback technologies (HTML5, Flash) and check for support. // Then load the best source. // A few assumptions here: // All playback technologies respect preload false. player.src(options.playerOptions.sources); } return _this; } return MediaLoader; }(_component2['default']); _component2['default'].registerComponent('MediaLoader', MediaLoader); exports['default'] = MediaLoader; },{"../component.js":47,"../utils/to-title-case.js":133,"./tech.js":104}],104:[function(require,module,exports){ 'use strict'; exports.__esModule = true; var _component = require('../component'); var _component2 = _interopRequireDefault(_component); var _htmlTrackElement = require('../tracks/html-track-element'); var _htmlTrackElement2 = _interopRequireDefault(_htmlTrackElement); var _htmlTrackElementList = require('../tracks/html-track-element-list'); var _htmlTrackElementList2 = _interopRequireDefault(_htmlTrackElementList); var _mergeOptions = require('../utils/merge-options.js'); var _mergeOptions2 = _interopRequireDefault(_mergeOptions); var _textTrack = require('../tracks/text-track'); var _textTrack2 = _interopRequireDefault(_textTrack); var _textTrackList = require('../tracks/text-track-list'); var _textTrackList2 = _interopRequireDefault(_textTrackList); var _videoTrackList = require('../tracks/video-track-list'); var _videoTrackList2 = _interopRequireDefault(_videoTrackList); var _audioTrackList = require('../tracks/audio-track-list'); var _audioTrackList2 = _interopRequireDefault(_audioTrackList); var _fn = require('../utils/fn.js'); var Fn = _interopRequireWildcard(_fn); var _log = require('../utils/log.js'); var _log2 = _interopRequireDefault(_log); var _timeRanges = require('../utils/time-ranges.js'); var _buffer = require('../utils/buffer.js'); var _mediaError = require('../media-error.js'); var _mediaError2 = _interopRequireDefault(_mediaError); var _window = require('global/window'); var _window2 = _interopRequireDefault(_window); var _document = require('global/document'); var _document2 = _interopRequireDefault(_document); var _obj = require('../utils/obj'); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** * @file tech.js */ /** * An Object containing a structure like: `{src: 'url', type: 'mimetype'}` or string * that just contains the src url alone. * * `var SourceObject = {src: 'http://ex.com/video.mp4', type: 'video/mp4'};` * `var SourceString = 'http://example.com/some-video.mp4';` * * @typedef {Object|string} Tech~SourceObject * * @property {string} src * The url to the source * * @property {string} type * The mime type of the source */ /** * A function used by {@link Tech} to create a new {@link TextTrack}. * * @param {Tech} self * An instance of the Tech class. * * @param {string} kind * `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata) * * @param {string} [label] * Label to identify the text track * * @param {string} [language] * Two letter language abbreviation * * @param {Object} [options={}] * An object with additional text track options * * @return {TextTrack} * The text track that was created. */ function createTrackHelper(self, kind, label, language) { var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {}; var tracks = self.textTracks(); options.kind = kind; if (label) { options.label = label; } if (language) { options.language = language; } options.tech = self; var track = new _textTrack2['default'](options); tracks.addTrack_(track); return track; } /** * This is the base class for media playback technology controllers, such as * {@link Flash} and {@link HTML5} * * @extends Component */ var Tech = function (_Component) { _inherits(Tech, _Component); /** * Create an instance of this Tech. * * @param {Object} [options] * The key/value store of player options. * * @param {Component~ReadyCallback} ready * Callback function to call when the `HTML5` Tech is ready. */ function Tech() { var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var ready = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {}; _classCallCheck(this, Tech); // we don't want the tech to report user activity automatically. // This is done manually in addControlsListeners options.reportTouchActivity = false; // keep track of whether the current source has played at all to // implement a very limited played() var _this = _possibleConstructorReturn(this, _Component.call(this, null, options, ready)); _this.hasStarted_ = false; _this.on('playing', function () { this.hasStarted_ = true; }); _this.on('loadstart', function () { this.hasStarted_ = false; }); _this.textTracks_ = options.textTracks; _this.videoTracks_ = options.videoTracks; _this.audioTracks_ = options.audioTracks; // Manually track progress in cases where the browser/flash player doesn't report it. if (!_this.featuresProgressEvents) { _this.manualProgressOn(); } // Manually track timeupdates in cases where the browser/flash player doesn't report it. if (!_this.featuresTimeupdateEvents) { _this.manualTimeUpdatesOn(); } ['Text', 'Audio', 'Video'].forEach(function (track) { if (options['native' + track + 'Tracks'] === false) { _this['featuresNative' + track + 'Tracks'] = false; } }); if (options.nativeCaptions === false) { _this.featuresNativeTextTracks = false; } if (!_this.featuresNativeTextTracks) { _this.emulateTextTracks(); } _this.autoRemoteTextTracks_ = new _textTrackList2['default'](); _this.initTextTrackListeners(); _this.initTrackListeners(); // Turn on component tap events only if not using native controls if (!options.nativeControlsForTouch) { _this.emitTapEvents(); } if (_this.constructor) { _this.name_ = _this.constructor.name || 'Unknown Tech'; } return _this; } /* Fallbacks for unsupported event types ================================================================================ */ /** * Polyfill the `progress` event for browsers that don't support it natively. * * @see {@link Tech#trackProgress} */ Tech.prototype.manualProgressOn = function manualProgressOn() { this.on('durationchange', this.onDurationChange); this.manualProgress = true; // Trigger progress watching when a source begins loading this.one('ready', this.trackProgress); }; /** * Turn off the polyfill for `progress` events that was created in * {@link Tech#manualProgressOn} */ Tech.prototype.manualProgressOff = function manualProgressOff() { this.manualProgress = false; this.stopTrackingProgress(); this.off('durationchange', this.onDurationChange); }; /** * This is used to trigger a `progress` event when the buffered percent changes. It * sets an interval function that will be called every 500 milliseconds to check if the * buffer end percent has changed. * * > This function is called by {@link Tech#manualProgressOn} * * @param {EventTarget~Event} event * The `ready` event that caused this to run. * * @listens Tech#ready * @fires Tech#progress */ Tech.prototype.trackProgress = function trackProgress(event) { this.stopTrackingProgress(); this.progressInterval = this.setInterval(Fn.bind(this, function () { // Don't trigger unless buffered amount is greater than last time var numBufferedPercent = this.bufferedPercent(); if (this.bufferedPercent_ !== numBufferedPercent) { /** * See {@link Player#progress} * * @event Tech#progress * @type {EventTarget~Event} */ this.trigger('progress'); } this.bufferedPercent_ = numBufferedPercent; if (numBufferedPercent === 1) { this.stopTrackingProgress(); } }), 500); }; /** * Update our internal duration on a `durationchange` event by calling * {@link Tech#duration}. * * @param {EventTarget~Event} event * The `durationchange` event that caused this to run. * * @listens Tech#durationchange */ Tech.prototype.onDurationChange = function onDurationChange(event) { this.duration_ = this.duration(); }; /** * Get and create a `TimeRange` object for buffering. * * @return {TimeRange} * The time range object that was created. */ Tech.prototype.buffered = function buffered() { return (0, _timeRanges.createTimeRange)(0, 0); }; /** * Get the percentage of the current video that is currently buffered. * * @return {number} * A number from 0 to 1 that represents the decimal percentage of the * video that is buffered. * */ Tech.prototype.bufferedPercent = function bufferedPercent() { return (0, _buffer.bufferedPercent)(this.buffered(), this.duration_); }; /** * Turn off the polyfill for `progress` events that was created in * {@link Tech#manualProgressOn} * Stop manually tracking progress events by clearing the interval that was set in * {@link Tech#trackProgress}. */ Tech.prototype.stopTrackingProgress = function stopTrackingProgress() { this.clearInterval(this.progressInterval); }; /** * Polyfill the `timeupdate` event for browsers that don't support it. * * @see {@link Tech#trackCurrentTime} */ Tech.prototype.manualTimeUpdatesOn = function manualTimeUpdatesOn() { this.manualTimeUpdates = true; this.on('play', this.trackCurrentTime); this.on('pause', this.stopTrackingCurrentTime); }; /** * Turn off the polyfill for `timeupdate` events that was created in * {@link Tech#manualTimeUpdatesOn} */ Tech.prototype.manualTimeUpdatesOff = function manualTimeUpdatesOff() { this.manualTimeUpdates = false; this.stopTrackingCurrentTime(); this.off('play', this.trackCurrentTime); this.off('pause', this.stopTrackingCurrentTime); }; /** * Sets up an interval function to track current time and trigger `timeupdate` every * 250 milliseconds. * * @listens Tech#play * @triggers Tech#timeupdate */ Tech.prototype.trackCurrentTime = function trackCurrentTime() { if (this.currentTimeInterval) { this.stopTrackingCurrentTime(); } this.currentTimeInterval = this.setInterval(function () { /** * Triggered at an interval of 250ms to indicated that time is passing in the video. * * @event Tech#timeupdate * @type {EventTarget~Event} */ this.trigger({ type: 'timeupdate', target: this, manuallyTriggered: true }); // 42 = 24 fps // 250 is what Webkit uses // FF uses 15 }, 250); }; /** * Stop the interval function created in {@link Tech#trackCurrentTime} so that the * `timeupdate` event is no longer triggered. * * @listens {Tech#pause} */ Tech.prototype.stopTrackingCurrentTime = function stopTrackingCurrentTime() { this.clearInterval(this.currentTimeInterval); // #1002 - if the video ends right before the next timeupdate would happen, // the progress bar won't make it all the way to the end this.trigger({ type: 'timeupdate', target: this, manuallyTriggered: true }); }; /** * Turn off all event polyfills, clear the `Tech`s {@link AudioTrackList}, * {@link VideoTrackList}, and {@link TextTrackList}, and dispose of this Tech. * * @fires Component#dispose */ Tech.prototype.dispose = function dispose() { // clear out all tracks because we can't reuse them between techs this.clearTracks(['audio', 'video', 'text']); // Turn off any manual progress or timeupdate tracking if (this.manualProgress) { this.manualProgressOff(); } if (this.manualTimeUpdates) { this.manualTimeUpdatesOff(); } _Component.prototype.dispose.call(this); }; /** * Clear out a single `TrackList` or an array of `TrackLists` given their names. * * > Note: Techs without source handlers should call this between sources for `video` * & `audio` tracks. You don't want to use them between tracks! * * @param {string[]|string} types * TrackList names to clear, valid names are `video`, `audio`, and * `text`. */ Tech.prototype.clearTracks = function clearTracks(types) { var _this2 = this; types = [].concat(types); // clear out all tracks because we can't reuse them between techs types.forEach(function (type) { var list = _this2[type + 'Tracks']() || []; var i = list.length; while (i--) { var track = list[i]; if (type === 'text') { _this2.removeRemoteTextTrack(track); } list.removeTrack_(track); } }); }; /** * Remove any TextTracks added via addRemoteTextTrack that are * flagged for automatic garbage collection */ Tech.prototype.cleanupAutoTextTracks = function cleanupAutoTextTracks() { var list = this.autoRemoteTextTracks_ || []; var i = list.length; while (i--) { var track = list[i]; this.removeRemoteTextTrack(track); } }; /** * Reset the tech, which will removes all sources and reset the internal readyState. * * @abstract */ Tech.prototype.reset = function reset() {}; /** * Get or set an error on the Tech. * * @param {MediaError} [err] * Error to set on the Tech * * @return {MediaError|null} * The current error object on the tech, or null if there isn't one. */ Tech.prototype.error = function error(err) { if (err !== undefined) { this.error_ = new _mediaError2['default'](err); this.trigger('error'); } return this.error_; }; /** * Returns the `TimeRange`s that have been played through for the current source. * * > NOTE: This implementation is incomplete. It does not track the played `TimeRange`. * It only checks wether the source has played at all or not. * * @return {TimeRange} * - A single time range if this video has played * - An empty set of ranges if not. */ Tech.prototype.played = function played() { if (this.hasStarted_) { return (0, _timeRanges.createTimeRange)(0, 0); } return (0, _timeRanges.createTimeRange)(); }; /** * Causes a manual time update to occur if {@link Tech#manualTimeUpdatesOn} was * previously called. * * @fires Tech#timeupdate */ Tech.prototype.setCurrentTime = function setCurrentTime() { // improve the accuracy of manual timeupdates if (this.manualTimeUpdates) { /** * A manual `timeupdate` event. * * @event Tech#timeupdate * @type {EventTarget~Event} */ this.trigger({ type: 'timeupdate', target: this, manuallyTriggered: true }); } }; /** * Turn on listeners for {@link TextTrackList} events. This adds * {@link EventTarget~EventListeners} for `texttrackchange`, `addtrack` and * `removetrack`. * * @fires Tech#texttrackchange */ Tech.prototype.initTextTrackListeners = function initTextTrackListeners() { var textTrackListChanges = Fn.bind(this, function () { /** * Triggered when tracks are added or removed on the Tech {@link TextTrackList} * * @event Tech#texttrackchange * @type {EventTarget~Event} */ this.trigger('texttrackchange'); }); var tracks = this.textTracks(); if (!tracks) { return; } tracks.addEventListener('removetrack', textTrackListChanges); tracks.addEventListener('addtrack', textTrackListChanges); this.on('dispose', Fn.bind(this, function () { tracks.removeEventListener('removetrack', textTrackListChanges); tracks.removeEventListener('addtrack', textTrackListChanges); })); }; /** * Turn on listeners for {@link VideoTrackList} and {@link {AudioTrackList} events. * This adds {@link EventTarget~EventListeners} for `addtrack`, and `removetrack`. * * @fires Tech#audiotrackchange * @fires Tech#videotrackchange */ Tech.prototype.initTrackListeners = function initTrackListeners() { var _this3 = this; var trackTypes = ['video', 'audio']; trackTypes.forEach(function (type) { /** * Triggered when tracks are added or removed on the Tech {@link AudioTrackList} * * @event Tech#audiotrackchange * @type {EventTarget~Event} */ /** * Triggered when tracks are added or removed on the Tech {@link VideoTrackList} * * @event Tech#videotrackchange * @type {EventTarget~Event} */ var trackListChanges = function trackListChanges() { _this3.trigger(type + 'trackchange'); }; var tracks = _this3[type + 'Tracks'](); tracks.addEventListener('removetrack', trackListChanges); tracks.addEventListener('addtrack', trackListChanges); _this3.on('dispose', function () { tracks.removeEventListener('removetrack', trackListChanges); tracks.removeEventListener('addtrack', trackListChanges); }); }); }; /** * Emulate TextTracks using vtt.js if necessary * * @fires Tech#vttjsloaded * @fires Tech#vttjserror */ Tech.prototype.addWebVttScript_ = function addWebVttScript_() { var _this4 = this; if (_window2['default'].WebVTT) { return; } // Initially, Tech.el_ is a child of a dummy-div wait until the Component system // signals that the Tech is ready at which point Tech.el_ is part of the DOM // before inserting the WebVTT script if (_document2['default'].body.contains(this.el())) { var vtt = require('videojs-vtt.js'); // load via require if available and vtt.js script location was not passed in // as an option. novtt builds will turn the above require call into an empty object // which will cause this if check to always fail. if (!this.options_['vtt.js'] && (0, _obj.isPlain)(vtt) && Object.keys(vtt).length > 0) { this.trigger('vttjsloaded'); return; } // load vtt.js via the script location option or the cdn of no location was // passed in var script = _document2['default'].createElement('script'); script.src = this.options_['vtt.js'] || 'https://vjs.zencdn.net/vttjs/0.12.4/vtt.min.js'; script.onload = function () { /** * Fired when vtt.js is loaded. * * @event Tech#vttjsloaded * @type {EventTarget~Event} */ _this4.trigger('vttjsloaded'); }; script.onerror = function () { /** * Fired when vtt.js was not loaded due to an error * * @event Tech#vttjsloaded * @type {EventTarget~Event} */ _this4.trigger('vttjserror'); }; this.on('dispose', function () { script.onload = null; script.onerror = null; }); // but have not loaded yet and we set it to true before the inject so that // we don't overwrite the injected window.WebVTT if it loads right away _window2['default'].WebVTT = true; this.el().parentNode.appendChild(script); } else { this.ready(this.addWebVttScript_); } }; /** * Emulate texttracks * * @method emulateTextTracks */ Tech.prototype.emulateTextTracks = function emulateTextTracks() { var _this5 = this; var tracks = this.textTracks(); if (!tracks) { return; } var remoteTracks = this.remoteTextTracks(); var handleAddTrack = function handleAddTrack(e) { return tracks.addTrack_(e.track); }; var handleRemoveTrack = function handleRemoveTrack(e) { return tracks.removeTrack_(e.track); }; remoteTracks.on('addtrack', handleAddTrack); remoteTracks.on('removetrack', handleRemoveTrack); this.addWebVttScript_(); var updateDisplay = function updateDisplay() { return _this5.trigger('texttrackchange'); }; var textTracksChanges = function textTracksChanges() { updateDisplay(); for (var i = 0; i < tracks.length; i++) { var track = tracks[i]; track.removeEventListener('cuechange', updateDisplay); if (track.mode === 'showing') { track.addEventListener('cuechange', updateDisplay); } } }; textTracksChanges(); tracks.addEventListener('change', textTracksChanges); tracks.addEventListener('addtrack', textTracksChanges); tracks.addEventListener('removetrack', textTracksChanges); this.on('dispose', function () { remoteTracks.off('addtrack', handleAddTrack); remoteTracks.off('removetrack', handleRemoveTrack); tracks.removeEventListener('change', textTracksChanges); tracks.removeEventListener('addtrack', textTracksChanges); tracks.removeEventListener('removetrack', textTracksChanges); for (var i = 0; i < tracks.length; i++) { var track = tracks[i]; track.removeEventListener('cuechange', updateDisplay); } }); }; /** * Get the `Tech`s {@link VideoTrackList}. * * @return {VideoTrackList} * The video track list that the Tech is currently using. */ Tech.prototype.videoTracks = function videoTracks() { this.videoTracks_ = this.videoTracks_ || new _videoTrackList2['default'](); return this.videoTracks_; }; /** * Get the `Tech`s {@link AudioTrackList}. * * @return {AudioTrackList} * The audio track list that the Tech is currently using. */ Tech.prototype.audioTracks = function audioTracks() { this.audioTracks_ = this.audioTracks_ || new _audioTrackList2['default'](); return this.audioTracks_; }; /** * Get the `Tech`s {@link TextTrackList}. * * @return {TextTrackList} * The text track list that the Tech is currently using. */ Tech.prototype.textTracks = function textTracks() { this.textTracks_ = this.textTracks_ || new _textTrackList2['default'](); return this.textTracks_; }; /** * Get the `Tech`s remote {@link TextTrackList}, which is created from elements * that were added to the DOM. * * @return {TextTrackList} * The remote text track list that the Tech is currently using. */ Tech.prototype.remoteTextTracks = function remoteTextTracks() { this.remoteTextTracks_ = this.remoteTextTracks_ || new _textTrackList2['default'](); return this.remoteTextTracks_; }; /** * Get The `Tech`s {HTMLTrackElementList}, which are the elements in the DOM that are * being used as TextTracks. * * @return {HTMLTrackElementList} * The current HTML track elements that exist for the tech. */ Tech.prototype.remoteTextTrackEls = function remoteTextTrackEls() { this.remoteTextTrackEls_ = this.remoteTextTrackEls_ || new _htmlTrackElementList2['default'](); return this.remoteTextTrackEls_; }; /** * Create and returns a remote {@link TextTrack} object. * * @param {string} kind * `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata) * * @param {string} [label] * Label to identify the text track * * @param {string} [language] * Two letter language abbreviation * * @return {TextTrack} * The TextTrack that gets created. */ Tech.prototype.addTextTrack = function addTextTrack(kind, label, language) { if (!kind) { throw new Error('TextTrack kind is required but was not provided'); } return createTrackHelper(this, kind, label, language); }; /** * Create an emulated TextTrack for use by addRemoteTextTrack * * This is intended to be overridden by classes that inherit from * Tech in order to create native or custom TextTracks. * * @param {Object} options * The object should contain the options to initialize the TextTrack with. * * @param {string} [options.kind] * `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata). * * @param {string} [options.label]. * Label to identify the text track * * @param {string} [options.language] * Two letter language abbreviation. * * @return {HTMLTrackElement} * The track element that gets created. */ Tech.prototype.createRemoteTextTrack = function createRemoteTextTrack(options) { var track = (0, _mergeOptions2['default'])(options, { tech: this }); return new _htmlTrackElement2['default'](track); }; /** * Creates a remote text track object and returns an html track element. * * > Note: This can be an emulated {@link HTMLTrackElement} or a native one. * * @param {Object} options * See {@link Tech#createRemoteTextTrack} for more detailed properties. * * @param {boolean} [manualCleanup=true] * - When false: the TextTrack will be automatically removed from the video * element whenever the source changes * - When True: The TextTrack will have to be cleaned up manually * * @return {HTMLTrackElement} * An Html Track Element. * * @deprecated The default functionality for this function will be equivalent * to "manualCleanup=false" in the future. The manualCleanup parameter will * also be removed. */ Tech.prototype.addRemoteTextTrack = function addRemoteTextTrack() { var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var manualCleanup = arguments[1]; var htmlTrackElement = this.createRemoteTextTrack(options); if (manualCleanup !== true && manualCleanup !== false) { // deprecation warning _log2['default'].warn('Calling addRemoteTextTrack without explicitly setting the "manualCleanup" parameter to `true` is deprecated and default to `false` in future version of video.js'); manualCleanup = true; } // store HTMLTrackElement and TextTrack to remote list this.remoteTextTrackEls().addTrackElement_(htmlTrackElement); this.remoteTextTracks().addTrack_(htmlTrackElement.track); if (manualCleanup !== true) { // create the TextTrackList if it doesn't exist this.autoRemoteTextTracks_.addTrack_(htmlTrackElement.track); } return htmlTrackElement; }; /** * Remove a remote text track from the remote `TextTrackList`. * * @param {TextTrack} track * `TextTrack` to remove from the `TextTrackList` */ Tech.prototype.removeRemoteTextTrack = function removeRemoteTextTrack(track) { var trackElement = this.remoteTextTrackEls().getTrackElementByTrack_(track); // remove HTMLTrackElement and TextTrack from remote list this.remoteTextTrackEls().removeTrackElement_(trackElement); this.remoteTextTracks().removeTrack_(track); this.autoRemoteTextTracks_.removeTrack_(track); }; /** * Gets available media playback quality metrics as specified by the W3C's Media * Playback Quality API. * * @see [Spec]{@link https://wicg.github.io/media-playback-quality} * * @return {Object} * An object with supported media playback quality metrics * * @abstract */ Tech.prototype.getVideoPlaybackQuality = function getVideoPlaybackQuality() { return {}; }; /** * A method to set a poster from a `Tech`. * * @abstract */ Tech.prototype.setPoster = function setPoster() {}; /** * A method to check for the presence of the 'playsinine'