Use http://mediaelementjs.com/ for video support in media manager

[wilsonge]

This adds support for mp4 videos in the media manager in the backend of Joomla. If you upload a sample video. Whilst it does still show the mp4 icon it will now open a bootstrap modal when clicked upon (inside the iframe - advice on how to do it globally will be appreciated - i think http://stackoverflow.com/questions/12954047/twitters-bootstrap-modal-in-iframe-popout-of-it might be related - but my javascript abilities don't extend that far for an evenings work (@DGT41 any ideas?)) and you can play the video

I did investigate whether it was possible for the icon to be replaced by an image preview - but the only php way of doing this involved the php gd image extension which isn't available on all shared hosting platforms (and is partly why we are stuck with not using JImage in core Joomla). But if anyone has any great ideas then feel free to comment again

The video library used is http://mediaelementjs.com/ which is what is used in wordpress core. it uses the html5 api but provides a flash fallback solution for browsers which don't offer support. For more information see their website. They ship with an MIT license which is GPLv2 compatible. The plugin also allows audio elements - which might be a nice feature to implement in the future

When testing remember to allow mp4 images in both the allowed mime types and the allowed extension types (extension type: mp4, mime type: video/mp4)

[dgrammatiko]

inside the iframe - advice on how to do it globally will be appreciated

I think you need to introduce a JHtml function renderVideo (or embedVideo or similar) and then in the front end you call it like we do for calendar etc. Maybe JHtml::_('bootstrap', 'renderVideo' … ); so we can go directly to layouts?

[wilsonge]

That still doesn't fix that fact you need to call the modal from outside the iframe somehow with js

[dgrammatiko]

@wilsonge are you trying to render a modal in the parent window with data from the iframe? is this the case you were talking about?

[dgrammatiko]

Some feed back:

• videos don’t stop playing if you close the modal. It may become annoying. (will make a pr for that here)
• using images button in an article editor, user is not able to select video, so I think we have to rename that plugin to media and allow also video files being embedded to articles (or other content). This needs some thought

[dgrammatiko]

@wilsonge check wilsonge#16
and
wilsonge#15

[wilsonge]

Yes that is the case I mean :) So I want the modal to display in the parent window with the video from the iframe

[dgrammatiko]

@wilsonge I’m thinking a way out on this:

• Render a modal with some dummy content (the id of the div is the essential part here)
• In the <a> tag of the video add some js that will replace the dummy content with the <video> element
• then show that modal with something like `parent.window.jQuery('#idVideo').show();
  I guess it’s easier to code that instead of trying to explain it. PR is coming...

[wilsonge]

<3

[dgrammatiko]

@test OK
can we make some css, imgs, flash and js folders for the assets (as is in their repo)?
Also I feel that we don’t have to use the default theme, a grey theme will be a better match for Isis and Protostar

[wilsonge]

Umm if you move the css and the images apart you need to rework the paths in the CSS files. We just treat it like tinymce or codemirror imho. I strongly feel we shouldn't be making modifications like that. I don't mind someone working on an alternate theme but for the love of god don't put me in charge of it

[dgrammatiko]

For the dimensions we need something like http://ffmpeg-php.sourceforge.net or http://getid3.sourceforge.net or https://code.google.com/p/php-mp4info/
I guess we can skip this for the moment. It would be nice and way faster to retrieve the dimensions from the database. But that requires some logic in the file upload process (get the dimensions and then store them in the db). Which, of course, should be postponed until someone recode the new com_media extension.
By the way adding a class="mejs-ted" to the video tag should load the alternative theme. No need for coding

[dgrammatiko]

@wilsonge with html5 is way easier to get the dimensions with js

<video id="foo" src="foo.mp4"></video>

var vid = document.getElementById("foo");
vid.videoHeight; // returns the intrinsic height of the video
vid.videoWidth; // returns the intrinsic width of the video

BUT this is only for html5 and needs some further logic to replace each tag for each video file. I guess we can add some fallback like "N/A" for older browsers

[wilsonge]

But that's for a video element set up. You can make those dimensions anything you want. It doesn't tell you what the video dimensions themselves are

[dgrammatiko]

if you setup a video tag without any dimensions then the dimensions come from the video (right?) therefore vid.videoHeight; should return the correct height. So the idea is to setup a hidden video tag for every video file with some id and then iterate and replace some the text with the dimensions. In theory this should work

[coolcat-creations]

Are there specific testinstructions for this?

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7810.}

[wilsonge]

Sure. Upload an MP4 video into the media manager (noting the last paragraph in my PR) and try you can now preview the video in the media manger after applying the patch

[waader]

I have tested this item ✅ successfully on 55bd6b6

Thanks wilsonge!

Preview works with current Chrome, Firefox and IE. Not with WinXP/IE8 or WinXP/FF. But who cares, right.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7810.}

[joomla-cms-bot]

This PR has received new commits.

CC: @waader

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7810.}

[joomla-cms-bot]

This PR has received new commits.

CC: @waader

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7810.}

[dgrammatiko]

All good, again!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7810.}

[dgrammatiko]

I have tested this item ✅ successfully on 5d40bcb

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7810.}

[wilsonge]

@waader can you give it a quick test to confirm nothing is wrong. I just merged in staging and tweaked the location of the css and js in response to some feedback :)

[waader]

Works for me!

[dgrammatiko]

So this is RTC!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7810.}

[joomla-cms-bot]

This PR has received new commits.

CC: @DGT41, @waader

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7810.}

[joomla-cms-bot]

This PR has received new commits.

CC: @DGT41, @waader

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7810.}