Events beim Abspielen von Videos gekoppelt an Laufzeit

rernanded

Erfahrenes Mitglied
Ich suche nach einer Idee wie ich bei einem Video zur richtigen Zeit versch. Untertitel einblenden kann. Also immer wenn eine bestimmte Filmstelle kommt soll ein Untertitel eingeblendet werden. Dieser auch nur eine gewisse Zeitspanne.
Ich hab es mit currentTime vergeblich versucht. Bin kein js-Profi.

HTML:
<!DOCTYPE html>
<html>
<body>
<video id="myFilm" src="123.mp4">
Your browser does not support the video element.
</video>
<p>Playback position: <span id="demo"></span></p>
<script>
var vid = document.getElementById("myFilm");
    
vid.ontimeupdate = function() {myFunction()};

function myFunction() {
document.getElementById("demo").innerHTML = vid.currentTime;
}

var myF = document.getElementById("myFilm");
if (myF.currentTime = 30) {
... ??? ...
}
</script>
</body>
</html>

MONI
 
Mit timeupdate bist Du schon auf dem richtigen Wege und die Anzeige der Zeit müsste eigentlich mit deinem Code funktionieren. Um einen Untertitel einzublenden brauchst Du dann nur noch die Zeit abzufragen:
Code:
<video id="myFilm" src="123.mp4">
Your browser does not support the video element.
</video>
<p>Playback position: <span id="demo"></span></p>
<script>
var startTime = 20;
var endTime = 50;
var vid = document.getElementById("myFilm");
vid.ontimeupdate = myFunction;

function myFunction() {
    document.getElementById("demo").innerHTML = vid.currentTime;
    if (vid.currentTime >= startTime && vid.currentTime <= endTime) {
        // Untertitel sichtbar machen
    } else {
        // Untertitel unsichtbar machen
    }
}
</script>
(ungetestet)
Die Untertitel müsstest Du dann als Overlay über das Video legen.

HTML5-Video unterstützt aber auch die Anzeige von Untertiteln mit dem track-Element:
https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/video#Untertitelhttps://developer.mozilla.org/en-US/docs/Web/API/WebVTT_APIDürfte kein Problem sein, solch eine vtt-Datei zu schreiben.
Einschränkung: Firefox unterstützt wohl die Gestaltung der Untertitel mit dem ::cue-Pseudoelement noch nicht:
https://caniuse.com/#feat=webvtt
 
Zurück