Welcome to video.js Discussions!

[gkatsev]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[kinetachien]

I am unable to get the control icons to show up properly. No matter whether I use the https://vjs.zencdn.net/7.11.4/video-js.css link or link the css locally plus hosting the fonts. Is this an issue? Is there a trick to this? It makes the player unusable.

[gkatsev]

When a player looks like that it generally means that either the CSS isn't included on the page or that the player div doesn't have the video-js class applied to it.

[kinetachien]

Thanks! The issue was the class missing. That was easy. Much appreciated.

[gkatsev]

See the example with the <video> element here https://github.com/videojs/video.js#quick-start. Adding it to your embed is likely the easiest.
So, <video class="video-js">
There's some info here too https://docs.videojs.com/tutorial-embeds.html

[bcolflesh]

Anybody have a workaround for this? When you use AWS Elastic Transcoder and add a caption file, you'll get a line like this in the m3u8:

X-TIMESTAMP-MAP=MPEGTS:0, LOCAL:00:00:00.000

Note the space in front of LOCAL - video.js can't deal with this and does not display the captions. Editing the file to remove the space, ex:

X-TIMESTAMP-MAP=MPEGTS:0,LOCAL:00:00:00.000

Makes video.js play nice again. I don't hold out hope for AWS doing the right thing - can video.js be altered to ignore/remove the space in this case?

[gkatsev]

There is a pending PR out for this, which we hope to get in soon. In the meantime, please open a ticket with AWS anyway.

[bcolflesh]

Thanks for the reply, fingers crossed for a video,js solution! I posted on AWS Re:post here:

https://repost.aws/questions/QUMTLnH6pmTVC2G_rAWcEl9A/elastic-transcoder-error-in-x-timestamp-map-output

[misteroneill]

The PR in question is here: videojs/vtt.js#60

We'll work on getting that released soon!

[bcolflesh]

Thanks so much, this is super important for us!

[mrrizwan304]

Yes, you can address this issue by customizing video.js to handle the space in the X-TIMESTAMP-MAP header. You can create a plugin or modify the library to preprocess the m3u8 file and remove any spaces in the X-TIMESTAMP-MAP line before processing.

Here's a high-level approach:

Intercept the Manifest: Use video.js's Tech or HLS tech events to intercept the manifest file.
Modify the Manifest: Implement a function to parse the manifest and remove spaces from X-TIMESTAMP-MAP lines.
Update video.js: Ensure the modified manifest is fed back into video.js for playback.
If modifying video.js is not feasible, you might consider pre-processing the m3u8 files on your server to remove spaces from X-TIMESTAMP-MAP lines before serving them.

[PedjaCucak]

Hi everyone,

Is it possible to turn off automatic apply of Closed Caption tracks (never mind that they have DEFAULT and AUTOSELECT)?

If in manifest I have something like this:

#EXT-X-MEDIA:TYPE=CLOSED-CAPTIONS,GROUP-ID="Closed Captions",NAME="en",DEFAULT=YES,AUTOSELECT=YES,LANGUAGE="en",INSTREAM-ID="CC1"

Video.js will automatic show this track on screen, is there a way to turn this off, I don't want player to show track automatic, never mind it has default and autoselect set to true?

Is there some property with which I can configure player not to show CC tracks automatically?
Show them only when user select CC track manually.

Thanks in advance,
Pedja

[PedjaCucak]

@gkatsev