Page MenuHomePhabricator

Replace Kaltura player with Video.js
Open, NormalPublic

Subscribers
Tokens
"Like" token, awarded by Lofhi."Love" token, awarded by Kristbaum."Love" token, awarded by MichaelSchoenitzer."100" token, awarded by divadsn."Orange Medal" token, awarded by Krinkle."Love" token, awarded by Liuxinyu970226."Yellow Medal" token, awarded by FoXFTW."Like" token, awarded by cscott."Mountain of Wealth" token, awarded by Reedy."Love" token, awarded by Qgil."Love" token, awarded by Bawolff.
Assigned To
Authored By
TheDJ, May 23 2015

Description

http://www.videojs.com looks nice. Let's play

Get your demo here !

Blockers

  • Support for audio player
    • We need a separate skin mode for audio player
    • The skin needs to be better sizable to small sizes
    • T121387 We need support for audio captioning. Either:
      • we need to switch audio to video elements, so we have a surface to draw into. Downside. ipa pronunciation player 15px x 15px probably doesn't really fit this model
      • create a new plugin, that takes the events from subtitles, then implement a transcript surface (put it in a centered 'modal'-ish bar. (see VoiceOver ui). More work, but likely more sustainable long term, when we have multiple forms of players.
    • Fix rendering of slider in small player (video.js error about number of elements in controls) T226319
  • Fallback for Grade C browsers that don't support HTML5

Former blockers, now fixed

Enhancements Kultura had

TODO: create new tasks after Video.js becomes default

  • Make default resolution based on both thumbnail size + device pixel ratio (currently, only based on thumb size)
  • Remember user resolution override
  • Remember user last selected volume level https://github.com/theonion/videojs-persistvolume
  • Add a download button? (Native context menu "Save as.." might suffice, also download link exists on File info page)
  • End card showing title, author, etc (MediaViewer / Commons meta data) – http://theonion.github.io/videojs-endcard/

Ideas for later

  • Related videos
  • Replay button ChangeID
  • Airplay and Chromecast support
  • Poster for audio files (to essentially support adding audio underneath a thumbnail, e.g. in the infobox of a bird!)
  • Separate TMH playback technology so that Score extension can re-use the client-side player + maybe transcoding.
  • "Small thumbnail" mode T133500
    • Use cases: Category pages, galleries, small thumbnail sizes.
    • Currently (Kaltura mode) opens these in a dialog.
    • Smaller "play"button in case of small thumbnails?
    • Future options:

Related Objects

StatusAssignedTask
OpenNone
OpenNone
OpenNone
OpenNone
Openbrion
ResolvedTheDJ
OpenNone
OpenNone
OpenNone
OpenNone
Openbrion
Resolvedbrion
ResolvedTheDJ
Resolvedbrion
Resolvedbrion
ResolvedTheDJ
ResolvedTheDJ
ResolvedTheDJ
ResolvedJdforrester-WMF
Resolvedbrion
Resolvedbrion
ResolvedTheDJ
Resolvedbrion
ResolvedTheDJ
ResolvedTheDJ
OpenNone
OpenNone

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Krinkle updated the task description. (Show Details)May 19 2017, 3:55 PM
TheDJ updated the task description. (Show Details)May 19 2017, 4:29 PM
brion added a comment.May 19 2017, 4:51 PM

@Jdforrester-WMF an aggressive schedule. I might recommend pushing the beta rollout back a week, as I'll be on an airplane all Monday.

@brion we could try to update to videojs 6.x. from the changelog nothing really looks like breaking changes. Unless i read the thing wrong.

also videojs-offset has been updated for videojs 5 and 6.

Change 354564 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/extensions/TimedMediaHandler@master] Ensure parsercache consistency

https://gerrit.wikimedia.org/r/354564

Reedy added a comment.May 19 2017, 7:33 PM

@brion we could try to update to videojs 6.x. from the changelog nothing really looks like breaking changes. Unless i read the thing wrong.
also videojs-offset has been updated for videojs 5 and 6.

https://www.heavybit.com/library/podcasts/demuxed/ep-4-the-long-road-to-videojs-6/

Change 354564 merged by jenkins-bot:
[mediawiki/extensions/TimedMediaHandler@master] Ensure parsercache consistency

https://gerrit.wikimedia.org/r/354564

Paladox added a comment.EditedMay 19 2017, 8:07 PM

@brion we could try to update to videojs 6.x. from the changelog nothing really looks like breaking changes. Unless i read the thing wrong.
also videojs-offset has been updated for videojs 5 and 6.

https://www.heavybit.com/library/podcasts/demuxed/ep-4-the-long-road-to-videojs-6/

I just updated to it and it still works. No breakages. https://gerrit.wikimedia.org/r/#/c/314731/

brion added a comment.May 19 2017, 9:17 PM

Per IRC there are breakages with the videojs 6.1 update; at a minimum, the resolution switcher plugin's icon is missing.

brion added a comment.May 19 2017, 9:24 PM

Another problem: there's something wrong with block levels / paragraph wrapping.

This:

[[File:Folgers.ogv]]

[[File:Folgers.ogv]]

under videojs mode shows two copies of the video side-by-side but they should be in separate paragraphs due to the blank line in between.

Per IRC there are breakages with the videojs 6.1 update; at a minimum, the resolution switcher plugin's icon is missing.

See T165815: Update videojs to 6.1 and my attached patch.

TheDJ updated the task description. (Show Details)Jan 23 2018, 11:50 PM
TheDJ updated the task description. (Show Details)Jan 23 2018, 11:53 PM

Note it might be worth including the SRT to WebVTT converter server-side so people who have .srt files from another system can still import them without manually converting. Should probably check out the options on Amara etc.

We may want to consider either temp breaking the audio subtitles or doing a modal popup for the special case. todo -> decide :D

We may want to consider either temp breaking the audio subtitles or doing a modal popup for the special case. todo -> decide :D

In discussions, @TheDJ and I felt that temporarily breaking audio subtitles was the less-bad choice.

TheDJ updated the task description. (Show Details)Feb 1 2018, 11:14 AM
TheDJ added a comment.EditedFeb 6 2018, 3:43 PM

On the topic of audio subtitles:
https://github.com/walsh9/videojs-transcript

This is an old transcript videojs transcript module, which might be usable for some inspiration for audio subtitling (demo)

Another demo for able player: https://ableplayer.github.io/ableplayer/demos/audio4.html

What if we always open the player in MMV, then scroll the transcript inside MMV...

Krinkle raised the priority of this task from Low to Normal.Mar 19 2019, 3:09 PM

Change 511331 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/extensions/TimedMediaHandler@master] Remove responsive-layout module

https://gerrit.wikimedia.org/r/511331

Change 511331 merged by jenkins-bot:
[mediawiki/extensions/TimedMediaHandler@master] Remove responsive-layout module

https://gerrit.wikimedia.org/r/511331

TheDJ added a comment.EditedJun 27 2019, 10:17 PM

Notes to self

  1. we might want to set vjs-fluid class to prevent overflow in minerva skin. (Exclude inline video, as it will make it full width of page.. unless we use inline max-width css... double check all framing styles.)
  2. Consider raising toolbar size in minerva, so it's easier to touch.
  3. Consider raising toolbar size in Fullscreen desktop (so it isn't 40px high on a 27" screen)
  4. When doing that, keep into account control size for responsive control presence T226319.
  5. consider moving info button to top right corner of screen, to avoid crowding of toolbar.
  6. Update vjs-resolution plugin to videojs v7 control layout
  7. Make labels of vjs-resolution and infobar translatable.
  8. When doing resolution selection, account for HiDPI screens.
Lofhi added a subscriber: Lofhi.Jun 28 2019, 6:57 PM

Change 520118 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/extensions/TimedMediaHandler@master] Video.js: plugin translations

https://gerrit.wikimedia.org/r/520118

Change 520118 merged by jenkins-bot:
[mediawiki/extensions/TimedMediaHandler@master] Video.js: plugin translations

https://gerrit.wikimedia.org/r/520118

TheDJ updated the task description. (Show Details)Jul 4 2019, 8:11 AM

The bits of T116154 that we needed to unblock this are done -> removing from dependency tree.

TheDJ updated the task description. (Show Details)

Change 523987 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/extensions/TimedMediaHandler@master] [DNM] Drop KalturaPlayer

https://gerrit.wikimedia.org/r/523987

The Perf-team work on CR and testing of TMH patches for Video.js support, and the perf monitoring around the test roll out, was completed last quarter. Will keep an eye on this from our radar instead.