Insert Audio and Video into Drupal With TinyMCE's Media Plugin

May 29, 2012 | Drupal Tutorials | Written by Ed Andrea

TinyMCE If you have TinyMCE installed on your Drupal site, you have all you need to upload and play audio and video files.

The Media module is a good option for sites with more advanced audio and video needs, but if your needs are straightforward, then TinyMCE will work for you.

In this tutorial, we're going to show you how to upload and display an .mp3 audio file and a .swf video file inside Drupal content.

Step 1: Make sure you have TinyMCE and IMCE installed

TinyMCE: Click here for instructions on how to install TinyMCE.
IMCE: Click here for instructions on how to install IMCE.
Prepare or find an .mp3 file and an .swf file to practice with.

Step 2: Activate the TinyMCE buttons and plugins

Go to Configuration > Content authoring > Wysiwyg profile manager.
Click Edit on the profiles that you use.
Check Advanced Image.
Check IMCE.
Check Media.
Scroll to the bottom and click Save.

Step 3: Usign the TinyMCE media option

Go to Content > Add New and create a page, article or other content type that will use the editor.
Click the filmstrip icon.
Choose HTML5 Audio from the dropdown box.

Click the Browse Icon.
If you've installed IMCE you will be able to see this icon. If you don't see it, you need to install IMCE.

Choose a directory to upload to.
Click Upload.
Choose the file to upload from your computer.

Highlight the file.
Click Insert File.
Go to the Advanced tab.

Configure the player.
Be sure to at least choose Controls by checking the box.
Save your work.
View the result on your website.

You'll see the audio player on your site.
Repeat the process for the video.

This time choose Flash.
Search for a swf file.
Adjust the advanced tab.
Insert the file.
Save.

Congratulations. You've now inserted both the audio file and the swf file into the content.

Comments

#1 Vincent 2013-01-23 11:08

Hi
Well I have an issue with that. I did exactly what you explained but in Chrome, Safari and Firefox I get the video added twice : the html5 video tag and the Flash fallback. I am using Drupal 7.14 + tinymce 3.5.7 (or 3.5.8).
Do you have any clue ? Is that related to some js not working correctly ?

Add comment

Start Online Training

Members get access to all our video training. That's 1,142 training sessions in Joomla, Drupal, WordPress and Coding.

Manage All Your Joomla Sites

With Admincredible you can update and manage all your Joomla sites. If you have 5 or 500 sites, Admincredible will make your life easier! Visit Admincredible.com.

Latest Blog Posts and Tutorials

Blog Categories

Latest Comments

Create a Joomla Test Site Using Akeeba Backup
Comment by Mikias
very detailed and thanks! I really really need your help please. i have installed the ...
Magic Quotes Error With Joomla 3 Installation
Comment by yahye
plz help me i done all the steps but i confused Wat's meant and what i replace by ...
Add a Sitemap to Your Wordpress Site
Comment by ram_theprince
Thank you very much. Thats super cool and simple instructions.
Migrate Virtuemart 1.1 to Version 2
Comment by Stephen H
Worked like a charm. Thanks a million!
Installing TinyMCE in Drupal 7
Comment by Binary
Downloading an older version of TinyMCE resolved my issue.

The License for Our Tutorials

All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means:

You can re-use these tutorials.
You can modify these tutorials.
You must link back to our original tutorial.
You can't use these tutorials commercially.

Click here to read the full license.

Drupal Tutorials and Blog Posts