Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/**
resources referred when writing this script:
- https://gitlab.com/MPuschi/lotr-skip/-/blob/main/skip.js
- https://codepen.io/wellingguzman/pen/XqYqmG
- https://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag
*/
// Create Video and Canvas-Element
var canvas = document.createElement("canvas");
document.querySelector("body").appendChild(canvas);
var video = document.querySelector('video:first-child');
var videoWidth = video.offsetWidth;
var videoHeight = video.offsetHeight;
canvas.width = videoWidth;
canvas.height = videoHeight;
const mp = document.querySelector('#movie_player')
const v = mp.querySelector('.html5-main-video');
const canvas2 = document.createElement("canvas");
canvas2.width = videoWidth;
canvas2.height = videoHeight;
const ctx2 = canvas2.getContext('2d');
v.parentElement.insertBefore(canvas2, v);
function invertColors(data) {
for (var i = 0; i < data.length; i+= 4) {
data[i] = data[i] ^ 255; // Invert Red
data[i+1] = data[i+1] ^ 255; // Invert Green
data[i+2] = data[i+2] ^ 255; // Invert Blue
}
}
// Draw Video in Canvas
var canvasContext = canvas.getContext('2d');
function redrawImage(){
const vid = document.querySelector('video');
ctx2.drawImage(vid, 0, 0, videoWidth, videoHeight);
const frame = ctx2.getImageData(0, 0, videoWidth, videoHeight);
invertColors(frame.data);
vid.style.display = 'none';
// ctx2.drawImage(vid, 0, 0, videoWidth, videoHeight);
// ctx2.putImageData(frame, 0, 0, videoWidth, videoHeight);
ctx2.putImageData(frame, 0, 0);
}
const interval = setInterval(redrawImage, 41);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment