HTML Video Element Useful Snippets

_readme.md

Below snippets can be used in console or bookmark to perform the desired actions.

CopyFrametoClipboard.js

javascript: {
    let video = document.getElementsByTagName("video")[0];
    let canvas = document.createElement("canvas");
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
    canvas.style.position = "fixed";
    canvas.style.left = "0";
    canvas.style.top = "0";
    canvas.style.zIndex = "99999";
    document.body.appendChild(canvas);
    canvas.toBlob((blob) => {
        navigator.clipboard.write([
            new ClipboardItem({ "image/png": blob })
        ]).then(function() {
            document.body.removeChild(canvas); 
            alert("Done!");           
        }, function (){
            alert("Error!");
        });
    }, "image/png");
}

// Capture the Current Frame of the Video and copy to Clipboard

PictureInPicture.js

javascript: {
    let video = document.getElementsByTagName("video")[0];    
    video.removeAttribute("disablepictureinpicture");
    video.requestPictureInPicture();
}

// Open Video in Picture in Picture