Blog

html5でのvideoタグの扱い方②

2013.01.30Cat:html5 デザイナー

前回、html5のvideoタグについて書きましたが、
今回は、そのvideoをjavascriptで扱う方法を書きたいと思います。

操作の内容としては、

・動画の再生
・動画の停止
・音量上げ/下げ
・ミュート
・再生位置を表示
・動画の長さを表示
・動画終わりの処理
・再生位置を始めに戻す

になります。

HTMLを以下とした場合で書いていきます。
デモはないです・・・

では、一気に書いちゃいます。
ちなみに時折jQueryを使用していますw

となります。

操作自体はそこまで難しくはないかもしれません!
他にも操作するイベントはたくさんあります。
いろんなカスタマイズができ、オリジナルのプレーヤーも作成できそうですね!

今回は基本的なものしか使用しなかったので、以上となります。

ちなみに、
firefoxで、ogv形式が再生されませんでした。。。
webm形式で見ることができました。(firefoxのverは18です)

ただ、サーバーによっては、htaccessを設置しないといけないようです。

以下を記載してアップしてください。

googleで探すと、これでogv形式もみれるはずなんですが、見れませんでした・・・

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ