Videojs-watch-percentage NPM

videojs-watch-percentage

A simple npm package to track the percentage of a video watched using Video.js.

Installation

You can install videojs-watch-percentage via npm or yarn:

npm install videojs-watch-percentage

yarn add videojs-watch-percentage

Usage

const videoTracker = require('videojs-watch-percentage');

const videoElement = document.getElementById('my-video');
videoTracker(videoElement);

videoElement.addEventListener('videoended', event => {
    console.log('Total Watched:', event.detail.totalWatched);
    console.log('Skipped Sections:', event.detail.skippedSections);
});

Usage React

const videoRef = useRef(null);

useEffect(() => {
    const videoElement = videoRef.current;
    videoTracker(videoElement);
    return () => {
        videoElement.removeEventListener('videoended', onVideoEnded);
    };
}, []); 

const onVideoEnded = event => {
    console.log('Total Watched:', event.detail.totalWatched);
    console.log('Skipped Sections:', event.detail.skippedSections);
};

Usage Vue

mounted() {
    const videoElement = this.$refs.videoPlayer;
    videoTracker(videoElement);
    videoElement.addEventListener('videoended', this.onVideoEnded);
},
beforeDestroy() {
    const videoElement = this.$refs.videoPlayer;
    videoElement.removeEventListener('videoended', this.onVideoEnded);
},
methods: {
    onVideoEnded(event) {
        console.log('Total Watched:', event.detail.totalWatched);
        console.log('Skipped Sections:', event.detail.skippedSections);
    }
}