JavaScript を使用してビデオ視聴の進行状況を追跡する

最新の Web アプリケーションでは、セッション間で進行状況が保存されるシームレスなエクスペリエンスをユーザーに提供することが不可欠です。この最も一般的な使用例の 1 つは、ユーザーが視聴したビデオの量を追跡して、中断したところから再開できるようにすることです。このチュートリアルでは、JavaScript、localStorage、イベント リスナーを使用してこのようなシステムを実装する方法を説明し、同時にサーバー側の通信を統合して視聴時間を保存する方法も説明します。

**

コードの概要

**
提供されるソリューションを使用すると、Web ページ上の複数のビデオの視聴時間を追跡できます。監視の進行状況をブラウザの localStorage に保存し、ユーザーが最後の監視時間を超えた場合は、POST リクエストを使用してサーバー側のデータベース内の進行状況を更新します。目標は、最小限の労力ですべての動画に機能する、汎用的でスケーラブルな方法を提供することです。

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

**

コードの説明

1. 監視時間の更新機能** このソリューションの中核は、updateWatchedTime() 関数です。この関数は以下を担当します:

視聴の進行状況の計算: この関数はまずビデオの currentTime (秒単位) を取得し、これを分と秒に変換します。次に、時間は 10 進形式に変換されます (例: 3 分 30 秒は 3.50 になります)。

最終録画時刻の確認: localStorage.getItem() メソッドを使用して、ビデオの最終録画時刻を取得します。時間がまだ記録されていない場合 (つまり、ユーザーが初めてビデオを視聴したとき)、デフォルトは 0 になります。これにより、進行状況の追跡がゼロから開始されることが保証されます。

時間の保存: 現在の時間が最後に記録された時間より大きい場合は、ユーザーが最後の更新以降にさらに多くのビデオを視聴したことを意味します。この関数は、POST リクエストを使用して、更新された時刻をサーバーに送信します。データが正常に送信されると、localStorage が新しい時刻で更新されます。

2.複数のビデオの処理
スクリプトは、> を使用してページ上のすべてのビデオにイベント リスナーを追加します。

イベント リスナー: ビデオの時間が更新される (つまり、ユーザーがビデオを視聴する) たびに、timeupdate イベントがトリガーされます。このイベントはビデオの再生中に継続的に発生し、進行状況を追跡する機会を提供します。

querySelectorAll(): このメソッドはページ上のすべてのビデオ要素を選択し、スクリプトを任意の数のビデオに適応できるようにします。各ビデオをループし、timeupdate リスナーをアタッチして、視聴の進行状況が各ビデオごとに個別に追跡されるようにします。

**

仕組み: 段階的なフロー

**
ユーザーがビデオを視聴する: ユーザーがビデオを視聴すると、timeupdate イベントが継続的にトリガーされます。
視聴の進行状況の計算: スクリプトは、分と秒単位で視聴されたビデオの量を計算し、それを 10 進形式に変換します。
最終録画時間: スクリプトは、現在の総再生時間を localStorage に保存されている最後に録画された時間と比較します。
必要に応じて更新: 現在の監視時間が以前に保存された時間よりも大きい場合、新しい時間がサーバーに送信されます。その後、新しい時刻が localStorage に保存されます。
次回の訪問: 次回ユーザーがページにアクセスすると、スクリプトは localStorage で最後に保存された時刻を確認します。利用可能な場合は、ユーザーが中断したところから追跡を開始します。

**

利点と使用例

**
スケーラビリティ: このアプローチは、ページ上の任意の数のビデオに機能します。 data-idvideo 属性を使用して各ビデオを一意に識別し、システムを変更せずにスケーラブルにします。
永続性: localStorage を使用すると、ユーザーの進行状況がセッション間で保存されます。ページがリロードされたり、ユーザーが一度離れて戻ってきたりしても、進行状況は保持されます。
シームレスな統合: このソリューションは既存のビデオ プレーヤーとスムーズに統合され、HTML5

以上がJavaScript を使用してビデオ視聴の進行状況を追跡するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。