Modify the title of the audio track in videojs while utilizing HLS technology

Question

Modify the title of the audio track in videojs while utilizing HLS technology

Currently, I am implementing video.js with both DASH and HLS depending on the platform that accesses the website. The issue I am encountering is that the audio track labels in the manifest files are not being properly displayed. To address this problem, I planned to adjust them using the code snippet below:

    const audioTrackList = this.player.audioTracks();
    
    for (let i = 0; i < audioTrackList.length; i++) {
      const element = audioTrackList[i];
      
      switch (this.get3LetterLangCode(element.language)) {
        case 'hun':
          element.label = this._translate.instant('Hungarian');
          break;
        case 'slk':
          element.label = this._translate.instant('Slovakian');
          break;
        case 'ron':
          element.label = this._translate.instant('Romanian');
          break;
        case 'bul':
          element.label = this._translate.instant('Bulgarian');
          break;
        case 'cze':
          element.label = this._translate.instant('Czech');
          break;
        case 'eng':
          element.label = this._translate.instant('English');
          break;
        default:
          break;
      }
    }

While this solution works correctly when using DASH, a problem arises when utilizing HLS as I encounter the error message:

Attempted to assign to readonly property

How can I make changes to the audio track label when working with HLS?

typescript http-live-streaming video.js

Answer 1

Answer №1

If you're looking for a solution that is compatible with both Dash and HLS, here's one that works seamlessly:

this.player.on('loadeddata', () => {
    let languageNames = new Intl.DisplayNames([],{type: 'language'});

    const audioTrackList = this.player.audioTracks();
    
    for (let i = 0; i < audioTrackList.length; i++) {
      const element = audioTrackList[i];
      element.label = languageNames.of(element.language)
    }
})

Answer 2

If you're looking for a solution that is compatible with both Dash and HLS, here's one that works seamlessly:

this.player.on('loadeddata', () => {
    let languageNames = new Intl.DisplayNames([],{type: 'language'});

    const audioTrackList = this.player.audioTracks();
    
    for (let i = 0; i < audioTrackList.length; i++) {
      const element = audioTrackList[i];
      element.label = languageNames.of(element.language)
    }
})

Answer 3

Answer №2

I encountered the issue of trying to modify a readonly property and found a workaround.

Although not the most elegant solution, it does get the job done.

const audioTrackList = this.player.audioTracks();
for (let i = 0; i < audioTrackList.length; i++) {
    let track = audioTrackList[0];
    this.player.audioTracks().removeTrack(track);
    const newTrack = new videojs.default.AudioTrack({...track, label: track.language, kind: 'main'});
    this.player.audioTracks().addTrack(newTrack as any);
}

Answer 4

I encountered the issue of trying to modify a readonly property and found a workaround.

Although not the most elegant solution, it does get the job done.

const audioTrackList = this.player.audioTracks();
for (let i = 0; i < audioTrackList.length; i++) {
    let track = audioTrackList[0];
    this.player.audioTracks().removeTrack(track);
    const newTrack = new videojs.default.AudioTrack({...track, label: track.language, kind: 'main'});
    this.player.audioTracks().addTrack(newTrack as any);
}

Modify the title of the audio track in videojs while utilizing HLS technology

Answer №1

Answer №2

Similar questions

items within an unordered list that can be collapsed

Error: Unable to inject HttpClient dependency. Angular 5

Is it possible to add additional text to an input field without modifying its existing value?

A more efficient way to specify children types in Typescript React is by directly specifying the type in the function instead

Can we confidently disregard React's caution regarding using the useState hook conditionally if only the parameter changes based on a condition?

Initiate the input change event manually

Looking to arrange an object by the value of a nested object in Typescript/Angular?

Leveraging environment variables in template documents

Create a unique TypeScript constant to be mocked in each Jest test

Handling events in React using TypeScript

Beautiful parentheses for Typescript constructors

Locate the closest point among a set of coordinates to a specified point

Using TypeScript: creating functions without defining an interface

What steps can I take to improve this code and prevent the error "Property 'patient' does not exist on type 'Request<ParamsDictionary>'" from occurring?

Quick method to alter theme and store it - Ionic

Vue warning: Issue in rendering: "TypeError: Circular structure being converted to JSON"

TypeScript mistakenly infers the incorrect type for AbstractControl when used with a generic type_declaration

I am encountering an issue where the nested loop in Angular TypeScript is failing to return

Struggling to extract the hours and minutes from a date in IONIC: encountering an error stating that getHours is not a recognized

Leverage the power of npm to utilize various javascript libraries for