JavaScript로 비디오 시청 진행 상황 추적

최신 웹 애플리케이션에서는 세션 전체에 걸쳐 진행 상황이 저장되는 원활한 경험을 사용자에게 제공하는 것이 필수적입니다. 이를 위한 가장 일반적인 사용 사례 중 하나는 사용자가 시청한 동영상의 양을 추적하여 시청을 중단한 부분부터 다시 시작할 수 있도록 하는 것입니다. 이 튜토리얼에서는 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입니다. 이렇게 하면 진행 상황 추적이 0부터 시작됩니다.

시간 저장: 현재 시간이 마지막 녹화 시간보다 크다면 사용자가 마지막 업데이트 이후로 동영상을 더 많이 시청했다는 의미입니다. 이 함수는 POST 요청을 사용하여 업데이트된 시간을 서버로 보냅니다. 데이터가 성공적으로 전송되면 localStorage가 새로운 시간으로 업데이트됩니다.

2. 여러 동영상 처리
스크립트는>를 사용하여 페이지의 모든 비디오에 이벤트 리스너를 추가합니다.

이벤트 리스너: 동영상의 시간이 업데이트될 때마다(예: 사용자가 동영상을 시청할 때) timeupdate 이벤트가 트리거됩니다. 이 이벤트는 비디오가 재생되는 동안 지속적으로 실행되어 진행 상황을 추적할 수 있는 기회를 제공합니다.

querySelectorAll(): 이 메소드는 페이지의 모든 동영상 요소를 선택하여 스크립트를 원하는 수의 동영상에 적용할 수 있도록 합니다. 각 동영상을 반복하면서 timeupdate 리스너를 연결하여 시청 진행 상황이 각 동영상에 대해 독립적으로 추적되도록 합니다.

**

작동 방식: 단계별 흐름

**
사용자가 동영상을 시청하는 경우: 사용자가 동영상을 시청하는 동안 timeupdate 이벤트가 지속적으로 발생합니다.
시청 진행 상황 계산: 스크립트는 동영상의 시청 시간을 분과 초 단위로 계산한 다음 이를 십진수 형식으로 변환합니다.
마지막 녹화 시간: 스크립트는 현재 시청 시간을 localStorage에 저장된 마지막 녹화 시간과 비교합니다.
필요한 경우 업데이트: 현재 시청 시간이 이전에 저장된 시간보다 크면 새 시간이 서버로 전송됩니다. 이후에는 localStorage에 새로운 시간이 저장됩니다.
다음 방문: 다음에 사용자가 페이지를 방문하면 스크립트는 localStorage에서 마지막으로 저장된 시간을 확인합니다. 가능한 경우 사용자가 중단한 지점부터 추적을 시작합니다.

**

이점 및 사용 사례

**
확장성: 이 접근 방식은 페이지에 있는 동영상 수에 관계없이 작동합니다. data-idvideo 속성을 사용하여 각 비디오를 고유하게 식별하므로 수정 없이 시스템을 확장할 수 있습니다.
지속성: localStorage를 사용하면 사용자의 진행 상황이 여러 세션에 걸쳐 저장됩니다. 페이지를 다시 로드하거나 사용자가 나갔다가 돌아오더라도 진행 상황은 유지됩니다.
원활한 통합: 이 솔루션은 기존 비디오 플레이어와 원활하게 통합되므로 이미 HTML5

위 내용은 JavaScript로 비디오 시청 진행 상황 추적의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!