<!DOCTYPE html>
<html>
<body>

<video id="myVideo"  width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

</body>
</html>

"use strict";

document.addEventListener('DOMContentLoaded', init, false);

var video, canvas, context;

function videoReady() {
    var width = this.videoWidth;
    var height = this.videoHeight;
    setTimeout(draw, 0, video, context, width, height);
}

function init() {
    video = document.getElementById('myVideo');
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d');
    video.addEventListener("loadedmetadata", videoReady, false);
}

function draw(v, c, w, h) {
    setTimeout(draw, 0, v, c, w, h);
    if (v.paused || v.ended) return false;
    c.drawImage(v, 0, 0, w, h);
}

function draw(v, c, w, h) {
    setTimeout(draw, 0, v, c, w, h);
    if (v.paused || v.ended) return false;
    c.drawImage(v, 0, 0, w, h);
    var img = document.getElementById("btn");
    c.drawImage(img, 10, 10);
}

function draw(v, c, w, h) {
    setTimeout(draw2, 0, v, c, w, h);
    if (v.paused || v.ended) return false;
    c.drawImage(v, 0, 0, w, h) ;
// obtenir les pixel du canvas
    var imgdata = c.getImageData(0, 0, w, h);
    var data = imgdata.data;
    // on calcule la moyenne
    for (var i = 0; i < data.length; i += 4) {
        var r = data[i];
        var g = data[i + 1];
        var b = data[i + 2];
        var brightness = (r + b + g) / 3;
        data[i] = brightness;
        data[i + 1] = brightness;
        data[i + 2] = brightness;
    }
    // on remet les données dans le canvas
    c.putImageData(imgdata, 0, 0);
    var img = document.getElementById("btn");
    c.drawImage(img, 10, 10);
}