Extension talk:TimedMediaHandler/VideoJS Player

The parent division of the player that contains the "floatright" class is removed by a script. Strangely, this only happens on MediaWiki.org (any skin), but not on Wikipedia or Meta-Wiki.

These wikis run a different thumbnail layout (based on the figure element), that TMH isn't entirely ready for yet. This is a known issue and when the changed figure-based layout will eventually move forward to other wikis, then this will have to be fixed first yes. Thank you for paying attention.

The legacy media player (k-player) pre-selected a subtitle language, whereas VideoJS does not, which could cause some viewers to not realize that subtitles for this media even exist.

Some times, when I played media on the legacy player, subtitles appeared without me expecting it. If they did not appear, I would have missed out on it.

It does do that. what language have you selected in your preferences and on which wiki was this specifically ?

Perhaps it has something to do with language fallback chain (like someone use en-GB while the subtitles are en).

On Commons, but happens on other wikis too. I have left my language preferences at the default so far, meaning it is English on Commons. I tested it with media files that have subtitles in several languages including English.

Commons is multilingual, maybe that has something to do with it. I'll take another look.

OK, the subtitles were broken for a while but have been restored. If you have any language select problems, please let me know.

Why, is it expected that English captions don’t appear if someone’s UI language is set to British English or even Japanese? I think they should appear even then; actually foreign-language captions may be even more important than native-language ones: if one has only, say, en-2 knowledge (using Babel extension’s levels), they may not fully understand the spoken English text, but they may be able to follow the video if it’s captioned in English. Of course, if there are native-language captions available, they should be shown, but even English is better than nothing.

I didn't say it was expected, I said it might be a problem (that had been overlooked) and asking for confirmation if this was the situation that the user was in, to confirm that the correct problem had been identified.

https://www.mediawiki.org/w/index.php?title=Project:Sandbox&diff=prev&oldid=5264758 The time size disappears when the audio player is less than 150px wide.

Yes, this is correct and intentional.

If an audio file has timed text, the legacy player (k-player) opened a box above it to show the text, whereas the new player opens a new player in a pop-up overlay which prevents scrolling.

I suggest implementing the box above the player for timed text.

A workaround is opening the same file in a new tab. However, that is less convenient.

This is something that has been highlighted before, but we don't want to add too much complexity as we introduce a new player. Having multiple modes and custom UI really complicates lots of things and the k-player box itself also had lots of downsides of its own honestly.

New UI models might follow later on as we get a better grip on what is handy and how we can best support this.

I see, thanks. A player that is integrated within the page layout simply feels more natural than a pop-up, since pretty much all video platforms do it.

If the pop-up view will remain, I suggest still allowing scrolling while it remains fixed on screen. For reference, Dailymotion and Vimeo use a top bar when the user scrolls down, and Vlare.TV (archive) used a picture-in-picture player.

"YouTube mini player" user script code could also be useful.

Hopefully I could help.

But most of them don’t feature audio with subtitles. We are pretty unique in that regard.

Indeed, though their video subtitles still appear within the player, and audio is simply like video minus the picture.

YouTube also has a transcript sidebar feature, where subtitles appear with time stamps in a sidebar, but for that purpose we already have TimedText pages where both the text and player appear. However, even on the TimedText page, the new player appears in a pop-up overlay that blocks scrolling, which prevents playing the audio and reading the transcript simultaneously. This makes the pop-up overlay appear like more trouble than it's worth.

I don't see how having the player in the layout would add significant complexity. It is the same interface, just not in a pop-up.

Thanks anyway.

"I don't see how having the player in the layout would add significant complexity." Patches are welcome.

Here is a tiny script which demonstrates moving the pop-up player inside the layout.

document.getElementById("file").onclick = function() { setTimeout(
		function() {
// Shortcuts
var player = document.getElementById("mwe_player_0");
var source = player.parentElement.parentElement;
var target = document.getElementsByClassName("fullMedia")[0];

if (document.title.search(/^File:/)  == 0 && document.getElementsByClassName("oo-ui-window-frame")[0]) {
	// hide overlay
	source.parentElement.parentElement.parentElement.style.display="none";
	
	// move
	target.parentNode.insertBefore(source, target);
	
	// adapt size
	document.getElementById("mwe_player_0").style.width="640px";
	document.getElementById("mwe_player_0").style.height="360px";
	player.parentElement.style.position="relative";
	document.getElementById("file").style.display="none";
	
	// unlock scroll
	document.body.style.overflow="scroll";
}

	}, 1000
); };

.oo-ui-windowManager-modal > .oo-ui-dialog { background-color:unset;}
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active { width:300px; height:200px; right:0; bottom:0; top:unset; left:unset; }
.oo-ui-windowManager-modal-active { overflow:unset; }

While this is not inside the layout yet, at least it does not obstruct scrolling anymore. 😃

No. You can hackily hide it with some personal CSS, though.

When the VideoJS Player is playing something (even when it's playing audio files), I can no longer browse the page, which is seriously irritating. Can I turn it off? I don't need the old one because I tried blocking JavaScript and the raw HTML one was fine by me. Thanks.

Something you can do in the meantime is to add the following code to your custom style sheet (shortcut: Special:MyPage/common.css):

/* Floating media player */
.oo-ui-windowManager-modal > .oo-ui-dialog { background-color:unset; }
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active { width:300px; height:200px; right:0; bottom:0; top:unset; left:unset; }
.oo-ui-windowManager-modal-active { overflow:unset; }

/* Increase subtitle size for readability */
.vjs-text-track-cue { font-size: 20px!important; inset:50% 0 0 !important; }

This will put the pop-up player into the corner and allows you to scroll during playback.

An alternative is to open two tabs, one for playback and one for scrolling.

Just a note that this applies to ALL your oo-ui dialogs, including in VE and on mobile, so it will have quite some side effects, please do not advise this to random ppl who cannot be trusted to manage their own CSS files, it's a maintenance nightmare.

Ah thanks! That's much better!

I am glad I could help you! 😃

No

See also T307286.

Is there a way to enable the old player?

no

The time indicator only shows the remaining time, whereas k-player showed the elapsed time, which is more useful for noting time stamps.

I suggest allowing to toggle between the modes by clicking on the time stamp. This is a common feature in many media player programs, therefore it videoJS should have it too.

Soon it will look like this: https://phabricator.wikimedia.org/T306779#7878535

Wow, looks great. 😃 Like the "full-grown" player interface of a dedicated video platform.

This should now be live in all areas where videojs has been deployed by default so far, and tonight for those with the Beta option enabled on a group2 site.

BTW. the reason why vanilla videojs doesn't do this, is because the slider also already shows the time offset. But i'm not a fan of it either.

I see. While it is better than nothing, hovering is unavailable to most mobile users.

Time indicator has been changed only for videos, audio files still have one that only shows remaining time.

Please add the ability to translate subtitles available on Wikipedia or Wikimedia Commons; For example, translate English subtitles to Persian subtitles, etc. using the button in the video player subtitles section.

This is already available. For example, on https://commons.wikimedia.org/wiki/File:The_Big_Parade.webm which is today's Media of the Day, click the subtitles button ("CC" if en-us, otherwise a white box with some lines), then click "create captions" (in en-us; in en-gb, "subtitles", in fa, "ایجاد زیرنویس") which takes you to the subtitle creation system.

I mean, translating subtitles into another language using Wikipedia's content translation capabilities.

Ah, right. That proposal is T44495; I'm pretty confident it's never going to happen using the current technology stack, sorry.

See phab:T298946

Are there any plans to finally implement backward/forward time jumps (±5 s by ←/→, ±1 frame by ,/.)?

There are definitely plans to add seeking shortcuts. But likely we'll also add them to mobile and that makes the implementation a little bit more difficult right now, so it's not the highest priority.

Why would you add keyboard shortcuts on mobile? Keyboard shortcuts inherently require a physical keyboard, which smartphones don’t have. I mean you can add keyboard shortcuts in the mobile version of the site, in case someone uses that from a desktop/laptop computer, but that doesn’t require extra thinking, and it’s quite an edge case anyway.

not keyboard shortcuts of course, but touch interactions which trigger the same actions. This functionality would consist of: a plugin, a keyboard trigger, a touch trigger, visual feedback and the actual action itself.

Is it possible with the new player to add links to several points in a video or audio to jump to the specific time in the video or audio and that use the same player. I have seen that in podcasts and videos at other platforms.

You mean something like chapters? (YouTube has this since 2020.)

I mean that I click on a Link and then the video jumps to the defined time in the video. When I click later to another time in the video through a link, then it jumps to that place without a new tab is opened. So both links go to the same player. Chapters in YouTube are something similar and as far as I have seen it in YouTube it is more advanced, as there are also preview picture shown for the chapters.

Youtube displays only one video on the page, whereas on a MediaWiki page you can have multiple videos on the page. Even the same video multiple times if you want. There's no way to reference a video element on the same page.

If you have a file page you can use query parameter ?start=secondsoffset This is documented on Extension:TimedMediaHandler.

There is no such thing as described however so far.

Thank you for the answers. It is a feature that I think is helpful when it somewhen exists in the future. It helps me at other websites a lot, to find a specific topic in a conversation for example.

I'd really like to understand your request better however. What is the exact use case we are trying to fix ? How would this functionality be used by editors ? Because having functionality is pointless if it won't be used. So: 1. Where would you use this ? In articles, or in the file pages themselves? Considering we are neither Youtube nor a podcast platform. 2. And where would these links to navigate be positioned ? Inside articles ? Again, what problem that editors have are we solving ? 3. Where would an editor define these 'points'

There is the Podcast WikiMove and I was interested in jumping to a specific part in this podcast and had that interest in other videos about discussions at WMF-Communityhours too. Through that I hope that people can easier listen to parts they are interested in again. So it makes knowledge more easy accessible. It is also for other kind of longer videos interesting. For example for videos of train rides, to jump to a specific station. I have listened to the Podcast embedded in a page and watched some videos directly at Commons. So it is at both pages types interesting, but it is more important at article or meta pages. I can not navigate exactly with the mouse and so if I read only where a specific part of an audio or video starts I am not able currently to jump after one to another part in the same video or audio player. I thought that it is possible to give a embededed file an id, and that then links to a specific part in a specific player can be referenced through entering the ID and optional a short text what that part is about.

Ok, so it sounds like primarily you want chapters functionality, defined on the File page, but usable whenever the player is opened (inside an article, on the file page, embedded etc).

BTW: Note that you can already pass a start time to any video transclusion in an article. You just need to know the timeoffset where you want it to start.

On pages that play sound via [[File:… the sound player of <score sound="1"> is not shown.

A known issue, for which the fix will roll out with this weeks train. see phab:T306836