hls.js 1.5.11 → 1.5.12-0.canary.10340

package/src/events.ts

@@ -1,8 +1,9 @@
-import {
+import type {
   ManifestLoadedData,
   ManifestLoadingData,
   MediaAttachedData,
   MediaAttachingData,
+  MediaEndedData,
   LevelLoadingData,
   LevelLoadedData,
   ManifestParsedData,
@@ -60,6 +61,8 @@ export enum Events {
   MEDIA_DETACHING = 'hlsMediaDetaching',
   // Fired when MediaSource has been detached from media element
   MEDIA_DETACHED = 'hlsMediaDetached',
+  // Fired when HTMLMediaElement dispatches "ended" event, or stalls at end of VOD program
+  MEDIA_ENDED = 'hlsMediaEnded',
   // Fired when the buffer is going to be reset
   BUFFER_RESET = 'hlsBufferReset',
   // Fired when we know about the codecs that we need buffers for to push into - data: {tracks : { container, codec, levelCodec, initSegment, metadata }}
@@ -184,6 +187,10 @@ export interface HlsListeners {
   ) => void;
   [Events.MEDIA_DETACHING]: (event: Events.MEDIA_DETACHING) => void;
   [Events.MEDIA_DETACHED]: (event: Events.MEDIA_DETACHED) => void;
+  [Events.MEDIA_ENDED]: (
+    event: Events.MEDIA_ENDED,
+    data: MediaEndedData,
+  ) => void;
   [Events.BUFFER_RESET]: (event: Events.BUFFER_RESET) => void;
   [Events.BUFFER_CODECS]: (
     event: Events.BUFFER_CODECS,

package/src/exports-named.ts

@@ -1,7 +1,7 @@
 import Hls from './hls';
 import { Events } from './events';
 import { ErrorTypes, ErrorDetails } from './errors';
-import { Level } from './types/level';
+import type { Level } from './types/level';
 import AbrController from './controller/abr-controller';
 import AudioTrackController from './controller/audio-track-controller';
 import AudioStreamController from './controller/audio-stream-controller';

package/src/hls.ts

@@ -8,7 +8,7 @@ import KeyLoader from './loader/key-loader';
 import StreamController from './controller/stream-controller';
 import { isMSESupported, isSupported } from './is-supported';
 import { getMediaSource } from './utils/mediasource-helper';
-import { logger, enableLogs } from './utils/logger';
+import { enableLogs, type ILogger } from './utils/logger';
 import { enableStreamingMode, hlsDefaultConfig, mergeConfig } from './config';
 import { EventEmitter } from 'eventemitter3';
 import { Events } from './events';
@@ -59,9 +59,13 @@ export default class Hls implements HlsEventEmitter {
    */
   public readonly userConfig: Partial<HlsConfig>;
 
+  /**
+   * The logger functions used by this player instance, configured on player instantiation.
+   */
+  public readonly logger: ILogger;
+
   private coreComponents: ComponentAPI[];
   private networkControllers: NetworkComponentAPI[];
-  private started: boolean = false;
   private _emitter: HlsEventEmitter = new EventEmitter();
   private _autoLevelCapping: number = -1;
   private _maxHdcpLevel: HdcpLevel = null;
@@ -142,12 +146,19 @@ export default class Hls implements HlsEventEmitter {
    * @param userConfig - Configuration options applied over `Hls.DefaultConfig`
    */
   constructor(userConfig: Partial<HlsConfig> = {}) {
-    enableLogs(userConfig.debug || false, 'Hls instance');
-    const config = (this.config = mergeConfig(Hls.DefaultConfig, userConfig));
+    const logger = (this.logger = enableLogs(
+      userConfig.debug || false,
+      'Hls instance',
+    ));
+    const config = (this.config = mergeConfig(
+      Hls.DefaultConfig,
+      userConfig,
+      logger,
+    ));
     this.userConfig = userConfig;
 
     if (config.progressive) {
-      enableStreamingMode(config);
+      enableStreamingMode(config, logger);
     }
 
     // core controllers and network loaders
@@ -160,8 +171,10 @@ export default class Hls implements HlsEventEmitter {
     } = config;
     const errorController = new ConfigErrorController(this);
     const abrController = (this.abrController = new ConfigAbrController(this));
+    // FragmentTracker must be defined before StreamController because the order of event handling is important
+    const fragmentTracker = new FragmentTracker(this);
     const bufferController = (this.bufferController =
-      new ConfigBufferController(this));
+      new ConfigBufferController(this, fragmentTracker));
     const capLevelController = (this.capLevelController =
       new ConfigCapLevelController(this));
 
@@ -170,7 +183,7 @@ export default class Hls implements HlsEventEmitter {
     const id3TrackController = new ID3TrackController(this);
 
     const ConfigContentSteeringController = config.contentSteeringController;
-    // ConentSteeringController is defined before LevelController to receive Multivariant Playlist events first
+    // ContentSteeringController is defined before LevelController to receive Multivariant Playlist events first
     const contentSteering = ConfigContentSteeringController
       ? new ConfigContentSteeringController(this)
       : null;
@@ -178,8 +191,6 @@ export default class Hls implements HlsEventEmitter {
       this,
       contentSteering,
     ));
-    // FragmentTracker must be defined before StreamController because the order of event handling is important
-    const fragmentTracker = new FragmentTracker(this);
     const keyLoader = new KeyLoader(this.config);
     const streamController = (this.streamController = new StreamController(
       this,
@@ -320,7 +331,7 @@ export default class Hls implements HlsEventEmitter {
       try {
         return this.emit(event, event, eventObject);
       } catch (error) {
-        logger.error(
+        this.logger.error(
           'An internal error happened while handling event ' +
             event +
             '. Error message: "' +
@@ -354,7 +365,7 @@ export default class Hls implements HlsEventEmitter {
    * Dispose of the instance
    */
   destroy() {
-    logger.log('destroy');
+    this.logger.log('destroy');
     this.trigger(Events.DESTROYING, undefined);
     this.detachMedia();
     this.removeAllListeners();
@@ -377,7 +388,7 @@ export default class Hls implements HlsEventEmitter {
    * Attaches Hls.js to a media element
    */
   attachMedia(media: HTMLMediaElement) {
-    logger.log('attachMedia');
+    this.logger.log('attachMedia');
     this._media = media;
     this.trigger(Events.MEDIA_ATTACHING, { media: media });
   }
@@ -386,7 +397,7 @@ export default class Hls implements HlsEventEmitter {
    * Detach Hls.js from the media
    */
   detachMedia() {
-    logger.log('detachMedia');
+    this.logger.log('detachMedia');
     this.trigger(Events.MEDIA_DETACHING, undefined);
     this._media = null;
   }
@@ -407,7 +418,7 @@ export default class Hls implements HlsEventEmitter {
     ));
     this._autoLevelCapping = -1;
     this._maxHdcpLevel = null;
-    logger.log(`loadSource:${loadingSource}`);
+    this.logger.log(`loadSource:${loadingSource}`);
     if (
       media &&
       loadedSource &&
@@ -428,8 +439,7 @@ export default class Hls implements HlsEventEmitter {
    * Defaults to -1 (None: starts from earliest point)
    */
   startLoad(startPosition: number = -1) {
-    logger.log(`startLoad(${startPosition})`);
-    this.started = true;
+    this.logger.log(`startLoad(${startPosition})`);
     this.networkControllers.forEach((controller) => {
       controller.startLoad(startPosition);
     });
@@ -439,34 +449,31 @@ export default class Hls implements HlsEventEmitter {
    * Stop loading of any stream data.
    */
   stopLoad() {
-    logger.log('stopLoad');
-    this.started = false;
+    this.logger.log('stopLoad');
     this.networkControllers.forEach((controller) => {
       controller.stopLoad();
     });
   }
 
   /**
-   * Resumes stream controller segment loading if previously started.
+   * Resumes stream controller segment loading after `pauseBuffering` has been called.
    */
   resumeBuffering() {
-    if (this.started) {
-      this.networkControllers.forEach((controller) => {
-        if ('fragmentLoader' in controller) {
-          controller.startLoad(-1);
-        }
-      });
-    }
+    this.networkControllers.forEach((controller) => {
+      if (controller.resumeBuffering) {
+        controller.resumeBuffering();
+      }
+    });
   }
 
   /**
-   * Stops stream controller segment loading without changing 'started' state like stopLoad().
+   * Prevents stream controller from loading new segments until `resumeBuffering` is called.
    * This allows for media buffering to be paused without interupting playlist loading.
    */
   pauseBuffering() {
     this.networkControllers.forEach((controller) => {
-      if ('fragmentLoader' in controller) {
-        controller.stopLoad();
+      if (controller.pauseBuffering) {
+        controller.pauseBuffering();
       }
     });
   }
@@ -475,7 +482,7 @@ export default class Hls implements HlsEventEmitter {
    * Swap through possible audio codecs in the stream (for example to switch from stereo to 5.1)
    */
   swapAudioCodec() {
-    logger.log('swapAudioCodec');
+    this.logger.log('swapAudioCodec');
     this.streamController.swapAudioCodec();
   }
 
@@ -486,7 +493,7 @@ export default class Hls implements HlsEventEmitter {
    * Automatic recovery of media-errors by this process is configurable.
    */
   recoverMediaError() {
-    logger.log('recoverMediaError');
+    this.logger.log('recoverMediaError');
     const media = this._media;
     this.detachMedia();
     if (media) {
@@ -517,7 +524,7 @@ export default class Hls implements HlsEventEmitter {
    * Set quality level index immediately. This will flush the current buffer to replace the quality asap. That means playback will interrupt at least shortly to re-buffer and re-sync eventually. Set to -1 for automatic level selection.
    */
   set currentLevel(newLevel: number) {
-    logger.log(`set currentLevel:${newLevel}`);
+    this.logger.log(`set currentLevel:${newLevel}`);
     this.levelController.manualLevel = newLevel;
     this.streamController.immediateLevelSwitch();
   }
@@ -536,7 +543,7 @@ export default class Hls implements HlsEventEmitter {
    * @param newLevel - Pass -1 for automatic level selection
    */
   set nextLevel(newLevel: number) {
-    logger.log(`set nextLevel:${newLevel}`);
+    this.logger.log(`set nextLevel:${newLevel}`);
     this.levelController.manualLevel = newLevel;
     this.streamController.nextLevelSwitch();
   }
@@ -555,7 +562,7 @@ export default class Hls implements HlsEventEmitter {
    * @param newLevel - Pass -1 for automatic level selection
    */
   set loadLevel(newLevel: number) {
-    logger.log(`set loadLevel:${newLevel}`);
+    this.logger.log(`set loadLevel:${newLevel}`);
     this.levelController.manualLevel = newLevel;
   }
 
@@ -586,7 +593,7 @@ export default class Hls implements HlsEventEmitter {
    * Sets "first-level", see getter.
    */
   set firstLevel(newLevel: number) {
-    logger.log(`set firstLevel:${newLevel}`);
+    this.logger.log(`set firstLevel:${newLevel}`);
     this.levelController.firstLevel = newLevel;
   }
 
@@ -611,7 +618,7 @@ export default class Hls implements HlsEventEmitter {
    * (determined from download of first segment)
    */
   set startLevel(newLevel: number) {
-    logger.log(`set startLevel:${newLevel}`);
+    this.logger.log(`set startLevel:${newLevel}`);
     // if not in automatic start level detection, ensure startLevel is greater than minAutoLevel
     if (newLevel !== -1) {
       newLevel = Math.max(newLevel, this.minAutoLevel);
@@ -686,7 +693,7 @@ export default class Hls implements HlsEventEmitter {
    */
   set autoLevelCapping(newLevel: number) {
     if (this._autoLevelCapping !== newLevel) {
-      logger.log(`set autoLevelCapping:${newLevel}`);
+      this.logger.log(`set autoLevelCapping:${newLevel}`);
       this._autoLevelCapping = newLevel;
       this.levelController.checkMaxAutoUpdated();
     }
@@ -795,6 +802,10 @@ export default class Hls implements HlsEventEmitter {
     return this.streamController.getMainFwdBufferInfo();
   }
 
+  public get maxBufferLength(): number {
+    return this.streamController.maxBufferLength;
+  }
+
   /**
    * Find and select the best matching audio track, making a level switch when a Group change is necessary.
    * Updates `hls.config.audioPreference`. Returns the selected track, or null when no matching track is found.
@@ -970,6 +981,17 @@ export default class Hls implements HlsEventEmitter {
   get forceStartLoad(): boolean {
     return this.streamController.forceStartLoad;
   }
+
+  /**
+   * ContentSteering pathwayPriority getter/setter
+   */
+  get pathwayPriority(): string[] | null {
+    return this.levelController.pathwayPriority;
+  }
+
+  set pathwayPriority(pathwayPriority: string[]) {
+    this.levelController.pathwayPriority = pathwayPriority;
+  }
 }
 
 export type {
@@ -1032,7 +1054,7 @@ export type {
   TSDemuxerConfig,
 } from './config';
 export type { MediaKeySessionContext } from './controller/eme-controller';
-export type { ILogger } from './utils/logger';
+export type { ILogger, Logger } from './utils/logger';
 export type {
   PathwayClone,
   SteeringManifest,
@@ -1147,6 +1169,7 @@ export type {
   ManifestParsedData,
   MediaAttachedData,
   MediaAttachingData,
+  MediaEndedData,
   NonNativeTextTrack,
   NonNativeTextTracksData,
   SteeringManifestLoadedData,

package/src/loader/fragment-loader.ts

@@ -1,6 +1,6 @@
 import { ErrorTypes, ErrorDetails } from '../errors';
 import { Fragment } from './fragment';
-import {
+import type {
   Loader,
   LoaderConfiguration,
   FragmentLoaderContext,
@@ -336,8 +336,11 @@ function createLoaderContext(
   if (Number.isFinite(start) && Number.isFinite(end)) {
     let byteRangeStart = start;
     let byteRangeEnd = end;
-    if (frag.sn === 'initSegment' && frag.decryptdata?.method === 'AES-128') {
-      // MAP segment encrypted with method 'AES-128', when served with HTTP Range,
+    if (
+      frag.sn === 'initSegment' &&
+      isMethodFullSegmentAesCbc(frag.decryptdata?.method)
+    ) {
+      // MAP segment encrypted with method 'AES-128' or 'AES-256' (cbc), when served with HTTP Range,
       // has the unencrypted size specified in the range.
       // Ref: https://tools.ietf.org/html/draft-pantos-hls-rfc8216bis-08#section-6.3.6
       const fragmentLen = end - start;
@@ -372,6 +375,10 @@ function createGapLoadError(frag: Fragment, part?: Part): LoadError {
   return new LoadError(errorData);
 }
 
+function isMethodFullSegmentAesCbc(method) {
+  return method === 'AES-128' || method === 'AES-256';
+}
+
 export class LoadError extends Error {
   public readonly data: FragLoadFailResult;
   constructor(data: FragLoadFailResult) {

package/src/loader/key-loader.ts

@@ -1,5 +1,5 @@
 import { ErrorTypes, ErrorDetails } from '../errors';
-import {
+import type {
   LoaderStats,
   LoaderResponse,
   LoaderConfiguration,
@@ -194,6 +194,8 @@ export default class KeyLoader implements ComponentAPI {
         }
         return this.loadKeyEME(keyInfo, frag);
       case 'AES-128':
+      case 'AES-256':
+      case 'AES-256-CTR':
         return this.loadKeyHTTP(keyInfo, frag);
       default:
         return Promise.reject(

package/src/loader/level-key.ts

@@ -2,6 +2,7 @@ import {
   changeEndianness,
   convertDataUriToArrayBytes,
 } from '../utils/keysystem-util';
+import { isFullSegmentEncryption } from '../utils/encryption-methods-util';
 import { KeySystemFormats } from '../utils/mediakeys-helper';
 import { mp4pssh } from '../utils/mp4-tools';
 import { logger } from '../utils/logger';
@@ -51,13 +52,14 @@ export class LevelKey implements DecryptData {
     this.keyFormatVersions = formatversions;
     this.iv = iv;
     this.encrypted = method ? method !== 'NONE' : false;
-    this.isCommonEncryption = this.encrypted && method !== 'AES-128';
+    this.isCommonEncryption =
+      this.encrypted && !isFullSegmentEncryption(method);
   }
 
   public isSupported(): boolean {
     // If it's Segment encryption or No encryption, just select that key system
     if (this.method) {
-      if (this.method === 'AES-128' || this.method === 'NONE') {
+      if (isFullSegmentEncryption(this.method) || this.method === 'NONE') {
         return true;
       }
       if (this.keyFormat === 'identity') {
@@ -88,16 +90,15 @@ export class LevelKey implements DecryptData {
       return null;
     }
 
-    if (this.method === 'AES-128' && this.uri && !this.iv) {
+    if (isFullSegmentEncryption(this.method) && this.uri && !this.iv) {
       if (typeof sn !== 'number') {
         // We are fetching decryption data for a initialization segment
-        // If the segment was encrypted with AES-128
+        // If the segment was encrypted with AES-128/256
         // It must have an IV defined. We cannot substitute the Segment Number in.
-        if (this.method === 'AES-128' && !this.iv) {
-          logger.warn(
-            `missing IV for initialization segment with method="${this.method}" - compliance issue`,
-          );
-        }
+        logger.warn(
+          `missing IV for initialization segment with method="${this.method}" - compliance issue`,
+        );
+
         // Explicitly set sn to resulting value from implicit conversions 'initSegment' values for IV generation.
         sn = 0;
       }

package/src/loader/playlist-loader.ts

@@ -8,7 +8,6 @@
 
 import { Events } from '../events';
 import { ErrorDetails, ErrorTypes } from '../errors';
-import { logger } from '../utils/logger';
 import M3U8Parser from './m3u8-parser';
 import type { LevelParsed, VariableMap } from '../types/level';
 import type {
@@ -221,10 +220,10 @@ class PlaylistLoader implements NetworkComponentAPI {
         loaderContext.level === context.level
       ) {
         // same URL can't overlap
-        logger.trace('[playlist-loader]: playlist request ongoing');
+        this.hls.logger.trace('[playlist-loader]: playlist request ongoing');
         return;
       }
-      logger.log(
+      this.hls.logger.log(
         `[playlist-loader]: aborting previous loader for type: ${context.type}`,
       );
       loader.abort();
@@ -408,7 +407,7 @@ class PlaylistLoader implements NetworkComponentAPI {
         levels[0].audioCodec &&
         !levels[0].attrs.AUDIO
       ) {
-        logger.log(
+        this.hls.logger.log(
           '[playlist-loader]: audio codec signaled in quality level, but no embedded audio track signaled, create one',
         );
         audioTracks.unshift({
@@ -555,7 +554,7 @@ class PlaylistLoader implements NetworkComponentAPI {
       message += ` id: ${context.id} group-id: "${context.groupId}"`;
     }
     const error = new Error(message);
-    logger.warn(`[playlist-loader]: ${message}`);
+    this.hls.logger.warn(`[playlist-loader]: ${message}`);
     let details = ErrorDetails.UNKNOWN;
     let fatal = false;
 

package/src/remux/mp4-generator.ts

@@ -28,6 +28,8 @@ class MP4 {
     MP4.types = {
       avc1: [], // codingname
       avcC: [],
+      hvc1: [],
+      hvcC: [],
       btrt: [],
       dinf: [],
       dref: [],
@@ -839,8 +841,10 @@ class MP4 {
         return MP4.box(MP4.types.stsd, MP4.STSD, MP4.ac3(track));
       }
       return MP4.box(MP4.types.stsd, MP4.STSD, MP4.mp4a(track));
-    } else {
+    } else if (track.segmentCodec === 'avc') {
       return MP4.box(MP4.types.stsd, MP4.STSD, MP4.avc1(track));
+    } else {
+      return MP4.box(MP4.types.stsd, MP4.STSD, MP4.hvc1(track));
     }
   }
 
@@ -1123,6 +1127,197 @@ class MP4 {
     const result = appendUint8Array(MP4.FTYP, movie);
     return result;
   }
+
+  static hvc1(track) {
+    const ps = track.params;
+    const units = [track.vps, track.sps, track.pps];
+    const NALuLengthSize = 4;
+    const config = new Uint8Array([
+      0x01,
+      (ps.general_profile_space << 6) |
+        (ps.general_tier_flag ? 32 : 0) |
+        ps.general_profile_idc,
+      ps.general_profile_compatibility_flags[0],
+      ps.general_profile_compatibility_flags[1],
+      ps.general_profile_compatibility_flags[2],
+      ps.general_profile_compatibility_flags[3],
+      ps.general_constraint_indicator_flags[0],
+      ps.general_constraint_indicator_flags[1],
+      ps.general_constraint_indicator_flags[2],
+      ps.general_constraint_indicator_flags[3],
+      ps.general_constraint_indicator_flags[4],
+      ps.general_constraint_indicator_flags[5],
+      ps.general_level_idc,
+      240 | (ps.min_spatial_segmentation_idc >> 8),
+      255 & ps.min_spatial_segmentation_idc,
+      252 | ps.parallelismType,
+      252 | ps.chroma_format_idc,
+      248 | ps.bit_depth_luma_minus8,
+      248 | ps.bit_depth_chroma_minus8,
+      0x00,
+      parseInt(ps.frame_rate.fps),
+      (NALuLengthSize - 1) |
+        (ps.temporal_id_nested << 2) |
+        (ps.num_temporal_layers << 3) |
+        (ps.frame_rate.fixed ? 64 : 0),
+      units.length,
+    ]);
+
+    // compute hvcC size in bytes
+    let length = config.length;
+    for (let i = 0; i < units.length; i += 1) {
+      length += 3;
+      for (let j = 0; j < units[i].length; j += 1) {
+        length += 2 + units[i][j].length;
+      }
+    }
+
+    const hvcC = new Uint8Array(length);
+    hvcC.set(config, 0);
+    length = config.length;
+    // append parameter set units: one vps, one or more sps and pps
+    const iMax = units.length - 1;
+    for (let i = 0; i < units.length; i += 1) {
+      hvcC.set(
+        new Uint8Array([
+          (32 + i) | (i === iMax ? 128 : 0),
+          0x00,
+          units[i].length,
+        ]),
+        length,
+      );
+      length += 3;
+      for (let j = 0; j < units[i].length; j += 1) {
+        hvcC.set(
+          new Uint8Array([units[i][j].length >> 8, units[i][j].length & 255]),
+          length,
+        );
+        length += 2;
+        hvcC.set(units[i][j], length);
+        length += units[i][j].length;
+      }
+    }
+    const hvcc = MP4.box(MP4.types.hvcC, hvcC);
+    const width = track.width;
+    const height = track.height;
+    const hSpacing = track.pixelRatio[0];
+    const vSpacing = track.pixelRatio[1];
+
+    return MP4.box(
+      MP4.types.hvc1,
+      new Uint8Array([
+        0x00,
+        0x00,
+        0x00, // reserved
+        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
+        (width >> 8) & 0xff,
+        width & 0xff, // width
+        (height >> 8) & 0xff,
+        height & 0xff, // height
+        0x00,
+        0x48,
+        0x00,
+        0x00, // horizresolution
+        0x00,
+        0x48,
+        0x00,
+        0x00, // vertresolution
+        0x00,
+        0x00,
+        0x00,
+        0x00, // reserved
+        0x00,
+        0x01, // frame_count
+        0x12,
+        0x64,
+        0x61,
+        0x69,
+        0x6c, // dailymotion/hls.js
+        0x79,
+        0x6d,
+        0x6f,
+        0x74,
+        0x69,
+        0x6f,
+        0x6e,
+        0x2f,
+        0x68,
+        0x6c,
+        0x73,
+        0x2e,
+        0x6a,
+        0x73,
+        0x00,
+        0x00,
+        0x00,
+        0x00,
+        0x00,
+        0x00,
+        0x00,
+        0x00,
+        0x00,
+        0x00,
+        0x00,
+        0x00,
+        0x00, // compressorname
+        0x00,
+        0x18, // depth = 24
+        0x11,
+        0x11,
+      ]), // pre_defined = -1
+      hvcc,
+      MP4.box(
+        MP4.types.btrt,
+        new Uint8Array([
+          0x00,
+          0x1c,
+          0x9c,
+          0x80, // bufferSizeDB
+          0x00,
+          0x2d,
+          0xc6,
+          0xc0, // maxBitrate
+          0x00,
+          0x2d,
+          0xc6,
+          0xc0,
+        ]),
+      ), // avgBitrate
+      MP4.box(
+        MP4.types.pasp,
+        new Uint8Array([
+          hSpacing >> 24, // hSpacing
+          (hSpacing >> 16) & 0xff,
+          (hSpacing >> 8) & 0xff,
+          hSpacing & 0xff,
+          vSpacing >> 24, // vSpacing
+          (vSpacing >> 16) & 0xff,
+          (vSpacing >> 8) & 0xff,
+          vSpacing & 0xff,
+        ]),
+      ),
+    );
+  }
 }
 
 export default MP4;