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

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

概要

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

方針

実装

もともと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からいじってテキストを変更

結果として

こんなかんじになった

1c46d8[1].png

添付ファイル: file1c46d8[1].png 570件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-02-15 (金) 16:20:07 (1592d)