Replace Kaltura player with Video.js
Open, LowPublic

Description

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

Get your demo here !

Quick Checklist/missing stuff

  • Thumbnail mode, like current popupthumbs, but better ? ideas ? T133500
    • The use case here is category pages and thumbnail sizes that are significantly smaller than the higher available size of the thumbnailed video.
    • Currently these open in a dialog
    • Future options:
      • dialog/MMV
        • Got a version with oojs ui modal dialog
      • reflow the page and use 100% page width, with a max of 600px or something
        • Got this working with experimental hacks for the demo. This is NOT a long term proper implementation just yet :)
  • Loading i18n files
    • Needs RL'ifying
  • Multi resolution support:
  • mini/audio player skin…
    • We need a separate skin mode for audio player
    • The skin needs to be better sizable to small sizes
    • We need support for audio captioning
  • iFrame embed support
  • mw-srt codec
  • smaller ‘big play button’ ?
  • play button on centre of player
    • we won't do this, because for mwembed there is a request to have it off-center
  • preserve users last selected resolution
  • preserve users last selected volume level
  • start from offset (slightly broken in multiple videos per page)
    • Doing this with native media fragments
    • Needs ogv.js support Upstream ticket
  • Add ogv.js tech plugin to Video.js
  • sharing
  • credits
  • link to file description page T132493
  • separate TMH from playback technology (have hooks to register player RL modules ?)
  • Ideas for future improvements
    • Related videos
    • Replay button ChangeID
    • Airplay and ChromeCast support
    • poster for audio files
      • Probably we don't need this, but then we also shouldn't SET a poster
      • Another point that will complicate the migration however...

Related Objects

There are a very large number of changes, so older changes are hidden. Show Older Changes

Fixed volume slide no longer shows scroll bars in latest patch.

Paladox edited the task description. (Show Details)Sep 16 2015, 9:00 AM

Resolution selector dosent currently work. So updating description.

It seems resolution plugin does work. Thanks for making it work @TheDJ anyways just need to force the video to add a data-res and to correctly show the resolution in that code. I edited the file and changed to data-shorttitle which I think should be better then data-res because it will show what resolution and what format too.

I would say we need someway on creating the resolution so for example it would be like

Webm

360p

480p

and so on

Ogv

160p

240p

and so on

and other formats. Not sure which order they should be in.

There needs to be a plugin created for this video player since I carnt find any for it. that allows it to download the video.

TheDJ added a comment.Sep 17 2015, 9:23 AM

Some notes.

We don't need everything that is in our current plugin per se. We just need to make sure we actively consider all current functionality that there is now, and how that would work in a future situation. Evaluate and design for the future.

  1. I don't think we need format switching. The priority list of formats is clear. We should just hide formats != autoselected format and only allow resolution switching. The reason this was possible in the past, was mostly because we didn't write the interface to deal with this. We should have the interface like that for a future player.
  2. I don't think we need downloads. The downloads in the old plugin were from a time before we had the download buttons in the transcode status of a file description page.
TheDJ edited the task description. (Show Details)Sep 17 2015, 9:52 AM

Ok by format switching I mean format and the resolutions since not all browsers work with ogv or webm and would be confusing if we only change to resolution so there could be multiple 360p and no one would know which one does what.

For downloads I think we need to have a button or something to keep the functionality since I doint think many people scroll to the bottom and notice a download button.

videojs 5.0 stable release has been released today.

Reedy added a subscriber: Reedy.Oct 19 2015, 9:47 PM

@TheDJ Is this something we want to work actively on?

The upstream owners of video.js, BrightCove would be interested in supporting us with work that may be required

TheDJ added a comment.EditedOct 20 2015, 7:59 AM

@Reedy yes it is.

We need a lot of plugin development work to fill in some gaps. I had sort of left that hanging because 5.0 was not out yet. That is all mostly listed in the description and consists of rewriting existing plugins to be compatible with 5.0 (or wait for it to happen) and integrating them. Instead so far, I focused on making it easier to migrate away from TMH eventually.

Issues I currently see where Brightcove might be able to help out in their framework:

  • Preserving player state. Currently, volume, resolution etc are not uniformly saved and where it is saved, it uses it's own key's, and cannot use a 'cookieprefix' as we use (to segment all settings, for multiple mediawiki installs on the same domain). A uniform system for this would be really helpful.
  • We really need better support for audio only mode, with one and the same player UI.
Reedy added a comment.Oct 20 2015, 8:02 AM

@Reedy yes it is.

We need a lot of plugin development work to fill in some gaps. I had sort of left that hanging because 5.0 was not out yet. That is all mostly listed in the description and consists of rewriting existing plugins to be compatible with 5.0 (or wait for it to happen) and integrating them. Instead so far, I focused on making it easier to migrate away from TMH eventually.

Issues I currently see where Brightcove might be able to help out in their framework:

  • Preserving player state. Currently, volume, resolution etc are not uniformly saved and where it is saved, it uses it's own key's, and cannot use a 'cookieprefix' as we use (to segment all settings, for multiple mediawiki installs on the same domain). A uniform system for this would be really helpful.
  • We really need better support for audio only mode, with one and the same player UI.

Cool. Brion met one of my university mates at a conference recently, and I've put them in contact again. I think Brion is going to go meet them in SF when he's next there, which might be able to move things along...

In the meantime, I've pinged him towards your comment :)

Reedy awarded a token.Oct 20 2015, 8:07 AM
Qgil removed a subscriber: Qgil.Oct 22 2015, 9:03 AM
Jay8g added a subscriber: Jay8g.Oct 26 2015, 5:33 AM
TheDJ changed the title from "Experiment with Video.js" to "Replace Kaltura player with Video.js".Nov 19 2015, 9:24 AM
Paladox edited the task description. (Show Details)Nov 26 2015, 4:48 PM
TheDJ edited the task description. (Show Details)Dec 1 2015, 11:28 AM
TheDJ added a comment.Dec 2 2015, 4:13 PM

Recent changes:

  • Added audio player mode
  • Added audio player loading indicator.
  • Smarter preloading
  • Vertical volume slider restored
  • Reset default videojs style to be inline-block like native <video><audio>
  • Improved player initialization with a $.fn.loadVideoPlayer()
  • Hook into wikipage.content instead of document.ready
TheDJ edited the task description. (Show Details)Dec 3 2015, 6:44 PM
TheDJ edited the task description. (Show Details)Dec 7 2015, 11:41 PM
TheDJ added a comment.Dec 7 2015, 11:47 PM
  • rebased
  • added a grunt task to update, copy and patch the videojs libs and plugins from npm
  • moved a CSS patch from resolution plugin into the 'styles override' module
  • added a patch to remove the video.js 'defaults' stylesheet, which causes a huge page reflow due to our async loading.

Change 212981 merged by jenkins-bot:
Add VideoJS as an alternative player

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

TheDJ added a comment.Dec 8 2015, 3:01 PM

Some notes brion made in review that should be checked later:

  • two adjacent paragraphs consisting only of videos, with a blank line between, get placed onto a single line in output instead of appearing in separate paragraphs. This is possibly because the block-levels fixups in the parser wrap plain text, images, and other non-block elements into <p> wrappers BUT don't for <div>s. The wrapper element for the video appears to be a div, even when it's used inline, so the parser thinks we're outputting a block element but the CSS turns it into inline-block.

Actually there is no wrapping div output by the parser. So this is most likely, because the parser doesn't recognize <video> and <audio> as it does <img>

  • audio UI doesn't fit when packed into a gallery; the source selector switch button sits outside the gallery box
  • video UI doesn't quite fit right when packed into a gallery; play button not centered before playback, elements from control bar spill out after playback (for video moving back to a popup player will resolve it; not sure best way for audio)

I intend to use dynamic layout classes, as demo'ed with a JSFiddle in T119049

  • it's unclear that the initial resolutions selection is correct. this needs general work later.

It's not correct, this plugin needs some considerable rewrites, there are a few things it doesn't account for, but which are important to us.

TheDJ edited the task description. (Show Details)Dec 11 2015, 11:37 AM
TheDJ edited the task description. (Show Details)Dec 11 2015, 2:02 PM
TheDJ edited the task description. (Show Details)Dec 13 2015, 3:39 PM

We could use https://github.com/videojs/videojs-4to5 to help us migrate the plugins to support videojs 5

TheDJ edited the task description. (Show Details)
TheDJ edited the task description. (Show Details)May 11 2016, 10:24 AM
ori moved this task from Backlog to Radar on the Performance-Team board.Jun 20 2016, 6:05 PM

@TheDJ and @brion We should update the videojs resolution plugin we use to use this player.error(null) for it's sources so when we click on a source that is not supported in the browser it wont stop you from changing to a different source.

Per https://github.com/videojs/video.js/pull/3414

J5lx added a subscriber: J5lx.Aug 4 2016, 8:40 PM

@TheDJ hi, would you be able to request a project in labs and create an instance instead of using tools, since tools is too slow, and labs instances would be better suited for testing videojs :) please?

Change 312327 had a related patch set uploaded (by Paladox):
Add a new beta feature to enable Videojs

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

Paladox edited the task description. (Show Details)Sep 23 2016, 10:58 PM

We need a plugin that will allow us to download the videoes please in the different formats?

Change 312327 merged by jenkins-bot:
Optional BetaFeatures integration for video.js mode

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

FoXFTW awarded a token.Dec 6 2016, 8:32 PM
Ltrlg added a subscriber: Ltrlg.Dec 28 2016, 2:26 PM
Fito added a subscriber: Fito.Jan 15 2017, 1:21 PM
Izno added a subscriber: Izno.Mar 23 2017, 10:29 PM
Krinkle removed a subscriber: Krinkle.Mar 25 2017, 3:46 AM
TheDJ removed TheDJ as the assignee of this task.Tue, Mar 28, 8:04 PM
TheDJ added a subscriber: TheDJ.

I feel that having this on my name is potentially holding this ticket back. In my opinion, im not in a position to get this rolled out towards Wikimedia.

Aklapper added a project: Multimedia.EditedWed, Apr 26, 6:28 PM

CC'ing Multimedia if they have any input / position on this regarding a potential future deployment. (see previous comment).

(For the broader picture: see T93544)