Learn Video Fastforward

learn-video-slider

javascript:(function()%7Blet%20container%20%3D%20document.createElement(%22div%22)%3Bcontainer.id%20%3D%20%22--slider-container%22%3Blet%20labelElement%20%3D%20document.createElement(%22label%22)%3BlabelElement.id%20%3D%20%22--slider-label%22%3BlabelElement.style.width%20%3D%20%22100px%22%3Blet%20inputElement%20%3D%20document.createElement('input')%3BinputElement.id%20%3D%20%22--slider-input%22%3BinputElement.type%20%3D%20%22range%22%3BinputElement.min%20%3D%200.5%3BinputElement.max%20%3D%203%3BinputElement.step%20%3D%200.25%3BinputElement.value%20%3D%201%3BinputElement.oninput%20%3D%20()%20%3D%3E%20%7BlabelElement.textContent%20%3D%20inputElement.value%3Bconst%20videoElement%20%3D%20document.getElementsByTagName('video')%5B0%5D%3Bif%20(videoElement%20!%3D%20null)%20%7BvideoElement.playbackRate%20%3D%20inputElement.value%3B%7D%20else%20%7Bconst%20root%20%3D%20document.getElementsByTagName(%22d2l-labs-media-player%22)%5B0%5D.shadowRoot%3Broot.getElementById(%22d2l-labs-media-player-video%22).playbackRate%20%3D%20inputElement.value%3B%7D%7D%3Bcontainer.style.position%20%3D%20%22fixed%22%3Bcontainer.style.top%20%3D%200%3Bcontainer.style.width%20%3D%20%22100%25%22%3Bcontainer.style.zIndex%20%3D%20999%3Bcontainer.style.background%20%3D%20%22white%22%3Bcontainer.style.border%20%3D%20%225px%20solid%20black%22%3Bcontainer.style.display%20%3D%20%22flex%22%3Bcontainer.style.justifyContent%20%3D%20%22center%22%3BlabelElement.textContent%20%3D%20inputElement.value%3BlabelElement.for%20%3D%20inputElement.id%3Blet%20containerNode%20%3D%20document.getElementById(container.id)%3Bif%20(containerNode)%20%7Bdocument.body.removeChild(containerNode)%3B%7Dcontainer.appendChild(inputElement)%3Bcontainer.appendChild(labelElement)%3Bdocument.body.appendChild(container)%7D)()

learn.js

let container = document.createElement("div");
container.id = "--slider-container";

let labelElement = document.createElement("label");
labelElement.id = "--slider-label";
labelElement.style.width = "100px";

let inputElement = document.createElement('input');
inputElement.id = "--slider-input";
inputElement.type = "range";
inputElement.min = 0.5;
inputElement.max = 3;
inputElement.step = 0.25;
inputElement.value = 1;
inputElement.oninput = () => {
    labelElement.textContent = inputElement.value;
    const videoElement = document.getElementsByTagName('video')[0];
    if (videoElement != null) {
        videoElement.playbackRate = inputElement.value;
    } else {
        const root = document.getElementsByTagName("d2l-labs-media-player")[0].shadowRoot;
        root.getElementById("d2l-labs-media-player-video").playbackRate = inputElement.value;
    }
};

container.style.position = "fixed";
container.style.top = 0;
container.style.width = "100%";
container.style.zIndex = 999;
container.style.background = "white";
container.style.border = "5px solid black";
container.style.display = "flex";
container.style.justifyContent = "center";

labelElement.textContent = inputElement.value;
labelElement.for = inputElement.id;

let containerNode = document.getElementById(container.id);
if (containerNode) {
  document.body.removeChild(containerNode);
}

container.appendChild(inputElement);
container.appendChild(labelElement);
document.body.appendChild(container);