Menjejaki Kemajuan Tontonan Video dengan JavaScript

Dalam aplikasi web moden, adalah penting untuk memberikan pengguna pengalaman yang lancar di mana kemajuan mereka disimpan merentas sesi. Salah satu kes penggunaan yang paling biasa untuk ini ialah menjejaki berapa banyak video yang telah ditonton oleh pengguna, supaya mereka boleh menyambung dari tempat mereka berhenti. Tutorial ini akan membimbing anda melalui cara melaksanakan sistem sedemikian menggunakan JavaScript, localStorage dan pendengar acara, sambil turut menyepadukan komunikasi sisi pelayan untuk menyimpan masa tontonan.

**

Gambaran Keseluruhan Kod

**
Penyelesaian yang disediakan membolehkan untuk menjejaki masa tonton berbilang video pada halaman web. Ia menyimpan kemajuan jam tangan dalam localStorage penyemak imbas dan, jika pengguna melebihi masa tontonan terakhir, mengemas kini kemajuan dalam pangkalan data sebelah pelayan menggunakan permintaan POST. Matlamatnya adalah untuk menawarkan kaedah generik, berskala yang berfungsi untuk semua video dengan usaha yang minimum.

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

**

Penjelasan Kod

1. Kemas kini Fungsi Masa Tontonan** Teras penyelesaian ini ialah fungsi updateWatchedTime(). Fungsi ini bertanggungjawab untuk:

Mengira Kemajuan Tontonan: Fungsi ini mula-mula mendapatkan semula Masa semasa video (dalam saat) dan menukarnya kepada minit dan saat. Masa kemudiannya ditukar kepada format perpuluhan (cth., 3 minit 30 saat menjadi 3.50).

Menyemak Masa Terakhir Dirakam: Menggunakan kaedah localStorage.getItem(), kami mendapatkan semula masa rakaman terakhir untuk video. Jika tiada masa telah direkodkan lagi (iaitu, kali pertama pengguna menonton video), ia lalai kepada 0. Ini memastikan penjejakan kemajuan bermula dari sifar.

Menyimpan Masa: Jika masa semasa lebih besar daripada masa rakaman terakhir, ini bermakna pengguna telah menonton lebih banyak video sejak kemas kini terakhir. Fungsi menghantar masa yang dikemas kini ke pelayan menggunakan permintaan POST. Selepas data berjaya dihantar, localStorage dikemas kini dengan masa baharu.

2. Mengendalikan Berbilang Video
Skrip menambah pendengar acara kepada semua video pada halaman dengan>

Pendengar Acara: Setiap kali masa video dikemas kini (iaitu, semasa pengguna menonton video), acara kemas kini masa dicetuskan. Acara ini berlangsung secara berterusan semasa video dimainkan, memberikan peluang untuk menjejaki kemajuan.

querySelectorAll(): Kaedah ini memilih semua elemen video pada halaman, menjadikan skrip boleh disesuaikan untuk sebarang bilangan video. Ia berputar melalui setiap video, melampirkan pendengar kemas kini masa, memastikan bahawa kemajuan tontonan dijejaki untuk setiap video secara bebas.

**

Cara Ini Berfungsi: Aliran Langkah demi Langkah

**
Pengguna Menonton Video: Semasa pengguna menonton video, acara kemas kini masa terus dicetuskan.
Kemajuan Tonton Dikira: Skrip mengira jumlah video yang telah ditonton dalam beberapa minit dan saat, kemudian menukarnya kepada format perpuluhan.
Masa Rakam Terakhir: Skrip membandingkan masa tontonan semasa dengan masa rakaman terakhir yang disimpan dalam localStorage.
Kemas kini jika Perlu: Jika masa menonton semasa lebih besar daripada masa yang disimpan sebelum ini, masa baharu dihantar ke pelayan. Selepas itu, masa baharu disimpan dalam localStorage.
Lawatan Seterusnya: Pada kali seterusnya pengguna melawat halaman, skrip menyemak localStorage untuk masa yang terakhir disimpan. Jika tersedia, ia mula menjejak dari tempat pengguna berhenti.

**

Faedah dan Kes Penggunaan

**
Kebolehskalaan: Pendekatan ini berfungsi untuk sebarang bilangan video pada halaman. Ia menggunakan atribut data-idvideo untuk mengenal pasti secara unik setiap video, menjadikan sistem berskala tanpa pengubahsuaian.
Kegigihan: Menggunakan localStorage, kemajuan pengguna disimpan merentas sesi. Walaupun halaman dimuat semula atau jika pengguna meninggalkan dan kembali, kemajuan mereka dikekalkan.
Penyepaduan Lancar: Penyelesaian ini disepadukan dengan lancar dengan pemain video sedia ada, menjadikannya mudah untuk dilaksanakan pada tapak web yang sudah menggunakan tag HTML5

Atas ialah kandungan terperinci Menjejaki Kemajuan Tontonan Video dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!