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 fieldCreating a link field
  • Add the url of the media file.As an administrator, add link to a media file by inserting the url
  • The end result. An embedded audio playerThe end result which is 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 buttonAdministrative custom formatter panel
  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;

    &quot;; print &quot;

    &quot; . $item[&#39;title&#39;] . &quot;

    &quot;; print &quot;&quot;; } ?&gt;

  4. Now goto Admin -> Structure -> Content type -> [type] -> Manage DisplayWe are changing the display formatter to the new custom formatter we just created

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.

Comments

Hey there!

I'm the maintainer of the Link module, and I sometimes have people asking me for how to do something like this. Would you mind if I linked to this blog post from the link module page?

Yes go ahead :)

I tried this, and keep getting an unexpected T_STRING in (Pathname) \sites\all\modules\custom_formatters\engines\php.inc(81) : eval()'d code on line 5. Any tips? I've tried removing various bits of code to no avail. I'm using D7.17 with version 7.x-2.2 of Custom Formatters.

Just out of sheer curiousity:
What happens 'behind the scenes' so to speak when somebody clicks that link if is an external link? Is the media file directly streamed from the external site? Or will drupal actually load an instance every time the page is requested?

Add new comment

Filtered HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.