This example is similar to the effects given to the image. Here the video's colors are changed. Here we change the original colors to invert and grayscale. Also, we give it an embossed effect. So, obviously, we will have three different canvases to show three different effects.
The output looks like this:
The HTML code:
<html>
<head>
<title>Video</title>
<script src="VideoEffects.js"></script>
</head>
<body onload="init();">
<center>
<video id="myVideo" autoplay="true" loop="true" width=200 height=200>
<source src="happynewyear.mp4" type="video/mp4"/>
The browser doesn't support video
</video>
<canvas id="MyCanvasArea1" width=200 height=300 style="border:2px solid blue;">browser does not support canvas
</canvas>
<canvas id="MyCanvasArea2" width=200 height=300 style="border:2px solid blue;">browser does not support canvas
</canvas...