2018年08月01日
Docker for Mac を使って WordPress の...
2018年07月29日
Docker for Mac のインストール
2018年07月08日
Docker 便利コマンドあれこれ
2018年07月08日
オライリーの Docker 本(Docker Up &...
2018年07月05日
iPad mini 2 を購入しました
2018年07月04日
Docker で Jenkins するときのあれこれ

HOME > カテゴリ(JavaScript)の記事

簡単に YouTube や mp3 を再生できる Yahoo! WebPlayer の使い方



Web サイトで MP3 を再生したり YouTube 動画を再生する時に簡単に導入できる Yahoo! WebPlayer の導入方法を紹介します。

Yahoo! WebPlayer は、iTunes ミュージック検索 & ブログ用タグ生成ツールで曲を視聴するために利用しています。

Yahoo! WebPlayer は Flush を利用した 動画や音楽ファイルを再生するためのプレーヤーで、無料で利用する事ができます。

Yahoo! WebPlayer の実装は簡単で、<body></body>の中に、

(ブラックにする場合)

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

(グレーにする場合)

<script type=”text/javascript”> var YWPParams = { theme: “silver” }; </script> <script type=”text/javascript” src=”http://webplayer.yahooapis.com/player.js”></script>

を追加するだけです。この1行を追加すると、<body></body>の中にある、mp3 などメディアファイルへのリンクを勝手に抽出しプレイリストにまとめてくれます。

正しくYahoo! WebPlayer が動いていれば、ブラウザの左下に、


のようなタブが表示されます。タブをクリックすると、



のびます。

あとは特に説明は必要ないと思いますが、


をクリックするとプレイリストが表示されます。

プレイリストの表示方法を変えてみる

プレイリストには再生している曲名とイメージ画像が表示されます。

曲名は、メディアファイルへのリンク(<a>タグ)内のテキストが曲名として使われます。

<a href=”http://….mp3″>ここが曲名</a>

ただ、これだと使い勝手が悪いので、<a>タグに title 属性を追加する事で曲名を自由に設定できます。

<a href=”http://….mp3″ title=”ここが曲名”>視聴する</a>

イメージ画像はデフォルトでは何も表示されません。イメージ画像を追加するためには、メディアファイルへのリンク(<a>)タグ内に <img> タグを追加します。

<a href=”http://….mp3″ title=”ここが曲名”> <img=”ここがイメージ画像のURL” />視聴する</a>

そうするとイメージ画像が表示されます。このままだとブラウザ上に画像が表示されてしまうので、

<a href=”http://….mp3″ title=”ここが曲名”> <img=”ここがイメージ画像のURL” style=”display:none”/>視聴する</a>

とすれば表示されなくなります。

その他にも、Yahoo! WebPlayer で抽出してほしくない(再生したくない)メディアファイルへのリンクには class=”noplay” を追加することで対象外としたり、プレイリストの順序( tabindex 属性 )を指定したりすることができます。

詳しくは、Yahoo! WebPlayerドキュメントをご覧ください。

でわでわ。





この記事にコメントする





Copyright © 2012 - 2013 MacBook Air とWordPressでこうなった All rights reserved
Designed by Theme Junkie. Powered by WordPress.