jQueryで再生時間を表示するバーを作る　-　Javascript

Javascript BGM ShareHouseに用いた技術まとめ　-　Javascript,PHP

jQueryで再生時間を表示するバーを作る　-　Javascript †

概要 †

• BGM ShareHouseのYoutubeプレイヤーの下に，動画の再生位置と動画の名前を表示させたい
• メディアプレイヤー的な表示にするとかっこいいのでは

方針 †

• Marquee jQuery Pluginを使って文字を流す　-　Javascriptで使用したプラグインで文字を流す
• その後ろで，再生位置に合わせてバーのdivのサイズを変えればよい

実装 †

もともとMarquee jQuery Pluginを使うために書いていたHTML

<ul id="marquee_ul" class="marquee">
  <li><span id="text1" class="ticker_text">Text1</span></li>
  <li><span id="text2" class="ticker_text">Text2</span></li>
</ul>

にdivを挿入，スクロールさせる要素に名前をつける

<ul id="marquee_ul" class="marquee">
  <div id="progress"></div>
  <li><span id="ticker_name" class="ticker_text"></span></li>
  <li><span id="ticker_time" class="ticker_text"></span></li>
</ul>

divの大きさをJavascriptからいじる

テキストをJavascriptからいじる

かっこよくしよう †

グラデーションでもつけてみるとかっこいいんじゃないかな

Youtubeプレイヤーとの連携 †

divの大きさをJavascriptからいじってテキストを変更

結果として †

こんなかんじになった