JSFiddle - React, Tailwind, and code Playground

test video 3 video integree dans canvas

by Lio Vousk-prod.

HTML

<video id="hm_realvideo" muted controls>
    <source src="http://hapticmedia.fr/_workdev/cusvird/hm_cusvird/media/test_export_after_video.mp4" type="video/mp4">
        <source src="http://hapticmedia.fr/_workdev/cusvird/hm_cusvird/media/test_export_after_video.webm" type="video/webm">
            <source src="http://hapticmedia.fr/_workdev/cusvird/hm_cusvird/media/test_export_after_video.ogv" type="video/ogg">Your browser does not support the video tag.</video>
<canvas id="hm_animcanvas"></canvas>
<p>
    <input type="button" value="Play" onclick="playPauseVideo()" id="play" style="font:18 pt Helvetica">
</p>
<div class="slider" id="slider" onmousedown="mouseDown()" onmousemove="mouseXY()" ontouchstart="touchXY()" ontouchmove="touchXY()">
    <div class="bar"></div>
    <div id="knob" class="knob">
        <br />Alpha</div>
</div>

CSS

#hm_realvideo {

    display: none;
}
canvas {
    border-radius: 25px;
    border: 1px solid #404040;
}
.slider {
    position: absolute;
    top: 300px;
    left: 85px;
    width: 152px;
    height: 52px;
}
.bar {
    position: relative;
    top: 30px;
    width: 152px;
    height: 2px;
    background-color: #404040;
}
.knob {
    position: relative;
    left: 100px;
    border: 1px solid #404040;
    background-color: #C0C0C0;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    text-align: center;
}

JavaScript

var can, ctx, vid, play, vidTimer, mouseIsDown = 0, knobMid, pixData, pixels, knobX = 100;


function init() {
    vid = document.getElementById("hm_realvideo");
    play = document.getElementById("play");
    can = document.getElementById("hm_animcanvas");
    ctx = can.getContext('2d');
    vid.addEventListener('ended', vidEnd, false);
    vid.addEventListener('play', vidSet, false);
    knobMid = knob.offsetWidth / 2;
    showVid();
}

function vidSet() {
    clearTimeout(vidTimer);
    vidTimer = setTimeout(showVid, 25);
}

function showVid() {
    ctx.drawImage(vid, 0, 0);
    processImage();
    if (!document.querySelector("video").paused)
    // Repeat 40 times a second to oversample 30 fps video
    vidTimer = setTimeout(showVid, 25);
}

function processImage() {
    // get pixel data for entire canvas
    pixels = ctx.getImageData(0, 0, can.width, can.height);
    pixData = pixels.data;
    // set alpha value using slider
    var alphaVal = parseInt(knobX * 2.55)
    // for each pixel
    for (i = 0; i < can.width * can.height; i++) {
        // get combined rgb value to determine brightness
        var rgbVal = pixData[i * 4] + pixData[i * 4 + 1] + pixData[i * 4 + 2];
        // set alpha value for dark pixels to knob value
        if (rgbVal < 150) pixData[i * 4 + 3] = alphaVal;
    }
    // put modified data back into image object
    pixels.data = pixData;
    // blit modified image object to screen
    ctx.putImageData(pixels, 0, 0);
}


function playPauseVideo() {
    if (play.value == "Play") {
        vid.play();
        play.value = "Pause";
    } else {
        vid.pause();
        play.value = "Play";
    }
}

function vidEnd() {
    console.log(playing);
    play.value = "Play";
}

function mouseDown() {
    mouseIsDown = 1;
    mouseXY();
}

function mouseUp() {
    mouseIsDown = 0;
}

function mouseXY(e) {
    if (mouseIsDown) {
        if (!e) var e = event;
        var mouseX = e.pageX - slider.offsetLeft;
        if (mouseX >= 0 &&...