Publitio has taken its powerful video player to the next level with the addition of JavaScript event support. This exciting update empowers developers to create dynamic, interactive experiences by listening to key player events such as publitio_video_ended, publitio_video_played or dynamically control the player using publitio_video_pause, and publitio_video_play events. Here’s a closer look at how these events work and what you can achieve with them.



Why JavaScript Events Matter


Modern web development is all about interactivity and personalization. With JavaScript event hooks, you can:

  • Track user behavior: Understand how users interact with your video content.

  • Trigger custom actions: Sync animations, update analytics, or display contextual information based on playback actions.

  • Enhance accessibility: Offer tailored experiences for different audience needs. 


Publitio’s integration of JavaScript events gives developers the control and flexibility needed to build engaging applications with video at the center.


Supported Events and Their Use Cases


publitio_video_played


  • Description: Triggered when a video starts playing.

  • Use Case: Start tracking video engagement or initiate animations tied to video playback.

  • Example Code:


window.addEventListener('message', (event) => {            
    if (event.data.event_id === 'publitio_video_played') {                 
        console.log(`Video played ${event.data.id}`);                
    }        
});



publitio_video_ended


  • Description: Fires when the video reaches the end.

  • Use Case: Direct users to related content, display an end-screen, modal, or track completion rates.

  • Example Code:


window.addEventListener('message', (event) => {            
    if (event.data.event_id === 'publitio_video_ended') {                 
        console.log(`Video ended ${event.data.id}`);                
    }        
});



publitio_video_play


  • Description: Commands the targeted player to play the video.

  • Use Case: Control playing the video with an outside button or custom events that will lead to video being played.

  • Example Code:


document.querySelector("iframe[id='pv_{file_code}']").contentWindow.postMessage({"event_id": "publitio_video_play"}, '*');



publitio_video_pause


  • Description: Commands the targeted player to pause the video.

  • Use Case: Control pausing the video with an outside button or custom events that will lead to video being paused.

  • Example Code:


document.querySelector("iframe[id='pv_{file_code}']").contentWindow.postMessage({"event_id": "publitio_video_pause"}, '*');



How to Use Publitio’s Player with JavaScript Events 


To start using these events, you need to:

  • Embed the Publitio video player in your application.

  • Add event listeners in your JavaScript code to listen for and handle these events.



Here are some example setups:

After embedding multiple of videos on your page insert these JavaScript snippets just before closing the </body> tag.

Playing a video pauses the others:

    
<script>
    window.addEventListener('message', (e) => {if(e.data.event_id == 'publitio_video_played') document.querySelectorAll("iframe[id^='pv_']").forEach(i => {if(i.contentWindow && (i.contentWindow !== e.source)) i.contentWindow.postMessage({"event_id": "publitio_video_pause"}, '*');});});
</script>


Result:


Playing and pausing via external buttons:

Add two buttons anywhere on the page with onclick attribute play() and pause().


<script>
    function play() {
        document.querySelector("iframe[id^='pv_']").contentWindow.postMessage({"event_id": "publitio_video_play"}, '*');
    }
    function pause() {
        document.querySelector("iframe[id^='pv_']").contentWindow.postMessage({"event_id": "publitio_video_pause"}, '*');
    }
</script>


Result:



Playing videos one after the other:


<script>
    window.addEventListener('message', (event) => {
        if (event.data.event_id === 'publitio_video_ended') { 
            const players = document.querySelectorAll("iframe[id^='pv_']");
            players.forEach((player, index) => {
                if(player.id == event.data.id) {
                    if(typeof players[index + 1] !== 'undefined') {
                        players[index + 1].contentWindow.postMessage({"event_id": "publitio_video_play"}, '*');
                    }
                }
            });
        }
    });
</script>


Result:



Showing a modal after a video ends:


<script>
    window.addEventListener('message', (event) => {
        if (event.data.event_id === 'publitio_video_ended') { 
            document.querySelector('#modal').style.display = 'flex';
        }
    });
</script>


Result:



Enhancing User Experience with JavaScript Events

Publitio's event system opens up endless possibilities. For instance:

  • Gamification: Reward users for completing videos. 
  • Analytics: Send event data to tools like Google Analytics or Mixpanel. 
  • Interactive Storytelling: Sync graphics or subtitles with video actions.



Conclusion

Publitio’s support for JavaScript events is a game-changer for developers who want to deliver dynamic and responsive video experiences. By leveraging events like publitio_video_ended and publitio_video_played, you can create seamless interactions that captivate your audience and add value to your application.

Whether you're tracking engagement or delivering custom interactivity, Publitio’s new features ensure your video player isn’t just a passive tool—it’s a central component of your user experience. 


Ready to elevate your project? Start using Publitio’s enhanced player today!

Let us know below how are you using Publitio player events or what kind of events would you like to see added to the list.