Issue getting Media, Styles and WYSIWYG working together with MediaElement.js

Same issue, occurring only when attempting to embed media with "MediaElement: Video" display mode in wysiwyg using mediabrower

I'm having the same issue. Would love it if anyone could point me in the right direction of how to fix it.

If I understand what's happening correctly, we just need some way to tell WYSIWYG (in my case, CKEditor) how to display a placeholder for the video until the node is saved.

Renaming to better reflect the issue.

I am getting following error message while trying to configure MediaElement on Drupal core 7.4
MediaElement.js 7.x-1.1 Provide MediaElement.js to be used on the entire site or just with Filefields.
Requires: Libraries (missing)

I have installed the plugin from https://github.com/johndyer/mediaelement. (http://www.mediaelementjs.com/)
at /sites/all/libraries

Also installed MediaElement module from http://drupal.org/project/mediaelement.
(7.x-1.1 tar.gz (9.51 KB) 2011-Jun-23 )
at /sites/all/modules

I tried many combinations but everytime its giving the same error message that libraries is missing.

In the past people have faced this issue but no specific resolution have been given.
Any help???

Thanks
bittu10

Hi bittu10, the error message you're getting refers to the Drupal Libraries module: http://drupal.org/project/libraries

You need to install and enable this module for MediaElement to be able to find the JavaScript library.

Update: Another symptomatic (and possibly more informative) JS error message that occurs is:

imgElement is undefined ... wysiwyg-media.js line 191

The trouble occurs much further back upstream though. The issue is that the MediaElement module returns a <video> tag to WYSIWYG, rather than an <img> like it expects. So the stripDivs function returns an empty element instead of an img.

So, unfortunately, it means I need to submit a patch for the Media module rather than MediaElement.

I've submitted a patch for the Media module at #1210344: Allow insertion of inline video through WYSIWYG interface. It may help you if you don't require IE support.

If you having a library error try renaming the library folder to something like mediaelement. I believe the name for the media element library after it is extracted is johndyer-1123542 (or something like that.) There is another posting on the same issue of renaming the folder. Too lazy to search right now but I'll check in later.

If you don't need an upload file field for users, I simply use HTML5 source to embed a player much like a simply img tag.

Other than that I've used Media module sparingly as well as mediaelement. I tried mediaFront module as well and that has some promise but I found some difficulties with configuration. the Playlist features are great.

mediaelement and soundmanager2 suit most of my audio needs. Because javascript is a pain in Drupal I've started using jQueryUpdate and configuring it for google CDN. Do a search for googleCDN if your problems aren't being resolve and set up a test site with a CDN serving all your javascript needs. After mediabeta5 caused my site to crash, I threw my hands in the air, reinstalled beta4 and spent the last day or two using the CDN.
I'd use a different version of Mediamodule and get mediaYoutube until there are less errors.

good luck.

Sub,

I am ready to work on this very issue, I have reviewed the patch supplied on thelink above and what the patch does is allow the video/audio tag to go through the editor. It still does not hand off display to mediaelement so all you get is the underlying video tag...

I'm prepared to work on this over next couple of days but would appreciate any help with the Drupal/JS or from someone with more media/wysiwyg knowledge than I!

subscribing

I have the same error as #6

I have the same error as #6

Same issue as #6
And this patch #1210344: Allow insertion of inline video through WYSIWYG interface doesnt work to me. Are there any solutions?

When adding an audio file from the media library, formattedMedia in stripDivs() of wysiwyg-media.js is an element containing an audio tag, and not an img tag as the method assumes. This results in returning an empty stripped value.

I have the same issue with a formatter module I'm currently developing.

So I'm eager to see what the fix is here.

In relation to #6... I had that error and the issue was that WYSIWYG or media element (not sure I know where one finishes and the other starts) was hard coded to look for an img tag to insert into the WYSIWYG so you had something to work with. If the display element used by that mode didn't include an img then it would break... So my solution (when I was using jw_player) was to include an img tag inside the video tag... In a normal circumstance browsers will hopefully find a renderable mode from the sources prior to it so will ignore it, but it made wysiwyg working.

subscribing

Moving this back to the Media module issue queue since there's no evidence there's a bug here in Mediaelement.

Hi Dave, from what I could see, the issue was that Mediaelement was looking for an img tag. Although I understand why they would do that, it does cause a problem for Media, as an img isn't the only type of media that might be inserted, but on top of that, Media can also be rendered as text and various other things... Is it an issue that Media needs to solve, or do we need to change the way Mediaelement works so that things other than img can be inserted?

@andrewbelcher there is discussion in #1291518: Use Field Formatters for Embedding Options around a possible approach to inserting different representations of media items into WYSIWYG.

This is a duplicate of #1283844: [meta] Improve WYSIWYG integration.

I was having same issue with ckeditor module, so I made some changes in two files "moduels/ckeditor/plugins/media/library.js" and "modules/media/js/wysiwyg-media.js".

I replaced existing code

if ($(formattedMedia).is('img')) {
                stripped = this.outerHTML($(formattedMedia));
            } else {
                stripped = this.outerHTML($('img', $(formattedMedia)));
            }

with this

if ($(formattedMedia).is('img')) {
                stripped = this.outerHTML($(formattedMedia));
            } else {
                stripped = this.outerHTML($('img, video, audio', $(formattedMedia)));
            }

With this new code, editor allowed me to insert audio/video within editor (thanks to #jrsinclair) . I hope this help someone else.

Thanks
Kuldev

Having similar issue with Media, MediaElement, styles and wysiwyg.

Here is the clearest I can explain my problem:
Configuration>Media>File Types>Video>Manage File Display
In here I have several view modes that I can use to configure display settings for videos.
For all view modes, MediaElement:Video is the only one selected.
I create a blog entry. I press the Media button and pick the video from my library. I press Continue With Selection.
I'm brought to a window that says "Embedding (Filename.extension)"
It says "Current Format is" and then a drop-down box listed with the view modes.
If I pick any view mode with MediaElement:Video selected back in Configuration, when I press the Submit button nothing happens. No error message, just nothing.

I've done quite some research and this seems like the place where my actual problem is described most closely by others, but #22 doesn't work for me. When I did try to use it, I clicked Continue With Selection and the window just disappeared, nothing happened and not even a placeholder for my video was in my blog post.

I'm hoping I'm not the only person still with this problem, as I'd really like a viable solution asap. For whatever reasons, embedding videos from your own servers is turning out to be way harder than it seems it should be, but this is the closest I've gotten, just a "submit" button standing in my way now.

Did not mean to change the title like that, apologies.