How to Use

How to add audio and video to your site

The first step is to add the Yahoo! WebPlayer code to your site. If you haven't done that yet, go to our "How to set up" section to learn how.

OK, now that you've added the Yahoo! WebPlayer code to your site, you're ready to make your pages "playable". There are a few different ways to do this, as well as some tricks to customize the experience, which we'll cover below.

Table of Contents

The Basics Fine-grained control Playlists

The Basics

Playing audio and music

link to: mp3 files, etc

The Yahoo! WebPlayer looks for links to audio files on your site and add play buttons when it finds them. If your links have a file extension for a supported format (e.g. .mp3, .wma, etc...), the Yahoo! WebPlayer will pick it up. The simplest way to get an audio play button is to link to an mp3 file.

<a href="http://example.com/song.mp3">My Favorite Tune</a>

Playing YouTube videos

link to: YouTube video page

The Yahoo! WebPlayer detects and plays links to YouTube video pages. Go to youtube.com and search for a video, then copy and paste the video page URL into your page. YouTube video page URLs look like this: http://www.youtube.com/watch?v=spgEJhvygZg.

<a href="http://www.youtube.com/watch?v=spgEJhvygZg">Randy Jackson loves Yahoo!</a>

Playing movie trailers and videos

link to: Yahoo! Movie page

The Yahoo! WebPlayer will detect links to movie pages on Yahoo! Movies and add play buttons. Just go to Yahoo! Movies at http://movies.yahoo.com and search for a movie, then copy and paste the movie page URL into your page. Movie page URLs look like this: http://movies.yahoo.com/movie/1810190842/info.

<a href="http://movies.yahoo.com/movie/1810190842/info">Ip Man 2</a>

Playing terms recognized in your text

mention movie titles in quotes (soon, additional categories) in your text

If you enabled our term recognition feature, then it couldn't be easier to add video to your site. Simply mention a movie title in quotes and if the Yahoo! WebPlayer recognizes the title, it'll get a play button and your visitors will be able to play the movie trailer. We are continually refining and improving our term recognition technology, but some terms may get missed. If that happens, use one of the other methods mentioned here to add video or audio for a given term.

If you mention a movie like "TRON: Legacy" or "X-Men: First Class", play buttons should appear in front of these titles.
Top

Fine-grained control

You can have more fine-grained control over the player by using standard attributes of the <a> (anchor) element, like this:
<a href="http://example.com/mp3/song.mp3" class="htrack" tabindex="1" title="Movin' Right Along" type="audio/mpeg">my favorite song</a>
Below are some of the various attributes you can use to customize the Yahoo! WebPlayer experience.

Specifying media file type

attribute: type

The "type" attribute indicates the MIME type of the file. If this is a supported audio file type, the Yahoo! WebPlayer will know that the link is playable. If the type attribute is set, the Yahoo! WebPlayer ignores the file extension. In this example, the link would be considered playable:

<a href="http://music.com/mysong" type="audio/mpeg">a song</a>
If the type attribute is set to a format that the Yahoo! WebPlayer does not support, the item will be ignored even if the file extension indicates the item is playable. In this example, the link would not be considered playable:
<a href="http://example.com/mysong.mp3" type="image/png">this is a song</a>

Controlling the order of items in the playlist

attribute: tabindex

By default, items are loaded into the player in the order they appear on a page, meaning the order in which they appear to the HTML parser. To override this default order you can use the "tabindex" attribute. For example:

<a href="music1.mp3" tabindex="2">second song</a><a href="music2.mp3" tabindex="1">first song</a>

Controlling titles of playlist items

attribute: title

The "title" attribute can be used to specify the name of the item. The Yahoo! WebPlayer will use whatever is in the title attribute as the title it displays in the player while playing. If the title attribute is not used, the Yahoo! WebPlayer will use the anchor text as the display name for that item. In this example, the link on the page will show "a song", while the song title in the Yahoo! WebPlayer will appear as "Movin' Right Along".

<a href="artist.mp3" title="Movin' Right Along">a song</a>

Controlling which links get 'play' buttons

class: htrack

Setting the class of an item to htrack explicitly marks that item to be added to the playlist. When the Yahoo! WebPlayer detects at least one link with the htrack classs, it will include all links with the htrack class in the playlist, and it will ignore any links that do not have the htrack class. This is helpful if you want the player to detect specific items and ignore others.

<a href="mysong.mp3" class="htrack">a song</a> 
<a href="song-to-exclude-from-playlist.mp3">Ignored song</a>

Removing 'play' buttons from specific links

class: noplay

The "noplay" class lets you explicitly mark an item to be ignored by the player. Setting class="noplay" will prevent the item from appearing in the Yahoo! WebPlayer's playlist. For example:

<a class="noplay" href="example.mp3">song that won't show up in the playlist</a>

Specifying album art

add an image element to your link

You can set the image which is displayed in the player during a song. To do this, put a hidden img element within the playable link. For example:

<a href="my-song.mp3"><img src="images/my-song-cover.png" alt="" style="display:none" />my song</a>

The dimensions of the image should be square, not rectangular

Make sure you add style="display:none" to your image tag so it does not show up directly in the main web page.

Top

Playlists

An easy way to add an entire playlist and all the song metadata to your page is to create and link to an XSPF file. For example:
<a href="http://example.com/playlist.xspf" type="application/xspf+xml">My Favorite Playlist</a>
Similarly to the way it works with other items, you can use the "type" attribute to indicate that a link should be treated as a playlist, when the file extension is not ".xspf." If the link has a ".xspf" file extension, use of the type attribute is unnecessary.

Save your xspf as a separate file (e.g. example.xspf) on your server and include a link to that file on the page where you want the play button to appear. Here is an example of how to format an xspf file: 

<?xml version="1.0" encoding="UTF-8" ?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <location>http://example.com/song.mp3</location>
      <title>Song Title</title>
      <creator>Artist</creator>
      <album>Album</album>
      <image>http://example.com/art.jpg</image>
    </track>
  </trackList>
</playlist>
These are the main XSPF fields that you need to know about:
  • location: The URL to the playable file.
  • title: Name of the song, title of the podcast episode, etc.
  • creator: Name of the person or entity that authored the work. For a song this would be the composer.
  • album: Name of the album, CD or compilation that the work is from, if any.
  • image: URL for an image to use as album art in the player while the media is rendering. Dimensions should be square, not rectangular.
      • Tip: your playlist does not have to be hosted on the same-origin security policy, but it does have to be accessible to anybody on the open web.
      Top