CODEWITHSUNDEEP
javascriptplyr.js
easypronunciation
easypronunciation

Reputation: 81

Detect that the video is playing in javascript plugin plyr

I am using plyr javascript plugin from here - https://github.com/sampotts/plyr and I need to detect that the user is watching the video. Eventually I will add code for gathering statistics using AJAX. However the code below doesn't work.

const player = new Plyr('#video1', {
    controls: ['play-large', 'play', 'progress', 'current-time', 'captions', 'fullscreen', 'settings']
});

jQuery(function ($) {
    if (player.playing) {
        alert ("playing!!");
    }
});

Upvotes: 3

Views: 1614

Answers (1)

oquzhrm
oquzhrm

Reputation: 11

    var plyrView = false; // Has he watched it before?
    var videoId = 123456;
    var counter = 0;
    document.addEventListener('DOMContentLoaded', () => {
        const player = new Plyr('#player');
        window.player = player;
        $('.plyr').click(function() {
            if (plyrView == false) {
                setTimeout(function() {
                    var divPlaying = $('div').hasClass('plyr--playing');
                    if (player.playing == true && divPlaying == true && plyrView == false) {
                        $.ajax({
                            type: 'post',
                            url: 'ajax.php',
                            data: { 'videoId': videoId },
                            success: function(viewVideo) {
                                if (viewVideo == 'success') {
                                    plyrView = true;
                                    counter++;
                                } else {
                                    // Error Code
                                }
                            }
                        });
                    }
                }, 3000);
            }
        });
    });

Upvotes: 1

Related Questions