JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rahmen">
    <video id="video" src="http://www.w3schools.com/html/mov_bbb.mp4" controls></video>
    <div id="steuerung">
        <div id="zeitleiste">
            <div id="balken"></div>
        </div>
    </div>
</div>

CSS

body {
    margin:0px;
}
#rahmen {
    float:right;
}
#video {
    width:960px;
    height:528px;
    background:#ccc;
    display:block;
}
#steuerung {
    height:50px;
    background:#333;
    position:relative;
}
#zeitleiste {
    position:absolute;
    top:15px;
    bottom:15px;
    left:50px;
    right:150px;
    background:#666;
}
#balken {
    height:100%;
    width:0%;
    background:#ccc;
}

JavaScript

v = document.getElementById("video");
b = document.getElementById("balken");
z = document.getElementById("zeitleiste");
z.addEventListener("click", test, false);

//Was mus ich ändern dass das hier auch funtioniert ?
v.currentTime("change", test, false);

function test() {
    b.style.width = v.currentTime / (v.duration / 100) + "%";
}