CSS3/jQueryでオリジナルのHTML5 videoプレーヤを作成してみよう
コントローラUIの設計 <video>要素を使用した場合、表示されるコントローラはWebブラウザによって異なる。 Webブラウザ別のネイティブなビデオコントローラ - Figure 1: Native browser video controls across different browsersより引用 再生、一時停止、シークなどあらゆる機能/ボタンはMedia elements APIをとおして、JavaScriptでアクセス/操作することが可能だ。これらのコントローラUIは、HTML/CSS/SVGなどで自由に組みたてられる。 コントローラのマークアップ まず最初にこれらコントローラをマークアップする必要がある。さきほどのWebブラウザ別ネイティブビデオコントローラを見て分かるとおり、プレーヤには次の機能が求められる。 再生/一時停止ボタン シークバー タイマー ボリューム調節ボタン
HTML5ビデオを埋め込む。またiPhone, iPadで自動再生…。｜プログラムメモ
● HTML5ビデオを埋め込む <video id="videotest" width="640" height="480" controls="controls" preload="auto" poster="bg.png" onabort="log('abort');" oncanplay="log('canplay');" oncanplaythrough="log('canplaythrough');" ondurationchange="log('durationchange');" onemptied="log('emptied');" onended="log('ended');" onerror="log('error');" onloadeddata="log('loadeddata');" onloadedmetadata="log('loadedmetadata');
HTML5のvideo/audio＋JavaScript APIテクニック
HTML5の＜video＞や＜audio＞タグとJavaScript APIで、自由に動画や音声を楽しもう。カスタムのビデオプレイヤーだって作れる video/audio要素のAPIやイベントを利用する video/audio要素は、JavaScriptを用いた細かい制御を行えるのも特徴の1つです。 カスタムのビデオプレイヤーを作ることも容易ですし、動画からフレームを切り出してCanvasに投影し、グラフィックとして取り扱う、なんてテクニックもあります。 今回は、そうしたJavaScript APIの利用方法について見ていきましょう。なお、この記事は2011年5月25日版の仕様に基づいています。 video/audioに共通のメソッド、プロパティ video要素とaudio要素は、メソッドやプロパティの多くが共通です。そうしたメソッドやプロパティを表すのが以下の一覧です。 MediaErr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5のVideo Tagを使う際の注意点とiPad, iPhone向けの動画へ変換する
