Zugriff auf VideoJS Gespielt TimeRanges

Question

Ich baue eine Web-App mit ReactJS, die es Mitarbeitern ermöglicht, verschiedene Video-Trainingseinheiten anzusehen und dann Quizfragen zu beantworten. Ich möchte HTML5-Videoelemente verwenden, um die Kompatibilität zwischen Geräten zu maximieren, aber Benutzer können immer nur durch das Video scrubben, um das Ende zu erreichen und den nächsten Vorgang in der App auszulösen. Sie müssen das gesamte Video anschauen, bevor Sie fortfahren.

Ich brauche eine Möglichkeit zu sagen, ob das ganze Video abgespielt wurde, bevor der Benutzer weitergehen kann. Ich schaute auf die Video JS Advanced Examples Seite, und ich fand genau, was ich suchte. Sie haben ein "abgespieltes" Datenfeld, das anzeigt, mit welchen Zeitbereichen der Benutzer gespielt hat. Das Problem ist, dass ich keine Ahnung habe, wie ich dieses Feature in meiner App implementieren kann. Ich kann VideoJS integrieren und in Ordnung bringen, aber ich weiß nicht, wie ich auf die "abgespielte" Eigenschaft des Videoplayers zugreifen kann.

Wenn jemand mir eine Richtung geben könnte, würde ich es wirklich schätzen. Wenn das eine dumme Frage ist, tut es mir wirklich leid. Ich bin immer noch ziemlich neu in all dem. Ich danke dir sehr.

Cheers,

Jaydon

Answer 1

played kommt die html5 media spec bilden. Es gibt eine TimeRanges object zurück. Video.js bietet die meisten Funktionen des nativen Videoelements über Methoden. So wird die played Eigenschaft auf dem Videoelement (wie vidEl.played) ein Methodenaufruf auf dem player Objekt von Video.js (als player.played()).

Die API zu Zeitbereichen ist ein bisschen komisch. Aber im Wesentlichen hat es drei Eigenschaften: length, start und end. Das ist, was sie tun: * length: wie viele Bereiche gibt es? Wie viele verschiedene Abschnitte des Videos wurden im Fall von played wiedergegeben? * start(): eine Methode, die die Startzeit eines bestimmten Bereichs * end() erzählt: eine Methode, die Sie die Endzeit eines bestimmten Bereichs erzählt

Es ist wahrscheinlich, dass Sie nur einen Bereich haben, aber es ist möglich, dass Sie werde mehr haben. Daher sollten Sie die Länge der Bereiche überlappen. Um genau zu wissen, wie viel der Benutzer gespielt hat, wollen Sie im Grunde jeden Bereich durchlaufen und seine Dauer berechnen (end(i) - start(i) und vergleichen Sie dann mit der Dauer des Videos (player.duration()). Wenn sie in der Nähe sind, bedeutet dies, dass der Benutzer hat das ganze Video angeschaut.