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

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

tutuploadsmedia_1338352560572.png

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.
tutuploadsmedia_1338352732797.png

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.
tutuploadsmedia_1338353173110.png
  • 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.
tutuploadsmedia_1338353440379.png
  • Choose a directory to upload to.
  • Click Upload.
  • Choose the file to upload from your computer.
tutuploadsmedia_1338353531311.png
  • Highlight the file.
  • Click Insert File.
  • Go to the Advanced tab.
tutuploadsmedia_1338353638344.png
  • Configure the player.
  • Be sure to at least choose Controls by checking the box.
  • Save your work.
  • View the result on your website.
tutuploadsmedia_1338353705847.png
  • You’ll see the audio player on your site.
  • Repeat the process for the video.
tutuploadsmedia_1338353842008.png
  • This time choose Flash.
  • Search for a swf file.
  • Adjust the advanced tab.
  • Insert the file.
  • Save.
tutuploadsmedia_1338357622259.png
Congratulations. You’ve now inserted both the audio file and the swf file into the content.

tutuploadsmedia_1338357771044.png

Author

0 0 votes
Article Rating
Subscribe
Notify of
3 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Vincent
Vincent
11 years ago

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 ?

PeterDahl
PeterDahl
10 years ago

How I can disable the time and the loading bar? The object commands dindßt runs

ayaan
ayaan
10 years ago
Reply to  PeterDahl

disable everything with css use firebug it helps alot

3
0
Would love your thoughts, please comment.x
()
x