HTML5 Video Player -シークバー実装編 vol.1- « SMART LABスマートフォン,smart phone,Windows7,iPhone,Android,iPad前回は再生・一時停止など、ごくごく基本的な機能のみの実装だったので徐々に機能を追加していきたいと思います。 今回はシークバーをつけてみます。 手始めに、再生位置にあわせて伸びていくだけのバーを作ります。 サンプル ※PCから閲覧の場合、safari, chromeのみ動作します まず、メディアの長さを表すベース部分とプログレスバーの部分を div 要素で作ります。 <div id="seek-bar"><div id="progress-bar"></div></div> プログレスバーはベースの中に入れ子になってます。 次にCSSで見た目をそれっぽくします。 #seek-bar {width: 100%; margin: 5px 0; background: #ccc; -web
