Drupal Tutorial - Creating an embedded video or audio player for a link field

Use Case:

Objective

1. As an administrator or a content editor you want to add a link to your content type.
2. To the end user you want the link to be displayed as an embedded player.

Example of Adminstrative Workflow

• Creating a new field
• Add the url of the media file.
• The end result. An embedded audio player

Question

How do we do this?

Enter the custom formatters module

With the custom formatters module you can create custom displays of the link

1. After you downloaded and enabled the module goto Admin -> Structure -> Formatter. Then click add. Note: you may need to clear the cache to see the Formatters menu button
2. Under “Field type(s)” -> Enter link_field into the text field
3. Under “Formatter” I've added this code below. Note: if you are copying and pasting, do not include the <?php ?> tags.
   <!--?php
  foreach ($variables['#items'] as $item) {
    $url = $item['display_url'];
    print "<div class='embedded-item'-->&quot;; print &quot;
   
   
   &quot; . &quot;<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="25" id="mp3playerlightsmallv3" width="210">&quot; . &quot;<param name="allowScriptAccess" value="sameDomain" />&quot; . &quot;<param name="movie" value="http://www.podbean.com/podcast-audio-video-blog-player/mp3playerlightsmallv3.swf?audioPath=&quot; . $url . &quot;&amp;autoStart=no" />&quot; . &quot;<param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><param name="wmode" value="transparent" />&quot; . &quot;<embed align="middle" allowscriptaccess="sameDomain" height="25" name="mp3playerlightsmallv3" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://www.podbean.com/podcast-audio-video-blog-player/mp3playerlightsmallv3.swf?audioPath=&quot; . $url . &quot;&amp;autoStart=no" type="application/x-shockwave-flash" width="210" wmode="transparent"></embed>&quot; . &quot;</object>&quot; . &quot;

   "; print "
   

   " . $item['title'] . "

   "; print ""; } ?>

4. Now goto Admin -> Structure -> Content type -> [type] -> Manage Display

And viola! You now have a podbean player embedded on your site. If you want another player, embed its code into the custom formatter field.