JSFiddle - React, Tailwind, and code Playground

by Wolf Wortmann

HTML

<div name="ccc">wechsel zu video 1 (ccc)</div>
<div name="ddd">wechsel zu video 2 (ddd)</div>
<div name="eee">wechsel zu video 3 (eee)</div>
<video id="video" src="videos/aaa.mp4" controls width="100%" ></video>

CSS

a{display: block}

JavaScript

var thumbs;
var box;
window.onload=function(){
     thumbs = document.getElementsByTagName("div");
     box = document.getElementById("video");
     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){
    box.src = name+".mp4";
    box.load();
    for (var i = 0; i < thumbs.length; i++){
       standarttext = thumbs[i].innerHTML
       standarttext = standarttext.replace("pausiere","wechsel");
       thumbs[i].innerHTML = standarttext;
    }
    text = element.innerHTML;
    text = text.replace("wechsel","pausiere")
    element.innerHTML = text;
    playPause();
}