Orginial HTML5 video:
Canvas video with negative effect:
Canvas video with greyscale effect:
Available filters:
greyscalesepianegative
more coming soon!
- Add fvplayer
style.cssin the header. - Next to the HTML5 video add this scripts:
<script src="../dist/fvfilters.js"></script> <script src="../dist/fvplayer.js"></script> <script> new FVPlayer('video', FVPFilters.greyscale); </script>
First argument is the video ID.
Second argument is a filter function.
You can also use a custom filter. Simply define a function like the one below and pass it as second argument.
negative(data) {
const pixels = data.data;
for (let i = 0; i < pixels.length; i += 4) {
const r = pixels[i];
const g = pixels[i + 1];
const b = pixels[i + 2];
pixels[i] = 255 - r;
pixels[i + 1] = 255 - g;
pixels[i + 2] = 255 - b;
}N.B: You have to add font-awesome css in the page to use the icons <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A simple canvas video player with prebuilt filters</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<video id="video" controls poster="./poster.png">
<source src="./trailer.mp4" type='video/mp4'>
</video>
<script src="../dist/fvfilters.js"></script>
<script src="../dist/fvplayer.js"></script>
<script>
new FVPlayer('video', FVPFilters.greyscale);
</script>
</body>
</html>- Finish UI
- Handle resize
- Handle fullscreen
- Build style.css into the dist folder
- Write a better README and build a demo page
MIT