Sorry if this is a simple fix -- I'm a Drupal 7 newb, and I haven't been able to find a solution through a few hours of searching.

I've installed and enabled the following Media modules:

  • MediaElement.js 7.x-1.0
  • Media 7.x-1.0-beta4
  • Media Browser Plus 7.x-1.0-beta2
  • Media Gallery 7.x-1.0-beta4
  • Media Internet Sources 7.x-1.0-beta4
  • Media: YouTube 7.x-1.0-alpha4
  • Styles 7.x-2.0-alpha5
  • Multiple forms 7.x-1.0-beta2

    To make sure MediaElement worked, I followed the installation directions in the readme file:

    • Install the libraries and mediaelement modules.
    • Download MediaElement from http://mediaelementjs.com/
    • Unzip into a libraries directory as supported by the libraries module with the name mediaelement (e.g., /sites/all/libraries/mediaelement).

    To set up all media modules, I:

    • Enabled all media modules, as well as dependent modules (styles, multiform, etc.).
    • Enabled mediaelement.js player site-wide.
    • In admin/config/media/types menu, all media types (image, video, audio, other) are listed. Under "manage display," made sure media element was selected for audio and video.
    • In admin/config/content/formats, made sure "Converts Media tags to Markup" filter was checked in appropriate format types (filtered html, full html, plain text).
    • Created a content type, called "Media," and added a field, called "Media." For this field's field type, selected "multimedia asset."
    • Enabled WYSIWYG module and followed on-screen directions to install CKEditor. Then, under WYSIWYG settings, selected "media browser" button to display.

    After all this, I created a Media node. In the Media field, I uploaded a mov video file. But on the node, the file isn't displayed with the viewer. Instead, it's displayed as a file link. I tried pasting a YouTube video url into the Media field, with the same result: a link to the YouTube video appears, but there's no embedded player. (Also tried uploading files via the WYSIWYG media browser button, with no luck.)

    Any idea what I've missed here?

    Any help is much appreciated. Thanks!

Comments

mcsolas’s picture

mcsolas commented

Im stuck here too. Followed a very similar path.

drupaljohngo’s picture

drupaljohngo commented

The way I got it running as I had similar problems trying to get the HTML5 player to appear. I created a new content type with a new field for uploading audio. I used the file widget and in the managed field display added the media element source for audio. I did have problems trying to use html 5 source code in drupal because it would strip the code no matter what I did. So, I'm still trying to get this one to work.

I think my directory structure is all/modules for the module and all/libraries for the mediaelement.js files.

I could not add files from image browser and the module didn't function well with different wysiwyg get editors. An upload field was the only way I could add this content.

And so, I need help on this one two. But it does work and some browsers are less friendly toward it.

kscott22’s picture

kscott22 commented

Is it possible that the version of mediaelement.js is creating problems? I originally installed mediaelement.js 2.1.5, the most recent version, but I believe this was released after the most recent stable version of the MediaElement Module (7.x-1.0).

I removed mediaelement.js 2.1.5 and replaced it with version 2.1.4 (http://wordpress.org/extend/plugins/media-element-html5-video-and-audio-...), but that didn't seem to work. In fact, even the sample player in the Admin > Config > MediaElement.js wasn't showing up with this older version.

Does anyone have a working setup? Which version are you using?

kscott22’s picture

kscott22 commented

From what I understand of this documentation, when adding a media field to a content type, media assets should be set as "ORIGINAL" under "format" in "manage display."

Then in Config > Media > Media Types, under "manage display," you set the proper display for various media types (i.e., for video, the display format should be "Media Element Video").

I've done all this, but I'm still having the same problem -- videos are listed as links, rather than emebedded with the mediaelement.js player.

donwinchell’s picture

donwinchell commented

partial solution, only to add that I am in the same boat as all of the comments here. and thanks to kscott22 for the very clear action account
by going to admin/config/media/types then
/admin/config/media/types/manage/video/display i.e. manage DISPLAY "VIDEO" in my case
I set format to MediaElement Video
this got a player to show up. I still need to do some tweaks to get it the way I want it but this was THE breakthrough for me,
thanks for the comment above. I am still seeing links but if I click on the link now a player appears.

the outcome
I can click on the link and a player will open but so far ONLY in full screen, I have not yet been able to get it to appear on a page.
This seems to work with youtube videos played via the player as well as .mp4 so far but only in a node, in other words I can not get the .mp4 to play in the gallery but I can get the youtube to stream to the player in the gallery.

Any further insights or instructions would be greatly appreciated. Also if someone(s) on the development team was willing to guide us through this, I would be willing to document the components, what they do, where they are configured and how they fit together. I appreciate all the efforts that have gone into this suite of modules and would put some effort into making it easier for others to get it up and running.
thanks all

drupaljohngo’s picture

drupaljohngo commented

You aren't missing anything. The only way I got media to embed was to create content with a File field to upload with the mediaelement widget selected under manage display. Otherwise if I enter in HTML 5 code in the source or WYSIWYG editor it strips the code or displays in the dialog but not in the content.

Keep in mind it depends on which browser you are using as well. There is another adjustment to make for that. I forget what I did to enable it in other browsers. Test it in Chrome, IE9 and Firefox.

rename the directory so it is recognizable. When I downloaded and extracted the mediaelement javascript folder I renamed it mediaelement. I think it was JohnDyer or something.

Good Luck
If someone knows if they can get the same video and audio players with simple HTML tags in Drupal, I'd be grateful. The input formats have been interfered with and I can't isolate the problem.

kscott22’s picture

kscott22 commented

Re: #6

Ah-ha! I'm finally getting the mediaelement player embedded -- THANKS!

So it seems that MediaElement only works if you create a specific FILE field for "video" and name "mediaelement (video)" as the field display type. If you create a MEDIA ASSET field, the mediaelement player won't be embedded.

Does this mean that mediaelement isn't fully integrated with Media? Any ideas about how this works in terms of Media Gallery?

kscott22’s picture

kscott22 commented
Component: Documentation » Code
Category: support » bug
kscott22’s picture

kscott22 commented
Component: Miscellaneous » Documentation

After much back-and-forth, I finally figured out the problem -- it was my own.

As I stated in #4, under "media types" in the admin > config menu, I set the fields to display using "MediaElement player." However, I didn't properly save these settings. Once I properly saved each setting individually, the player was embedded.

Thanks for all the help! (and patience)

kscott22’s picture

kscott22 commented
Component: Code » Documentation
Category: bug » support
Status: Active » Closed (fixed)
aeternus’s picture

aeternus commented

Thanks for this helpful thread! There are a lot of steps but it worked for me!

GN’s picture

GN commented

Thank you all, too.
MediaElement Player finally works for me in Media Gallery - but only when I set "Presentation settings -> Show media on a full page". In the "Show media in a lightbox" mode, it does not play *.flv, only *.mp4 and *.mov. Hmmm, maybe it somehow conflicts with colorbox invoked by the Media Gallery...

For other content types, MediaElement embedded in a page plays .flv, .mp4, and .mov videos OK.

drew reece’s picture

drew reece commented

FWIW,
.movs seem to be handed to Flash for playback and it makes them look bad (even with Flash quality set to high).
Simply renaming the extension to .mp4 seems to be enough to get the movie handled by the HTML5 player and is less pixelated & smoother.

Smaug’s picture

Smaug commented

I found that the media player wasn't being displayed for me either when I was trying to embed audio in content using WYSIWYG and TinyMCE. Turns out it was because WYSIWYG was filtering the html. So I was ending up with:

<div class="mediaelement-audio media-element file-default" data-file_info="%7B%22fid%22:%2255%22,%22view_mode%22:%22default%22,%22type%22:%22media%22%7D"><div class="mediaelement-audio media-element file-default" data-file_info="%7B%22fid%22:%2254%22,%22view_mode%22:%22default%22,%22type%22:%22media%22%7D">&nbsp;</div></div>

Turning off Cleanup and Output -> Verify HTML fixed this (though not an ideal solution).

Media 7.x-2.0-unstable7+34-dev (because of another MediaElement related issue I was having)
Media Field 7.x-2.0-unstable7+34-dev
MediaElement.js 7.x-1.2
MediaElement library version 2.10.3

Should I post this as an issue in Media, Mediaelement or WYSIWYG?