acrylian / mediaelementjs_player

A Zenphoto plugin for the Mediaelementjs player

mediaelementjs_player

Note: The plugin is not developed actively anymore. Since all modern browsers can display video/audio content via HTML5 natively the only reason is the flashfallback for old browser. Besides that pull requests for fixes are still welcome.

A Zenphoto plugin for the MediaElement.js video and audio player by John Dyer (http://mediaelementjs.com). It will play natively via HTML5 in capable browsers and is responsive.

Installation

Place the file mediaelementjs_player.php and the folder of the same name into your /plugins folder.

Supported file formats

• Audio: .mp3, .m4a - Counterpart formats .oga and .webma supported (see note below!)
  
• Video: .m4v/.mp4, .flv - Counterpart formats .ogv and .webmv supported (see note below!)

IMPORTANT NOTE ON OGG AND WEBM COUNTERPART FORMATS:

The counterpart formats are not valid formats for Zenphoto itself and not recognized as items as that would confuse the management.

Therefore these formats can be uploaded via FTP only.The files need to have the same file name (beware the character case!). In single player usage, the player will check via the file system if a counterpart file exists and if counterpart support is enabled. Firefox seems to prefer the .oga and .ogv while Chrome .webma and .webmv

Since the flash fallback covers all essential formats this is not much of an issue for visitors though.

If you have problems with any format being recognized, you might need to tell your server about the mime types first. See examples on http://mediaelementjs.com under "installation".

Subtitle and chapter support for videos (NOTE: NOT IMPLEMENTED YET!)

It supports .srt files. Like the counterpart formats MUST be uploaded via FTP! They must follow this naming convention: subtitles file: <nameofyourvideo>_subtitles.srt chapters file: <name of your video>_chapters.srt

Example: yourvideo.mp4 with yourvideo_subtitles.srt and yourvideo_chapters.srt

Content Macro

Mediaelementjs attaches to the content_macro MEDIAPLAYER you can use within normal text of Zenpage pages or articles for example.

[MEDIAPLAYER <albumname> <imagefilename> <number> <width> <height>]

Example: [MEDIAPLAYER album1 video.mp4 400 300]

If you are using more than one player on a page you need to pass a 2nd parameter with for example an unique number:

[MEDIAPLAYER album1 video1.mp4 1]
[MEDIAPLAYER album2 video2.mp4 2]

NOTE:This player does not support external albums!

Playlist (beta)

Basic playlist support (adapted from Andrew Berezovsky – https://github.com/duozersk/mep-feature-playlist): Enable the option to load the playlist script support. Then call on your theme's album.php the method

$_zp_multimedia_extension->playlistPlayer();
echo $_zp_multimedia_extension->playlistPlayer('video','',''); //video playlist using all available .mp4, .m4v, .flv files only
echo $_zp_multimedia_extension->playlistPlayer('audio','',''); //audio playlist using all available .mp3, .m4a files only

Additionally you can set a specific albumname on the 2nd parameter to call a playlist outside of album.php

Notes: Mixed audio and video playlists are not possible. Counterpart formats are also not supported. Also the next playlist item does not automatically play.

mediaelementjs_player's Issues

Files don't play in 1.4.7

None of my media files play in 1.4.7
Instead I get notices like this:

USER NOTICE: Image …/albums/video/Zenpage-Teaser.m4v not renderable (imageGet). in …/zp-core/functions-image.php on line 28 trigger_error called from imageError (functions-image.php [28]) from cacheImage (functions-image.php [200]) from i.php [165]

Everything works normal in 1.4.6

Player control buttons missing

Icons for play, stop,... buttons are not displayed.
Browser complains it cannot find mejs-controls.svg.

After some digging I found an Issue at mediaelements, the proposed workaround works:
mediaelement/mediaelement#2874 (comment)

Macro's ? audio and video tags are stripped on pages and news

Using macro's the entire<video> and <audio> tags are stripped in the output of pages and news.
What's left is the <object> tag.
The weird thing is, this also happens if I copy/paste a complete video/audio code in a page/news item.
So probably not related to macro's at all.
No errors, tinyMCE does not strip anything….

Fix for poster image aspect ratio and issue with shrinking of larger poster images

This is related to Aspect ratio not being honored for video player sidecar poster images, but I figured you would want me to post it here and not mix things up.

I know you are planning on getting rid of mediaelementjs_player, but if you change line 112 in mediaelementplayer.css from:
background-size: cover;
to:
background-size: contain;

It will properly scale the image posters in that as well to their correct aspect ratio in the video player.

The one issue I have noticed with mediaelementjs_player and how it handles poster images (and this may relate eventually to Zenphoto as well), if the image is larger than the set poster size, but a different aspect ratio, it will stretch the image when it shrinks it. This is not a problem if the images are smaller, it will keep them at the smaller size, and scale them in the player itself.

So a 1440x1080 sidecar image gets stretched to 1280x720, but a 640x480 image will stay at 640x480.

mediaelementjs player plugin configuration

• My experiments with mediaelementjs plugin (unsupported but a work in progress) show that not all elements of the plugin configuration seem to be sent through to the plugin. Specifically I can turn off the fullscreen setting in the plugin config but it still appears (and works) in the control bar.
• I can also enable autoload feature in the plugin config but autoload doesn't work in the browser (Safari - Mavericks). Yet it does seem to work on an iPad (IOS 7)

This might also be a mediaelementjs issue.

• Also the version of mediaelementjs found in the unsupported plugins zip master is older than the current version. Dropping in the current version from the mediaelementsjs player web site works with the existing plugin php file. (Except as noted above)
• I made two adjustments.

Changing the css used to include

:ie8 .me-plugin { position: static; } (replaces absolute for ie8) and adding

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/m4v .m4v
AddType video/webm .webm

to the .htaccess file seem to help (bad science- changed two things, don't know which one helped with older IE8 browser issue)

webma and webmv not recognized by Firefox

Testing in 1.4.6

As I noticed before, the webma and webmv extensions are not recognized by Firefox.

Playlist functionality broken

Sadly no official playlist plugin is available and third party ones don't work anymore.

MEDIAPLAYER macro broken

Since the recent changes or even before the macro is broken and does throw the message "the macro does not return data". It looks its execution is completely ignored although it is listed as registered. The code is more or less directly from the jPlayer plugin.

Several typo's

Typo line 61:
enableExtension(')mediaelementjs_player', 0);
should be:
enableExtension('mediaelementjs_player', 0);

The following lines have missing $width and $height parameters:
line 504, line 508

The macro also misses the (optional) width and height parameters.(line 517)
'params' => array('string','string','int*'),
should be
'params' => array('string','string','int*','int*','int*'),