Text track font looks too small on audios

[Footprint-Addons]

Description

Hi there,

1. When setting up an audio with an aspectRatio of 16:3 or 16:5 the font of the text track is unreadable. It becomes only big enough to read when you go full screen, but on general, people don't set audios full screen. I've read the suggestion that audios should use transcripts but I would like to show multilingual translations on audios and I would like to be able to keep the height of the audio area small enough so that it doesn't take up too much vertical space.
2. Incidentally, when a video or audio is embedded in a div confined to 500px width, for example, the font size gets uncomfortably small also. This could be a problem for vertical mobile videos.

I prepared a test: https://enterprise.wp21century.com/videojs/videojs-audio.html

I figured out that the font-size for text tracks is dynamically regulated in video.js with this line:

u={font:Math.round(.05*o.height*100)/100+"px sans-serif"} . I tried replace it with many different options and one that comes close is: u={font:"1.5em sans-serif"} . While this gives a reasonable result in Firefox, with Chrome it shows up too large on normal sized videos/audios (16:9, 4:3 etc). And the font doesn't scale up when in full screen on both browsers. Instead, the ideal would be a minimum size of 14px or so while being capable of scaling up on full screen. Does anyone has a solution for this?

versions

videojs

Version 7.6.0

browsers

All browsers are affected

plugins

N/A

[OwenEdwards]

This is actually a limitation of vtt.js; that package sets the font height to 1/20th of the audio/video window height (https://github.com/videojs/vtt.js/blob/master/lib/vtt.js#L969 - FONT_SIZE_PERCENT is actually misnamed, since 0.05 is a fraction not a percentage). That makes sense for video, where the text should only be shown at the bottom of the window, but there isn't currently a way to override it, especially for audio where it would make sense for caption text to overlay the whole "window" that is created by the poster image.

[Footprint-Addons]

Thanks for the clarification, Owen. If it would be detected earlier on in the script that audio is the media type, then we could influence the value of FONT_SIZE_PERCENT with an if statement, but I see that this is not the case. It would therefore require quite some shuffling around to get there. I suppose it is waiting for CSS 4 which will feature font-min-size. But for the time being, I think I'm simply going to use an adapted version of video.js for audios.

[gkatsev]

This also gets a bit more complicated as our plan is to eventually align with the HTML standard where an audio element only gets a control bar and a video element gets a canvas for displaying things. vtt.js and probably native captions aren't currently designed for displaying with an audio track in a small container. Though, that is definitely a good usecase to consider but it isn't a trivial thing to fix.

[Footprint-Addons]

Thanks for your answer gkatsev. This is bad news. Any chance you could change your mind? JW Player, FlowPlayer and other popular video players support canvas, poster images and subtitles for audio. Also, I just started working with waveforms: npmjs.com/package/videojs-wavesurfer by Thijs Triemstra. An excellent feature that makes audios look a lot more interesting. But that needs a canvas too.

[OwenEdwards]

@Footprint-Addons is there any reason you can't play your audio track in a <video> element? That is W3C's current recommendation for displaying audio tracks that have subtitles or captions (using the space that's held by the poster image). It wouldn't solve your issue of caption size, but it would "support canvas, poster images and subtitles for audio" going forward. I don't know if "videojs-wavesurfer" works with a

I don't think I pointed you to some work I did a while ago to try to implement a styling API into vtt.js, so that video.js could pass it's styling into the vtt.js processing rather than trying to "fix" it after vtt.js renders the captions (see https://github.com/OwenEdwards/vtt.js/tree/feat/add-styling-api). I'm sure it needs some updating, but it might be a starting point for a custom version that would support what you want, since the styling of the cues is passed to vtt.js in the processCues method by which point video.js does know whether it is handling a video or audio element (https://github.com/videojs/video.js/blob/master/src/js/player.js#L3988-L3997).

[Footprint-Addons]

Hi @OwenEdwards, Audio tracks work for me currently in the space of the posterimage but @gkatsev just said that this element might not be supported in the future. Audio would become simply a control bar. So, I was already thinking in the direction of creating a copy of video.js and adapt it specifically for audio. Problem is, when I want to add a video and audio on the same page. So, your response came just in time. :-) I'll check out your test and let you know when I get somewhere. Thank you very much!

[gkatsev]

To be clear, we're still going to support the audio tag and audio. We're not dropping support for anything. However, HTML recommends using video elements for when you need a canvas to draw things and use audio elements for when you want just a control bar. You can play audio in a video element and vice versa. The naming makes it a bit confusing based on the specification's recommendation. How this will translate to video.js is definitely a question, and we're definitely not going to make any changes that will break things. We'll probably end up creating an "audio mode" or a "control-bar only mode" that will end up being default for audio elements eventually. Potentially, we'd need another mode that's "audio with poster/subs" but that can also potentially be created as a plugin.

Please don't create a fork of Video.js, we'd be happy to work with you to move Video.js in the right direction. Any reason you can't use a video element?

[Footprint-Addons]

Hi @gkatvev, The reason why I don't want to use a video element for audio is twofold: 1) I want to enable and disable certain plugins and features automatically when audio is embedded and making sure subtitles are big enough on audios, even if the height of the audio element is only 100px for example.
To put this in context: I've created an extension for Joomla to determine whether shortcode on a page contains a video and/or audio element and this creates the correct video.js embedding code for each shortcode. So far, that works fine, it is just that subtitles end up too small when the height is small. If I were to use the video element for audio, my script wouldn't know there is an audio. 2) I think it is important to differentiate between audio and video in source code from an SEO standpoint. Othewise, robots would count audios as videos, giving faulty reports. Your suggestion of a control-bar only mode for audio and poster/subs audio is very welcome indeed.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Footprint-Addons]

Hi Gary (@gkatsev), Any news on this? I discovered in the meantime that when playing videos on mobiles in portrait mode while playing a landscape video (HD 16:9 for example) on a Samsung smartphone (Galaxy A7), the text track looks extremely large. Therefore, this is not only an audio problem, it affects videos as well.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Footprint-Addons]

Well, I hope somebody will be able to resolve this. I can't get it fixed myself the way the player is constructed. I just hope that css4 comes soon and that it is adopted quickly because that would make it a lot easier since you can then determine a minimum and maximum height. Notwithstanding, it is a great player, keep up the good work, folks. :-)

[zhuao666]

😁

[zhuao666]

Well, I hope somebody will be able to resolve this. I can't get it fixed myself the way the player is constructed. I just hope that css4 comes soon and that it is adopted quickly because that would make it a lot easier since you can then determine a minimum and maximum height. Notwithstanding, it is a great player, keep up the good work, folks. :-)

:-):-):-)