JSFiddle - React, Tailwind, and code Playground

by Wolf Wortmann

HTML

<div name="ccc">wechsel zu ccc.mp4</div>
<div name="ddd">wechsel zu ddd.mp4</div>
<div name="eee">wechsel zu eee.mp4</div>
<video id="video" width="100%" controls>
    <source id="mp" src="videos/ccc.mp4" type="video/mp4">
    <source id="og" src="videos/ccc.ogg" type="video/ogg">
</video>

JavaScript

var thumbs;
var boxmp;
var boxog;
var box;
window.onload=function(){
     thumbs = document.getElementsByTagName("div");
     box = document.getElementById("video");
     boxmp = document.getElementById("mp");
     boxog = document.getElementById("og");
     for (var i = 0; i < thumbs.length; i++){
        thumbs[i].setAttribute("data-i", i);
        thumbs[i].onclick = function(){
            zeigeVideo(
                // Das element übergeben
                thumbs[this.getAttribute("data-i")],
                //den wert übergeben, der im feld name des Elements steht
                thumbs[this.getAttribute("data-i")].getAttribute("name")
            );
        }
    }
}
function playPause(){ 
    if (box.paused){
        box.play(); 
    } 
    else{
        box.pause(); 
    }
}
function zeigeVideo(element, name){
    boxmp.src = "videos/"+name+".mp4";
    boxog.src = "videos/"+name+".ogg";
    box.load();
    for (var i = 0; i < thumbs.length; i++){
       thtext = thumbs[i].innerHTML;
       thtext = thtext.replace("pausiere","wechsel");
       thumbs[i].innerHTML = thtext;
    }
    text = element.innerHTML;
    text = text.replace("wechsel","pausiere")
    element.innerHTML = text;
    playPause();
}