JSFiddle - React, Tailwind, and code Playground

HTML

<video id="mavideo" controls>
	<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
	<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
	<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
    
    <p class="alert">
        Votre navigateur ne supporte pas la balise vidéo ! Mettez-vous à jour !
    </p>
</video>
<div id="controles" hidden>
</div>

JavaScript

function lecture() {
    // Lit la video
}

function pause() {
    // Met la video en pause
}

function stop() {
    // Arrete la video
}

function avancer(duree) {
    // Avance de 'duree' secondes
}

function reculer(duree) {
    // Recule de 'duree' secondes
}

var lecteur;

function creerBoutons() {
    // Créé les boutons de gestion du lecteur
    var btnLecture = document.createElement("button");
    var btnPause = document.createElement("button");
    var btnStop = document.createElement("button");
    var btnReculer = document.createElement("button");
    var btnAvancer = document.createElement("button");
    
    var controlesBox = document.getElementById("controles");
    lecteur = document.getElementById("mavideo");
    
    // Ajoute un peu de textes
    btnLecture.textContent = "Lecture";
    btnPause.textContent = "Pause";
    btnStop.textContent = "Stop";
    btnReculer.textContent = "- 10s";
    btnAvancer.textContent = "+ 10s";
    
    // On ajoute les boutons à l'interface
    controlesBox.appendChild(btnLecture);
    controlesBox.appendChild(btnPause);
    controlesBox.appendChild(btnStop);
    controlesBox.appendChild(btnReculer);
    controlesBox.appendChild(btnAvancer);
    
    // On lie les fonctions aux boutons
    btnLecture.addEventListener("click", lecture, false);
    btnPause.addEventListener("click", pause, false);
    btnStop.addEventListener("click", stop, false);
    btnReculer.addEventListener("click", function(){reculer(10)}, false);
    btnAvancer.addEventListener("click", function(){avancer(10)}, false);
    
    // On affiche les nouveaux boutons et supprime l'interface original
    controlesBox.removeAttribute("hidden");
    lecteur.removeAttribute("controls");
}

// Créé les boutons lorsque le DOM est chargé
document.addEventListener('DOMContentLoaded', creerBoutons, false);