Home > HTML5 > 第7回:ビデオコントロールパネルの作成 ~再生・音量ボタン・再生位置テキスト編~

第7回:ビデオコントロールパネルの作成 ~再生・音量ボタン・再生位置テキスト編~

  • Posted by: HKF管理人
  • 2012/02/17 20:02
  • HTML5
第7回サンプル画像

第7回サンプル画像

 

またまたタイトル改名

今回はビデオコントロールパネルの作成を行いました。上の画像の黒い帯の部分です。
画像を使用したところは、再生の三角マークや音量ボタンなどの各種アイコンのみ。
youtubeは音量スライダーも画像でしたが、こちらはスライダーもCSSのグラデーションで作ってみました。
あと黒い帯もCSSのグラデーションです。

flashを使わずにjavascriptだけで各機能が動いています。
ほんといろいろできるな~と感心。
作っている途中、重たくないかなーというのがずっと気になってた。
今のところは大丈夫だけど。というかこれぐらいで重たかったらあとが続かない・・・。
音量周りがもうちょっとスマートにできそうなきがする。

次回はソース選択画面の作成。画質を選択できるやつです。
ブラウザによって動画の対応コーデックが違うみたいなのでそこをうまく実装しないと。
あと他にはフルスクリーンモードのボタンも作らないといけないけど、そこもブラウザによって実装が違う?みたいなので次の次の機会にしよう。

第7回のブックマークレット
ブックマークに登録してyoutubeで動画を見ながらブックマーク起動。FireFoxとChrome対応。

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.hk-factory.net/html5/165/trackback/
Listed below are links to weblogs that reference
第7回:ビデオコントロールパネルの作成 ~再生・音量ボタン・再生位置テキスト編~ from hk_factory

Home > HTML5 > 第7回:ビデオコントロールパネルの作成 ~再生・音量ボタン・再生位置テキスト編~

twitter
リンク

Return to page top