JSFiddle - React, Tailwind, and code Playground

by grantgibson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<svg height="0">
  <filter id="myColour">
    <feColorMatrix id="myMatrix"
      type = "matrix"
      values="1     0     0     0     0
              0     1     0     0     0
              0     0     1     0     0
              0     0     0     1     0 "/>
  </filter>
</svg>


<div>
  <video width="320" height="240" id="video1" autoplay loop muted>
    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

  <video width="320" height="240" id="video2" autoplay loop muted>
    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>
</div>

<input type="range" id="R1" min="0" max="1" step=".1" value="1" />
<input type="range" id="G1" min="0" max="1" step=".1" value="1" />
<input type="range" id="B1" min="0" max="1" step=".1" value="1" />
<hr />
<input type="range" id="A2" min="0" max="1" step=".1" value="0.5" />
<select id="BM2">
               <option value = "normal">normal</option>
               <option value = "multiply">multiply</option>
               <option value = "screen">screen</option>
               <option value = "overlay">overlay</option>
               <option value = "darken">darken</option>
               <option value = "lighten">lighten</option>
               <option value = "color-dodge">color-dodge</option>
               <option value = "color-burn" selected>color-burn</option>
               <option value = "difference">difference</option>
               <option value = "exclusion">exclusion</option>
               <option value = "hue">hue</option>
               <option value = "saturation">saturation</option>
               <option value =...

CSS

#video1 {
  /* Originally had standard CSS filters here
       but now learned that I can attach an SVG
       filter with an SVG color matrix instead.
       See how to decide RGBA to matrix vals here:
       http://andresgalante.com/RGBAtoFeColorMatrix/ */
  filter: url(#myColour);
}

#video2 {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: color-burn;
  opacity: 0.5;
}

JavaScript

function setColour() {
  var r = document.getElementById('R1').value;
  var g = document.getElementById('G1').value;
  var b = document.getElementById('B1').value;
  var newValues = r + " 0 0 0 0  0 " + g + " 0 0 0  0 0 " + b + " 0 0  0 0 0 1 0 ";
  var colorMatrix = document.getElementById('myMatrix');
  colorMatrix.setAttribute("values", newValues);
  //console.log(colorMatrix);
  $('#video1')[0].play()
}

function setAlpha() {
  document.getElementById('video2').style.opacity = document.getElementById('A2').value;
}

function setBlend() {
  document.getElementById('video2').style.mixBlendMode = document.getElementById('BM2').value;
}


console.log($('#video2'))

$('#R1').change(function() {
  setColour();
})
$('#G1').change(function() {
  setColour();
})
$('#B1').change(function() {
  setColour();
})

$('#A2').change(function() {
  setAlpha();
})

$('#BM2').change(function() {
  setBlend();
})