Verfolgen Sie den Fortschritt der Videowiedergabe mit JavaScript

In modernen Webanwendungen ist es wichtig, Benutzern ein nahtloses Erlebnis zu bieten, bei dem ihr Fortschritt sitzungsübergreifend gespeichert wird. Einer der häufigsten Anwendungsfälle hierfür besteht darin, zu verfolgen, wie viel von einem Video ein Benutzer angesehen hat, damit er dort weitermachen kann, wo er aufgehört hat. In diesem Tutorial erfahren Sie, wie Sie ein solches System mithilfe von JavaScript, localStorage und Ereignis-Listenern implementieren und gleichzeitig die serverseitige Kommunikation zum Speichern der beobachteten Zeit integrieren.

**

Übersicht über den Kodex

**
Die bereitgestellte Lösung ermöglicht die Verfolgung der Wiedergabezeit mehrerer Videos auf einer Webseite. Es speichert den Wiedergabefortschritt im localStorage des Browsers und aktualisiert den Fortschritt mithilfe einer POST-Anfrage in einer serverseitigen Datenbank, wenn ein Benutzer die letzte Wiedergabezeit überschreitet. Ziel ist es, eine generische, skalierbare Methode anzubieten, die mit minimalem Aufwand für alle Videos funktioniert.

<video>





<pre class="brush:php;toolbar:false"><video>



<p>: This element embeds a video player on the page.</p>

<p>The>
The data-idvideo="123" is a custom attribute that holds a unique identifier for each video. This ID allows us to track and store the watch progress for individual videos.<br>
<source src="path/to/video.mp4" type="video/mp4">: Specifies the path to the video file and the video format (in this case, MP4)<br>
</source></p>

<pre class="brush:php;toolbar:false">// Function to update the watched time
function updateWatchedTime(video, videoId) {
    var timeInSeconds = video.currentTime; // Time watched in seconds
    var minutes = Math.floor(timeInSeconds / 60); // Whole part (minutes)
    var seconds = timeInSeconds % 60; // Remaining seconds
    var decimalTime = minutes + (seconds / 60); // Converts seconds into a fractional minute

    // Get the last recorded time for the video (saved in localStorage or a global variable)
    var lastRecordedTime = localStorage.getItem("lastRecordedTime_" + videoId);
    if (lastRecordedTime === null) {
        lastRecordedTime = 0; // Default value if no previous time is found
    } else {
        lastRecordedTime = parseFloat(lastRecordedTime);
    }

    // Check if the current time is greater than the last recorded time
    if (decimalTime > lastRecordedTime) {
        // If the current time is greater, save the new time
        var requestData = "VIDEO_ID=" + videoId + "&WATCHED_TIME=" + decimalTime.toFixed(4);
        console.log("Sending: " + requestData); // Shows the watched time in decimal (4 decimal places)

        // Send the data to the server (replace with actual URL)
        $.post("path/to/api", requestData, function(response) {
            // Handle server response if needed
            console.log("Server response: " + response);
            // After saving, update the localStorage with the new watched time
            localStorage.setItem("lastRecordedTime_" + videoId, decimalTime.toFixed(4));
        });
    } else {
        console.log("Watched time is less than the last recorded time. No update sent.");
    }
}

// Add an event listener for the 'timeupdate' event to all video elements
document.querySelectorAll('.videoCourse').forEach(function(video) {
    // Get the video ID (should be uniquely assigned to each video element)
    var videoId = video.getAttribute('data-idvideo');
    // Add the 'timeupdate' event listener
    video.addEventListener('timeupdate', function(event) {
        updateWatchedTime(video, videoId); // Pass the video and its ID directly
    });
});

**

Erläuterung des Kodex

1. Funktion „Beobachtete Zeit“ aktualisieren** Der Kern dieser Lösung ist die Funktion updateWatchedTime(). Diese Funktion ist verantwortlich für:

Berechnung des Wiedergabefortschritts: Die Funktion ruft zunächst die aktuelle Zeit des Videos (in Sekunden) ab und rechnet diese in Minuten und Sekunden um. Die Zeit wird dann in ein Dezimalformat umgewandelt (z. B. 3 Minuten 30 Sekunden werden zu 3,50).

Überprüfen der letzten Aufnahmezeit: Mit der Methode localStorage.getItem() rufen wir die letzte Aufnahmezeit für das Video ab. Wenn noch keine Zeit aufgezeichnet wurde (z. B. wenn der Benutzer das Video zum ersten Mal ansieht), wird der Wert standardmäßig auf 0 gesetzt. Dadurch wird sichergestellt, dass die Fortschrittsverfolgung bei Null beginnt.

Speichern der Zeit: Wenn die aktuelle Zeit größer als die zuletzt aufgezeichnete Zeit ist, bedeutet dies, dass der Benutzer seit der letzten Aktualisierung mehr Videos angesehen hat. Die Funktion sendet die aktualisierte Uhrzeit mithilfe einer POST-Anfrage an den Server. Nachdem die Daten erfolgreich gesendet wurden, wird der localStorage mit der neuen Zeit aktualisiert.

2. Umgang mit mehreren Videos
Das Skript fügt allen Videos auf der Seite mit dem > einen Ereignis-Listener hinzu

Ereignis-Listener: Jedes Mal, wenn die Zeit des Videos aktualisiert wird (d. h. wenn der Benutzer das Video ansieht), wird das Ereignis „timeupdate“ ausgelöst. Dieses Ereignis wird kontinuierlich ausgelöst, während das Video abgespielt wird, und bietet so die Möglichkeit, den Fortschritt zu verfolgen.

querySelectorAll(): Diese Methode wählt alle Videoelemente auf der Seite aus, wodurch das Skript für eine beliebige Anzahl von Videos anpassbar ist. Es durchläuft jedes Video und fügt den Timeupdate-Listener hinzu, um sicherzustellen, dass der Wiedergabefortschritt für jedes Video unabhängig verfolgt wird.

**

So funktioniert das: Eine Schritt-für-Schritt-Anleitung

**
Der Benutzer sieht sich das Video an: Während der Benutzer das Video ansieht, wird das Zeitaktualisierungsereignis kontinuierlich ausgelöst.
Berechneter Wiedergabefortschritt: Das Skript berechnet, wie viel des Videos in Minuten und Sekunden angesehen wurde, und wandelt ihn dann in ein Dezimalformat um.
Letzte aufgezeichnete Zeit: Das Skript vergleicht die aktuelle Wiedergabezeit mit der letzten aufgezeichneten Zeit, die in localStorage gespeichert ist.
Bei Bedarf aktualisieren: Wenn die aktuelle Uhrzeit größer ist als die zuvor gespeicherte Zeit, wird die neue Zeit an den Server gesendet. Anschließend wird die neue Uhrzeit im localStorage gespeichert.
Nächster Besuch: Wenn der Benutzer die Seite das nächste Mal besucht, überprüft das Skript localStorage auf die zuletzt gespeicherte Zeit. Falls verfügbar, beginnt die Verfolgung dort, wo der Benutzer aufgehört hat.

**

Vorteile und Anwendungsfälle

**
Skalierbarkeit: Dieser Ansatz funktioniert für eine beliebige Anzahl von Videos auf einer Seite. Es verwendet das Attribut data-idvideo, um jedes Video eindeutig zu identifizieren, wodurch das System ohne Änderungen skalierbar wird.
Persistenz: Mithilfe von localStorage wird der Fortschritt des Benutzers sitzungsübergreifend gespeichert. Selbst wenn die Seite neu geladen wird oder der Benutzer die Seite verlässt und zurückkehrt, bleibt sein Fortschritt erhalten.
Nahtlose Integration: Die Lösung lässt sich reibungslos in vorhandene Videoplayer integrieren und erleichtert die Implementierung auf Websites, die bereits das HTML5-

Das obige ist der detaillierte Inhalt vonVerfolgen Sie den Fortschritt der Videowiedergabe mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!