LogoMark.png

JavaScript/Video

JavaScript| Video


HTML + CSS + JavaScriptによるページのサンプルソースを紹介しています。
HTML5で実装された<VIDEO>と<CANVAS>を利用しています。

はじめに

VIDEO要素の再生、一時停止、はじめに戻す・・といった操作はAUDIO要素の場合と同様にJavaScript を通じて制御可能です。> 参考:JavaScript/Audio

例えば、以下のようなコードがあると、動画の再生を制御できます。

var v = document.getElementsByTagName("video")[0];
v.play();


事例1 VIDEO → CANVAS →DEMO

[draw]を押すと、 VIDEOタグで配置された動画が、タイマーを使ってCANVASへ転送されます。単にVIDEOの内容をCANVASデバイスにdrawImage関数で描き続けているだけなので、同じものが並んで見えます。
後のサンプルの前段となる基礎の確認です。

index.html | ページの文書構造

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Basic Sample</title>
        <script type="text/javascript" src="sample.js"></script>
        <link rel="stylesheet" type="text/css" href="sample.css">
    </head>

    <body>
        <video id="myVideo" width="480" height="360"
           src="sample.webm" autoplay loop></video>
        <canvas id="myCanvas" width="480" height="360"></canvas>
        <button id="myButton" onclick="start()">draw</button>
    </body>
</html>


sample.css | ページのビジュアル

省略


sample.js | ページのふるまい

function start(){
    var myTimer = setInterval(Draw,1000/30);
}

function Draw(){
    var cnvs = document.getElementById("myCanvas");
    var dc =  cnvs.getContext("2d");
    dc.drawImage(myVideo,0,0,480,360);
}


参考:drawImage関数の書き方

dc.drawImage(cnvs, x, y)
dc.drawImage(cnvs, x, y, width, height)

ここで、dcは2次元のデバイスコンテキストを意味します。



事例2 フィルタリング →DEMO

事例1をそのまま応用しています。VIDEOからCANVASへの転送の際、ピクセル単位に色値を計算してモノクロにフィルタリングしています。

index.html | ページの文書構造

省略:事例1と同じです。


sample.css | ページのビジュアル

省略


sample.js | ページのふるまい

function start(){
   var myTimer = setInterval(Draw,1000/30);
}

function Draw(){
    var cnvs = document.getElementById("myCanvas");
    var dc =  cnvs.getContext("2d");
    dc.drawImage(myVideo,0,0,480,360);

    var pxData = dc.getImageData(0,0,480,360);

    for(var y=0; y<360; y++){
        for(var x=0; x<480; x++){
            var i = ( y*480 + x ) * 4;
            var m = 0.299*pxData.data[i]
                   +0.587*pxData.data[i+1]
                   +0.114*pxData.data[i+2];
            pxData.data[i] = pxData.data[i+1] = pxData.data[i+2] = Math.floor(m);
            pxData.data[i+3] = 255; //α値
        }
    }
    dc.putImageData(pxData,0,0);
}

事例3 Drop Video →DEMO

ページ上に置かれたVIDEO要素に、手元の動画ファイルをドロップして表示するサンプルです。FileAPIを使います。

index.html | ページの文書構造

<!DOCTYPE html>
<html lang="ja">
   <head>
     <meta charset="UTF-8" />
     <title>Basic Sample</title>
     <script type="text/javascript" src="sample.js"></script>
     <link rel="stylesheet" type="text/css" href="sample.css">
   </head>
   <body>
     <video autoplay loop controls poster="DropFilesHere.png"></video>
     <video autoplay loop controls poster="DropFilesHere.png"></video>
     <video autoplay loop controls poster="DropFilesHere.png"></video>
     <video autoplay loop controls poster="DropFilesHere.png"></video>
     <p id="progress"></p>
   </body>
</html>


sample.css 要点のみ| ページのビジュアル

video {
  float: left;
  margin: 40px;
  width: 360px;
  height: 240px;
  object-fit: cover;
  background-color: silver;
}
以下省略


sample.js | ページのふるまい

window.onload =function(){
  var vobj = document.getElementsByTagName("video");
  for( i=0; i<vobj.length; i++){
    vobj[i].addEventListener("dragover", DragoverEvent, false);
    vobj[i].addEventListener("drop", DropEvent, false);
  }
}

function DragoverEvent(ev){
  ev.preventDefault();
}
function DropEvent(ev){
  ev.preventDefault(); 
  DropVideo(ev);
}

function DropVideo(ev){

  var targetObj = ev.currentTarget;
  var file = ev.dataTransfer.files[0];
  var fileType = file.name.slice(-4).toLowerCase();

  if( fileType == "webm" || fileType == ".ogv" || fileType == ".mp4" ){

    var reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onprogress = function(ev){
      if( ev.lengthComputable == true && ev.total > 0 ) {
        var rate =( ev.loaded *100 / ev.total ).toFixed(1);
        document.getElementById('progress').innerHTML = "Now Loading ..  " + rate + "%";
      }
    }

    reader.onloadend = function(){
      document.getElementById('progress').innerHTML = "";
      targetObj.setAttribute("src",reader.result);
    }

  }else{
    alert("File available only WebM, ogv, mp4");
  }
}




PAGES

GUIDE

TOOL

DATA

Last-modified: 2020-02-02 (日) 17:41:53