ホーム > カテゴリ > HTML5・JavaScript >

動画をcanvasで再生する[HTML5]

HTML5のcanvasで「MPEG-4/H.264(mp4)、WebM(webm)、Ogg Theora(ogv)」の動画を再生する方法です。

canvasで再生といっても、実際はvideoタグで再生している最中に動画の画像を抽出してcanvasに描画する手法となります。

サンプルコードの実行イメージ

サンプルコード

動画を読み込んだ時点で、動画をvideoタグとcanvasの両方で再生します。停止する場合は停止ボタンか、F5でリロードして下さい。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>

// ビデオ
var src_video;

// キャンバス
var src_canvas; 
var src_ctx;

// タイマーのID
var interval_id ; 

window.onload = function(){     
  src_canvas = document.getElementById("SrcCanvas");
  src_ctx = src_canvas.getContext("2d");    
  
  src_video = document.getElementById("SrcVideo");
}

// 停止
function stopMovie(){
  src_video.loop=false;
  src_video.pause(); 
  clearInterval(interval_id);
}

// タイマーイベント
function onNotify(){
  src_ctx.drawImage(src_video,0,0,src_video.width,src_video.height);
}

// ユーザーによりファイルが追加された  
function onAddFile(event) {
  var files;
  var filename;
  
  if(event.target.files){
    files = event.target.files;
  }else{ 
    files = event.dataTransfer.files;   
  }    
  
  if (files[0] != undefined){    
    filename = files[0].name;
    
    // 拡張子の取得 
    var ext = filename.split('.');
    ext = ext[ext.length-1].toUpperCase();
                 
    // 動画が再生できる状態になった時
    src_video.onloadeddata = function(){             
      
      // 最大横幅を640にする
      var size = 640;
      if(src_video.videoWidth > size){
        var aspectratio = src_video.videoWidth / size;
        var another = Math.round(src_video.videoHeight / aspectratio);
                
        src_video.width  = size;
        src_video.height = another;  
      }else{
        src_video.width  = src_video.videoWidth;
        src_video.height = src_video.videoHeight;;  
      }
            
      src_canvas.width  = src_video.width;
      src_canvas.height = src_video.height;
      
      // タイマー発動(60fps)
      interval_id = setInterval(onNotify,1000 / 60);
      
      // 再生      
      src_video.play();   
    };    
          
    src_video.onerror = function(e){
      alert('このファイルは読み込めません。');
    };    
   
    // 以前のURLオブジェクトを削除する
    if(src_video.src){
      src_video.pause();
      window.URL.revokeObjectURL(src_video.src) ;
    }
   
    // MIMEを指定して動画を読み込む
    var mime = "video/mp4";
    if(ext == "WEBM"){
      mime = "video/webm";
    }else if (ext == "OGG" || ext == "OGX" || ext == "OGV"){
      mime = "video/ogg";
    }               
    src_video.src = URL.createObjectURL(new Blob([files[0]], { type: mime }));
  }
  document.getElementById("inputfile").value = '';  
}      
</script>
</head>
<body> 
<h4>画像の読み込み</h4>
<p></p>
<input type="file" id="inputfile" accept="video/mp4,video/webm,video/ogg" onchange="onAddFile(event);">
<p><button onclick="stopMovie(); ">停止</button></p>
<h4>videoタグで再生</h4>        
<video id="SrcVideo"></video>
<h4>canvasで再生</h4> 
<canvas id="SrcCanvas"></canvas>
<p></p>
</body>
</html>

基本的なコードの流れはsetIntervalでタイマーを発動させて、フレームレート「60fps」の間隔でvideoから静止画像を取得してcanvasへ描画しています。

これを応用するとニコニコ動画のように動画を再生しながら、コメントを表示する事や動画に対してもエフェクト処理などを行う事も可能です。

私はとりあえず、以下の2つを作ってみました。

アプリ名内容
動画の画像変換ブラウザで動画ファイルを静止画像へ変換する。
動画のGIFアニメ変換ブラウザで動画ファイルをGIFアニメへ変換する。

各ブラウザの動画ファイルの対応表

H.264(mp4)WebM(webm)Ogg Theora(ogv)
Internet Explorer 11対応プラグインが必要-
Edge対応2016年夏
対応予定		-
Chrome対応対応対応
FireFox対応対応対応
Opera対応対応対応
Safari対応--





関連記事


前の記事：OpenToonzの入射光エフェクトをJavaScriptに移植する[C++/OpenCV]
次の記事：アスペクト比(縦横比)を維持して画像を縮小・拡大する

公開日：2016年05月17日
記事NO：01961