media-tracks

Media Tracks

Polyfills the media elements (<audio> or <video>) adding audio and video tracks (as specced) and with renditions as proposed in media-ui-extensions.

• Allows media engines like hls.js or shaka to add media tracks w/ renditions from the information they retrieve from the manifest to a standardized API.
• Allows media UI implementations like media-chrome to consume this uniform API and render media track selection menus and rendition (quality) selection menus.

Caveats

• iOS does not support manual rendition switching as it is using a native HLS implementation. This library can't change anything about that.

Interfaces

declare global {
    interface HTMLMediaElement {
        videoTracks: VideoTrackList;
        audioTracks: AudioTrackList;
        addVideoTrack(kind: string, label?: string, language?: string): VideoTrack;
        addAudioTrack(kind: string, label?: string, language?: string): AudioTrack;
        removeVideoTrack(track: VideoTrack): void;
        removeAudioTrack(track: AudioTrack): void;
        videoRenditions: VideoRenditionList;
        audioRenditions: AudioRenditionList;
    }
}

declare class VideoTrackList extends EventTarget {
    [index: number]: VideoTrack;
    [Symbol.iterator](): IterableIterator<VideoTrack>;
    get length(): number;
    getTrackById(id: string): VideoTrack | null;
    get selectedIndex(): number;
    get onaddtrack(): ((event?: { track: VideoTrack }) => void) | undefined;
    set onaddtrack(callback: ((event?: { track: VideoTrack }) => void) | undefined);
    get onremovetrack(): ((event?: { track: VideoTrack }) => void) | undefined;
    set onremovetrack(callback: ((event?: { track: VideoTrack }) => void) | undefined);
    get onchange(): (() => void) | undefined;
    set onchange(callback: (() => void) | undefined);
}

declare const VideoTrackKind: {
    alternative: string;
    captions: string;
    main: string;
    sign: string;
    subtitles: string;
    commentary: string;
};

declare class VideoTrack {
    id?: string;
    kind?: string;
    label: string;
    language: string;
    sourceBuffer?: SourceBuffer;
    addRendition(src: string, width?: number, height?: number, codec?: string, bitrate?: number, frameRate?: number): VideoRendition;
    removeRendition(rendition: AudioRendition): void;
    get selected(): boolean;
    set selected(val: boolean);
}

declare class VideoRenditionList extends EventTarget {
    [index: number]: VideoRendition;
    [Symbol.iterator](): IterableIterator<VideoRendition>;
    get length(): number;
    getRenditionById(id: string): VideoRendition | null;
    get selectedIndex(): number;
    set selectedIndex(index: number);
    get onaddrendition(): ((event?: { rendition: VideoRendition }) => void) | undefined;
    set onaddrendition(callback: ((event?: { rendition: VideoRendition }) => void) | undefined);
    get onremoverendition(): ((event?: { rendition: VideoRendition }) => void) | undefined;
    set onremoverendition(callback: ((event?: { rendition: VideoRendition }) => void) | undefined);
    get onchange(): (() => void) | undefined;
    set onchange(callback: (() => void) | undefined);
}

declare class VideoRendition {
    src?: string;
    id?: string;
    width?: number;
    height?: number;
    bitrate?: number;
    frameRate?: number;
    codec?: string;
    get selected(): boolean;
    set selected(val: boolean);
}

declare class AudioTrackList extends EventTarget {
    [index: number]: AudioTrack;
    [Symbol.iterator](): IterableIterator<AudioTrack>;
    get length(): number;
    getTrackById(id: string): AudioTrack | null;
    get onaddtrack(): ((event?: { track: AudioTrack }) => void) | undefined;
    set onaddtrack(callback: ((event?: { track: AudioTrack }) => void) | undefined);
    get onremovetrack(): ((event?: { track: AudioTrack }) => void) | undefined;
    set onremovetrack(callback: ((event?: { track: AudioTrack }) => void) | undefined);
    get onchange(): (() => void) | undefined;
    set onchange(callback: (() => void) | undefined);
}

declare const AudioTrackKind: {
    alternative: string;
    descriptions: string;
    main: string;
    'main-desc': string;
    translation: string;
    commentary: string;
};

declare class AudioTrack {
    id?: string;
    kind?: string;
    label: string;
    language: string;
    sourceBuffer?: SourceBuffer;
    addRendition(src: string, codec?: string, bitrate?: number): AudioRendition;
    removeRendition(rendition: AudioRendition): void;
    get enabled(): boolean;
    set enabled(val: boolean);
}

declare class AudioRenditionList extends EventTarget {
    [index: number]: AudioRendition;
    [Symbol.iterator](): IterableIterator<AudioRendition>;
    get length(): number;
    getRenditionById(id: string): AudioRendition | null;
    get selectedIndex(): number;
    set selectedIndex(index: number);
    get onaddrendition(): ((event?: { rendition: VideoRendition }) => void) | undefined;
    set onaddrendition(callback: ((event?: { rendition: VideoRendition }) => void) | undefined);
    get onremoverendition(): ((event?: { rendition: VideoRendition }) => void) | undefined;
    set onremoverendition(callback: ((event?: { rendition: VideoRendition }) => void) | undefined);
    get onchange(): (() => void) | undefined;
    set onchange(callback: (() => void) | undefined);
}

declare class AudioRendition {
    src?: string;
    id?: string;
    bitrate?: number;
    codec?: string;
    get selected(): boolean;
    set selected(val: boolean);
}