share facebook facebook twitter menu hatena pocket slack

2011.11.10 THU

HTML5 ビデオ再生

小森隆太

WRITTEN BY 小森隆太

こんにちわ。
職人見習いの小森です。

今回は、HTML5のビデオ再生についてです。

○index.html


タブレットなども含め様々なブラウザに対応するために複数の形式のファイルを用意。
それでも再生出来なかった場合に表示するメッセージも記述しておきます。
controlsオプションをつけることにより、ブラウザが再生・ストップ・音量調整などのコントローラーを自動的に付けてくれます。

また、自分で用意した画像を使って再生ボタンなどを作ることもできます。

○index.html

再生

○video.js

window.addEventListener("load",function(){

   if( !HTMLVideoElement ){
     return;       //HTML5 videoに対応してなければ処理終了
   }
   var v1 = document.getElementById("video1");

   document.getElementById("playBtn").addEventListener("click"),function(){
     v1.play(); 
   },true);

},true);

画面読み込み時にボタンにクリックすると再生を実行する処理を登録します。

※この記事は、なかの人(spitz8008)が書いています。

小森隆太

小森隆太

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。