使用 JavaScript 追蹤影片觀看進度

在現代 Web 應用程式中，為使用者提供跨會話保存進度的無縫體驗至關重要。最常見的用例之一是追蹤用戶觀看了多少視頻，以便他們可以從上次停下的地方繼續播放。本教學將引導您了解如何使用 JavaScript、localStorage 和事件偵聽器來實現這樣的系統，同時也整合伺服器端通訊來儲存觀看時間。

**

準則概述

**
所提供的解決方案允許追蹤網頁上多個影片的觀看時間。它將觀看進度儲存在瀏覽器的 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() 函數。此函數負責：

計算觀看進度：此函數首先檢索影片的當前時間（以秒為單位）並將其轉換為分鐘和秒。然後時間將轉換為十進位格式（例如，3 分 30 秒變為 3.50）。

檢查上次錄製時間：使用 localStorage.getItem() 方法，我們擷取影片的上次錄製時間。如果尚未記錄時間（即用戶第一次觀看影片），則預設為 0。這確保進度追蹤從零開始。

儲存時間：如果當前時間大於上次記錄時間，則表示自上次更新以來用戶已經觀看了更多影片。此函數使用 POST 請求將更新的時間傳送到伺服器。資料傳送成功後，localStorage 會更新為新時間。

2。處理多部影片
腳本使用 > 為頁面上的所有影片新增事件偵聽器

事件監聽器：每次影片時間更新時（即，當使用者觀看影片時），都會觸發 timeupdate 事件。此事件在影片播放時持續觸發，提供了追蹤進度的機會。

querySelectorAll()：此方法選擇頁面上的所有影片元素，使腳本適用於任意數量的影片。它循環遍歷每個視頻，附加 timeupdate 偵聽器，確保獨立追蹤每個視頻的觀看進度。

**

這是如何運作的：逐步流程

**
使用者觀看影片：當使用者觀看影片時，timeupdate 事件不斷觸發。
計算觀看進度：腳本計算影片的觀看時間（以分鐘和秒為單位），然後將其轉換為十進位格式。
最後記錄時間：此腳本將目前觀看時間與 localStorage 中儲存的最後記錄時間進行比較。
必要時更新：如果目前觀看時間大於先前儲存的時間，則將新時間傳送到伺服器。之後，新時間將保存在 localStorage 中。
下次造訪：下次使用者造訪該頁面時，腳本會檢查 localStorage 的上次儲存時間。如果可用，它會從用戶離開的位置開始追蹤。

**

優點和用例

**
可擴展性：此方法適用於頁面上任意數量的影片。它使用 data-idvideo 屬性來唯一標識每個視頻，使系統無需修改即可擴展。
持久性：使用 localStorage，可以跨會話保存使用者的進度。即使頁面重新加載或用戶離開並返回，他們的進度也會保留。
無縫整合：此解決方案與現有影片播放器順利集成，可輕鬆在已使用 HTML5

以上是使用 JavaScript 追蹤影片觀看進度的詳細內容。更多資訊請關注PHP中文網其他相關文章！