Audio and Video in Drupal 7
Posted by cvd | Posted in Content Management Systems, Drupal | Posted on 17-10-2011
9
Playing inline audio and video files in Drupal 7 can be quite some hassle… The SWF tools are not available for D7, so we have to solve this issue otherwise.
There are several modules out there that promise a lot of things, but not really live up to it…
Here’s a solution that worked great for me:
MediaElements module! It brings the MediaElement.js html5 player plugin to Drupal.
Files to download:
1. MediaElements module: download, extract and upload into sites/all/modules/contrib & of course activate in admin/modules
2. Libraries API module: download, extract and upload into sites/all/modules/contrib & of course activate in admin/modules
3. MediaElement.js: download, extract, rename into ‘mediaelement’ and upload into sites/all/libraries
And you’re set to go!
Now you can add a filefield to your content type, and in the display settings change the default ‘generic file’ into MediaElement Audio or MediaElement Video.
You can also tweak your appearance and set the height and the width for your default display, full node, or teaser.
The great advantage of MediaElements is that it outputs HTML that can easily be styled with CSS!
Great resume! I’ll try this instead of rolling my own HTML 5 Video JS CCK file formatter thingy…
Super ! Vite que je me mette au Drupal, j’ai trop hâte !! =D
Thank you so much! This worked for me!!
Thanks for the post. I’m trying to solve the actual INLINE media problem in D7 (i.e. inserting audio/video players into node content), and I’m stuck. The Media module kind of works with WYSIWYG, but there’s a ton of bugs to be fixed. Looks like I’ll have to resort to inserting the actual embed codes in my node content!
Thanks for the post. I was looking exactly for this. Worked out of the box!!!
@Artem: I haven’t tried that one out, but I will look into it.
hello CVD,
it was a great tutorial. But I am not able make it work
. I am not sure what I am missing.
I am getting a error in console like
Error: $(selector, context).once is not a function
Source File: http://localhost/acquia/sites/all/modules/mediaelement/mediaelement.js?lue60f
Line: 11
It would be great if you can help me out.
@Artem: are you trying to embed third party video like youtube or inline uploaded video?
@Gops: it looks to me that you have some conficting Javascript there!
If you get an error ‘is not a function’ can mean 2 things:
1. your Javascript is not included in the header of your HTML, which is not the case here because he gives you the filename and line number in the error
2. Other Javascript messing up the scope of the $ selector of your Jquery.
So in your case you can:
1. check out the other used JS in your website and look for the one causing you problems.
2. Use the jQuery.noConflict() function which resolves the scope issue of the ‘$’.
Here’s where you can find more documentation: http://api.jquery.com/jQuery.noConflict/
3. Worst case scenario and not recommended solution: replace ‘$’ by ‘jQuery’ e.g. $(selector, context).once => jQuery(selector, context).once
No need to say, that if you have module/library updates, that you have to replace this with every update…