2011 . 08 . 05

Yahoo! WebPlayer : MP3やYouTube動画をクールに埋め込むお手軽プレイヤー

Yahoo! WebPlayer

以前、ウェブページにMP3を埋め込んで再生可能にする手っ取り早い方法として『Yahoo! Media Player』を紹介したことがありましたが、最近これの後継版にあたるプレーヤーがリリースされたようなので紹介してみようと思います。


何と言っても簡単この上ないのがこちらのいいところで、面倒なことはスクリプトが全部やってくれ、ユーザーがすることといえばページにスクリプトタグを一行追加するだけ。

これでページ上に記載されたメディアのリンクを、専用プレイヤーで再生可能なリンクに変えてくれるというシロモノです。


使い方としては、まずウェブページに以下のスクリプトタグを追加します。

<script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script> 

次に例えば以下のように、MP3のURLにリンクしたテキストなどを載せていきます。

<a href="http://example.com/example.mp3">Play Song!</a>

ページ内のスクリプトが読み込まれるとリンクテキストの横に再生ボタンが現れ、それをクリックするとプレイヤーが表示されて再生が始まります。

MP3のリンクが複数存在する場合には自動的にプレイリストに追加されて連続再生が可能となります。

(『PLAYLIST』をクリックするとウィンドウが開きます)

実際にデモページを作成したので、どのように動作するか以下で試してください。

デモページ(リンク)


また、単一のMP3以外にプレイリストファイル(XSPF)にも対応しており、以下のようにすることでプレイリストを読み込むことができます。

<a href="http://example.com/playlist.xspf" type="application/xspf+xml">My Favorite Playlist</a>

デモページ(プレイリスト)

(プレイリストはXSPFに準拠のこと)


さらに、今回の後継版では動画にも対応したものとなっています。

以下のようにYouTubeかYahoo! Movieの動画ページのURLをリンクすると、それを再生可能にしてくれます。

<a href="http://www.youtube.com/watch?v=L9szn1QQfas">TRON LEGACY Official Trailer‬on YouTube</a>
<a href="http://movies.yahoo.com/movie/1810197449/info">One Day trailer on Yahoo! Movies</a>

デモページ(動画)

MP3と同様に複数の動画を載せた場合にはプレイリストで連続再生可能ですし、MP3と動画が混在する場合にも上から順にプレイリストに追加されていきます。


基本的な使い方はこんなところですが、プレーヤーのカスタマイズオプションもいろいろと用意されているようなので、必要な方はドキュメントを参照ください。


さて、MP3の埋め込みを考える上で、まずは再生プレイヤーとなるスクリプトの選定が問題となってくると思います。

特別なマークアップを一切必要とせず、スクリプトタグ一行の追加だけで『いい感じ』にしてくれる今回のは利便性に関して云うことはありません。

フリーのMP3プレイヤーはいろいろありますが、利便性・機能性・デザインを総合的に評価しても最もパフォーマンスの高いものと思います。


追記

2013-06-30

2013.06.30をもってYahoo!によるこちらのサービスは終了となりました。

引き続きこのプレーヤーを利用したい場合は下記で公開されている『player.js』のアーカイブをダウンロードしてセルフホストにて使用するか、あるいはGoogleの公開サーバーから直接ロードして使用することができます。


player.js - Google Project Hosting






#1
2012 . 06 . 09  05 : 12 AM
山野

はじめまして。ウェブサイトを作っている山野と申します。ヤフーのこちらのプレイヤーを使って、こちらのようなプレイリストを読み込んでの再生をしたいのですが、(参考アドレス)http://kenz0.s201.xrea.com/download/ymp_domo5.html

プレイリストボタンをクリックすると、xspfファイルそのものをダウンロートという形で保存するように動作してしまいます。
似た様なエラーでは(ヤフーメディアプレイヤーですが)
http://www.kuronowish.com/supportbbs.cgi?act=show;id=622のような事もあるらしいのですが、
私の場合もサーバーとの相性なのでしょうか。
何か考えられる問題点などありましたらアドバイスいただけないでしょうか。

#2
2012 . 06 . 09  02 : 13 PM
kenz0

まず最初に、この問題の解決にはたぶんならないでしょうが、スクリプト名が『player-beta.js』から『player.js』にその後変更されたもようなので、もしそのままで使っているようであれば修正してください。
プレイリストですが、やはり私のテストでも正常に読み込んでくれる所とそうでない所とがあり、まったく同一のXSPFでもサーバーによっては失敗するケースがありました。
XSPFをダウンロードするか文字としてブラウザに表示するかは、XSPFを配信しているサーバーのMIMEタイプの設定よるものと思われますが、正直これが今回問題であるプレイヤーにファイルが読み込まれない原因かどうかは定かではありません。
(それとは別にクロスドメインのアクセス制限の問題のような気もしますが)
いずれにしても、XSPFの配信サーバーを調整できる環境にあるならば、何らかの設定如何で問題解決できる可能性もありますが、もしサーバーを弄れないような場合ではちょっと厳しいかもしれませんね。