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

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

○index.html

1
2
3
4
5
6
7
<video id="video1" controls="" preload="" poster="thumb.jpg">
  <source src="sample.mov">
  <source src="sample.mp4">
  <source src="sample.webm">
  <source src="sample.ogv">
  <p>HTML5対応ブラウザで表示してください。</p>
</video>

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

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

○index.html

1
2
3
<div id="controller">
  <img decoding="async" src="playBtn.png" id="playBtn" alt="再生">
</div>

○video.js

01
02
03
04
05
06
07
08
09
10
11
12
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）が書いています。