Suivi de la progression du visionnage vidéo avec JavaScript

Dans les applications Web modernes, il est essentiel de fournir aux utilisateurs une expérience transparente où leur progression est enregistrée au fil des sessions. L’un des cas d’utilisation les plus courants consiste à suivre la quantité de vidéo qu’un utilisateur a regardée, afin qu’il puisse reprendre là où il s’est arrêté. Ce didacticiel vous expliquera comment implémenter un tel système à l'aide de JavaScript, de localStorage et d'écouteurs d'événements, tout en intégrant également la communication côté serveur pour stocker l'heure regardée.

**

Aperçu du Code

**
La solution fournie permet de suivre la durée de visionnage de plusieurs vidéos sur une page Web. Il stocke la progression de la surveillance dans le localStorage du navigateur et, si un utilisateur dépasse la dernière durée de surveillance, met à jour la progression dans une base de données côté serveur à l'aide d'une requête POST. L'objectif est de proposer une méthode générique et évolutive qui fonctionne pour toutes les vidéos avec un minimum d'effort.

<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
    });
});

**

Explication du Code

1. Mettre à jour la fonction de l'heure regardée** Le cœur de cette solution est la fonction updateWatchedTime(). Cette fonction est chargée de :

Calcul de la progression de la surveillance : la fonction récupère d'abord l'heure actuelle de la vidéo (en secondes) et la convertit en minutes et secondes. L'heure est ensuite convertie au format décimal (par exemple, 3 minutes 30 secondes devient 3,50).

Vérification de la dernière heure d'enregistrement : à l'aide de la méthode localStorage.getItem(), nous récupérons la dernière heure d'enregistrement pour la vidéo. Si aucune heure n'a encore été enregistrée (c'est-à-dire la première fois que l'utilisateur regarde la vidéo), la valeur par défaut est 0. Cela garantit que le suivi de la progression commence à zéro.

Stockage de l'heure : si l'heure actuelle est supérieure à la dernière heure enregistrée, cela signifie que l'utilisateur a regardé davantage de vidéo depuis la dernière mise à jour. La fonction envoie l'heure mise à jour au serveur à l'aide d'une requête POST. Une fois les données envoyées avec succès, le localStorage est mis à jour avec la nouvelle heure.

2. Gestion de plusieurs vidéos
Le script ajoute un écouteur d'événement à toutes les vidéos de la page avec le>

Écouteur d'événement : chaque fois que l'heure de la vidéo est mise à jour (c'est-à-dire lorsque l'utilisateur regarde la vidéo), l'événement timeupdate est déclenché. Cet événement se déclenche en continu pendant la lecture de la vidéo, offrant ainsi la possibilité de suivre la progression.

querySelectorAll() : Cette méthode sélectionne tous les éléments vidéo de la page, rendant le script adaptable à n'importe quel nombre de vidéos. Il parcourt chaque vidéo, attachant l'auditeur timeupdate, garantissant que la progression de la visualisation est suivie indépendamment pour chaque vidéo.

**

Comment cela fonctionne : un flux étape par étape

**
L'utilisateur regarde la vidéo : lorsque l'utilisateur regarde la vidéo, l'événement timeupdate se déclenche en continu.
Progression de la visualisation calculée : le script calcule la quantité de vidéo visionnée en minutes et secondes, puis la convertit au format décimal.
Dernière heure enregistrée : le script compare l'heure actuelle de visionnage à la dernière heure enregistrée enregistrée dans localStorage.
Mettre à jour si nécessaire : si l'heure actuelle de visionnage est supérieure à l'heure précédemment enregistrée, la nouvelle heure est envoyée au serveur. Ensuite, la nouvelle heure est enregistrée dans localStorage.
Prochaine visite : la prochaine fois que l'utilisateur visitera la page, le script vérifie localStorage pour la dernière heure enregistrée. S'il est disponible, il commence le suivi là où l'utilisateur s'est arrêté.

**

Avantages et cas d'utilisation

**
Évolutivité : cette approche fonctionne pour n'importe quel nombre de vidéos sur une page. Il utilise l'attribut data-idvideo pour identifier de manière unique chaque vidéo, rendant le système évolutif sans modification.
Persistance : grâce à localStorage, la progression de l'utilisateur est enregistrée au fil des sessions. Même si la page est rechargée ou si l'utilisateur quitte et revient, sa progression est conservée.
Intégration transparente : la solution s'intègre facilement aux lecteurs vidéo existants, ce qui facilite sa mise en œuvre sur les sites Web qui utilisent déjà la balise HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!