feat: Add EXT-X-PART support behind a flag for LL-HLS (#1055)

index.html

@@ -80,6 +80,10 @@ <h3>Options</h3>
  <input id=partial type="checkbox">
  Handle Partial (reloads player)
  </label>
+ <label>
+ <input id=llhls type="checkbox">
+ [EXPERIMENTAL] Enables support for ll-hls (reloads player)
+ </label>
  <label>
  <input id=buffer-water type="checkbox">
  [EXPERIMENTAL] Use Buffer Level for ABR (reloads player)

package.json

@@ -60,7 +60,7 @@
  "@videojs/vhs-utils": "^3.0.0",
  "aes-decrypter": "3.1.2",
  "global": "^4.4.0",
- "m3u8-parser": "4.5.2",
+ "m3u8-parser": "4.6.0",
  "mpd-parser": "0.15.4",
  "mux.js": "5.10.0",
  "video.js": "^6 || ^7"

scripts/index-demo-page.js

@@ -241,6 +241,7 @@
  'sync-workers',
  'liveui',
  'partial',
+ 'llhls',
  'url',
  'type',
  'keysystems',
@@ -300,6 +301,13 @@
  window.videojs.log.level(event.target.checked ? 'debug' : 'info');
  });
 
+ stateEls.llhls.addEventListener('change', function(event) {
+ saveState();
+
+ // reload the player and scripts
+ stateEls.minified.dispatchEvent(newEvent('change'));
+ });
+
  stateEls.partial.addEventListener('change', function(event) {
  saveState();
 
@@ -377,7 +385,8 @@
  vhs: {
  overrideNative: getInputValue(stateEls['override-native']),
  handlePartialData: getInputValue(stateEls.partial),
- experimentalBufferBasedABR: getInputValue(stateEls['buffer-water'])
+ experimentalBufferBasedABR: getInputValue(stateEls['buffer-water']),
+ experimentalLLHLS: getInputValue(stateEls.llhls)
  }
  }
  });

src/manifest.js

@@ -12,12 +12,18 @@ export const createPlaylistID = (index, uri) => {
 /**
  * Parses a given m3u8 playlist
  *
+ * @param {Function} [onwarn]
+ * a function to call when the parser triggers a warning event.
+ * @param {Function} [oninfo]
+ * a function to call when the parser triggers an info event.
  * @param {string} manifestString
  * The downloaded manifest string
  * @param {Object[]} [customTagParsers]
  * An array of custom tag parsers for the m3u8-parser instance
  * @param {Object[]} [customTagMappers]
- * An array of custom tag mappers for the m3u8-parser instance
+ * An array of custom tag mappers for the m3u8-parser instance
+ * @param {boolean} [experimentalLLHLS=false]
+ * Whether to keep ll-hls features in the manifest after parsing.
  * @return {Object}
  * The manifest object
  */
@@ -26,7 +32,8 @@ export const parseManifest = ({
  oninfo,
  manifestString,
  customTagParsers = [],
- customTagMappers = []
+ customTagMappers = [],
+ experimentalLLHLS
 }) => {
  const parser = new M3u8Parser();
 
@@ -43,7 +50,36 @@ export const parseManifest = ({
  parser.push(manifestString);
  parser.end();
 
- return parser.manifest;
+ const manifest = parser.manifest;
+
+ // remove llhls features from the parsed manifest
+ // if we don't want llhls support.
+ if (!experimentalLLHLS) {
+ [
+ 'preloadSegment',
+ 'skip',
+ 'serverControl',
+ 'renditionReports',
+ 'partInf',
+ 'partTargetDuration'
+ ].forEach(function(k) {
+ if (manifest.hasOwnProperty(k)) {
+ delete manifest[k];
+ }
+ });
+
+ if (manifest.segments) {
+ manifest.segments.forEach(function(segment) {
+ ['parts', 'preloadHints'].forEach(function(k) {
+ if (segment.hasOwnProperty(k)) {
+ delete segment[k];
+ }
+ });
+ });
+ }
+ }
+
+ return manifest;
 };
 
 /**

src/media-segment-request.js

@@ -971,7 +971,7 @@ export const mediaSegmentRequest = ({
  }
 
  const segmentRequestOptions = videojs.mergeOptions(xhrOptions, {
- uri: segment.resolvedUri,
+ uri: segment.part && segment.part.resolvedUri || segment.resolvedUri,
  responseType: 'arraybuffer',
  headers: segmentXhrHeaders(segment)
  });

src/playlist-loader.js

@@ -19,34 +19,73 @@ import {
 const { mergeOptions, EventTarget } = videojs;
 
 /**
- * Returns a new array of segments that is the result of merging
- * properties from an older list of segments onto an updated
- * list. No properties on the updated playlist will be overridden.
- *
- * @param {Array} original the outdated list of segments
- * @param {Array} update the updated list of segments
- * @param {number=} offset the index of the first update
- * segment in the original segment list. For non-live playlists,
- * this should always be zero and does not need to be
- * specified. For live playlists, it should be the difference
- * between the media sequence numbers in the original and updated
- * playlists.
- * @return a list of merged segment objects
- */
+ * Returns a new segment object with properties and
+ * the parts array merged.
+ *
+ * @param {Object} a the old segment
+ * @param {Object} b the new segment
+ *
+ * @return {Object} the merged segment
+ */
+export const updateSegment = (a, b) => {
+ if (!a) {
+ return b;
+ }
+
+ const result = mergeOptions(a, b);
+
+ // if only the old segment has parts
+ // then the parts are no longer valid
+ if (a.parts && !b.parts) {
+ delete result.parts;
+ // if both segments have parts
+ // copy part propeties from the old segment
+ // to the new one.
+ } else if (a.parts && b.parts) {
+ for (let i = 0; i < b.parts.length; i++) {
+ if (a.parts && a.parts[i]) {
+ result.parts[i] = mergeOptions(a.parts[i], b.parts[i]);
+ }
+ }
+ }
+
+ return result;
+};
+
+/**
+ * Returns a new array of segments that is the result of merging
+ * properties from an older list of segments onto an updated
+ * list. No properties on the updated playlist will be ovewritten.
+ *
+ * @param {Array} original the outdated list of segments
+ * @param {Array} update the updated list of segments
+ * @param {number=} offset the index of the first update
+ * segment in the original segment list. For non-live playlists,
+ * this should always be zero and does not need to be
+ * specified. For live playlists, it should be the difference
+ * between the media sequence numbers in the original and updated
+ * playlists.
+ * @return {Array} a list of merged segment objects
+ */
 export const updateSegments = (original, update, offset) => {
+ const oldSegments = original.slice();
  const result = update.slice();
 
  offset = offset || 0;
  const length = Math.min(original.length, update.length + offset);
 
  for (let i = offset; i < length; i++) {
- result[i - offset] = mergeOptions(original[i], result[i - offset]);
+ const newIndex = i - offset;
+
+ result[newIndex] = updateSegment(oldSegments[i], result[newIndex]);
  }
  return result;
 };
 
 export const resolveSegmentUris = (segment, baseUri) => {
- if (!segment.resolvedUri) {
+ // preloadSegments will not have a uri at all
+ // as the segment isn't actually in the manifest yet, only parts
+ if (!segment.resolvedUri && segment.uri) {
  segment.resolvedUri = resolveUrl(baseUri, segment.uri);
  }
  if (segment.key && !segment.key.resolvedUri) {
@@ -55,6 +94,23 @@ export const resolveSegmentUris = (segment, baseUri) => {
  if (segment.map && !segment.map.resolvedUri) {
  segment.map.resolvedUri = resolveUrl(baseUri, segment.map.uri);
  }
+ if (segment.parts && segment.parts.length) {
+ segment.parts.forEach((p) => {
+ if (p.resolvedUri) {
+ return;
+ }
+ p.resolvedUri = resolveUrl(baseUri, p.uri);
+ });
+ }
+
+ if (segment.preloadHints && segment.preloadHints.length) {
+ segment.preloadHints.forEach((p) => {
+ if (p.resolvedUri) {
+ return;
+ }
+ p.resolvedUri = resolveUrl(baseUri, p.uri);
+ });
+ }
 };
 
 // consider the playlist unchanged if the playlist object is the same or
@@ -173,6 +229,7 @@ export default class PlaylistLoader extends EventTarget {
 
  this.customTagParsers = (vhsOptions && vhsOptions.customTagParsers) || [];
  this.customTagMappers = (vhsOptions && vhsOptions.customTagMappers) || [];
+ this.experimentalLLHLS = (vhsOptions && vhsOptions.experimentalLLHLS) || false;
 
  // initialize the loader state
  this.state = 'HAVE_NOTHING';
@@ -254,7 +311,8 @@ export default class PlaylistLoader extends EventTarget {
  oninfo: ({message}) => this.logger_(`m3u8-parser info for ${id}: ${message}`),
  manifestString: playlistString,
  customTagParsers: this.customTagParsers,
- customTagMappers: this.customTagMappers
+ customTagMappers: this.customTagMappers,
+ experimentalLLHLS: this.experimentalLLHLS
  });
 
  playlist.lastRequest = Date.now();
@@ -562,7 +620,8 @@ export default class PlaylistLoader extends EventTarget {
  const manifest = parseManifest({
  manifestString: req.responseText,
  customTagParsers: this.customTagParsers,
- customTagMappers: this.customTagMappers
+ customTagMappers: this.customTagMappers,
+ llhls: this.llhls
  });
 
  this.setupInitialPlaylist(manifest);