HOW TO USE
How to add audio and video to your site
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.
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.
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.
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.
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.
Fine-grained control
You can have more fine-grained control over the player by using standard attributes of the <a> (anchor) element, like this: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:
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:
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".
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:
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:
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.
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: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>
- 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.
- : 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.
