WordPress.org

Make WordPress Core

Opened 22 months ago

Last modified 22 months ago

#37642 new enhancement

Switch from mediaelement to video.js

Reported by: Ninos Ego Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 3.9
Component: External Libraries Keywords:
Focuses: Cc:

Description

I recommend to switch from mediaelement to video.js http://videojs.com/. Reasons are:

  • Bigger community
  • More and better plugins
  • More stable

Best regards

Change History (7)

#1 @Clorith
22 months ago

  • Component changed from Media to External Libraries
  • Version changed from trunk to 3.9

Keeping in mind that this isn't a simple replacement, we use this library in core and don't just ship it for plugin/theme convenience, so this would most likely require a bit of work to change.

Are there any issues with MediaElement.js that this directly addresses, why should we replace the bundled video player?

video.js is only a video player, MediaElement.js also handles audio files, so we would need to start shipping both in that case)

#2 follow-up: @Ninos Ego
22 months ago

ATM wp also uses an older mediaelement lib, so I cannot use the sourcechooser feature for changing sources e.g. from 1080p to 720p like youtube is doing it. I'm forced to replace the lib or switch to video.js.

#3 @swissspidy
22 months ago

ATM wp also uses an older mediaelement lib, so I cannot use the sourcechooser feature for changing sources e.g. from 1080p to 720p like youtube is doing it. I'm forced to replace the lib or switch to video.js.

WordPress 4.6 ships with MEdiaElement.js 2.22.0, the latest version.

video.js is only a video player, MediaElement.js also handles audio files, so we would need to start shipping both in that case)

That alone is reason enough to not do some unnecessary replacement.

#4 @gkatsev
22 months ago

Hey, I'm a videojs maintainer. I wanted to add that videojs *does* support audio in addition to video. Not only that but the HTML spec says that the only difference between audio and video elements is that video elements have a "display" area and audio element don't. You can always play back audio in a video element and video in an audio element. The latter if you want just the audio from a video.

Also, while I would love wordpress to switch to videojs and I would be very happy to help make that happen; I do believe that if everything is working fine it's probably not worth switching unless there's a compelling reason to do so.

#5 @Ninos Ego
22 months ago

Nice that wp 4.6 is shipped with latest mediaelement version.

About video.js audio I found following blog post: http://blog.videojs.com/Video-js-4-9-Now-can-join-the-party/

#6 in reply to: ↑ 2 @ocean90
22 months ago

Replying to Ninos Ego:

ATM wp also uses an older mediaelement lib, so I cannot use the sourcechooser feature for changing sources e.g. from 1080p to 720p like youtube is doing it.

Source chooser is a feature which isn't in the default build. If you want to use it you have to add it by yourself. Something like the following should work:

<?php
/**
 * Plugin name: mep-feature-sourcechooser
 */

namespace Ticket37642;

function register_script() {
        wp_register_script( 'mep-feature-sourcechooser', plugins_url( 'mep-feature-sourcechooser.js', __FILE__ ), array( 'mediaelement' ), '2.22.0', false );
}
add_action( 'init', __NAMESPACE__ . '\register_script' );

function mejs_settings( $settings ) {
        $settings['features'] = array( 'playpause', 'current', 'progress', 'duration', 'tracks', 'volume', 'fullscreen', 'sourcechooser' );
        return $settings;
}
add_filter( 'mejs_settings', __NAMESPACE__ . '\mejs_settings' );

function wp_video_shortcode( $html ) {
        wp_enqueue_script( 'mep-feature-sourcechooser' );
        return $html;
}
add_filter( 'wp_video_shortcode', __NAMESPACE__ . '\wp_video_shortcode' );

#7 @Ninos Ego
22 months ago

@ocean90 nice, thank you. Can you may show me an example html-code, I cannot find any. I've tried following: $source = '<source type="%s" src="%s" title="%s" res="%d" />';

title is e.g. 1080p..

Ok seems it's working, there's just a styling issue (may depends on my theme).

PS: I still recommend videojs, but the devs have to decide :)

Last edited 22 months ago by Ninos Ego (previous) (diff)
Note: See TracTickets for help on using tickets.