How to customize Jwplayer with Javascript functions

Asked

Viewed 21 times

-2

Could anyone tell me how I can supplement my Jwplyer code to perform the following updates.

Add a function that saves the running time of the video in a cookie file using Javascript valid for 2 days. Together with the requested function, add together a message that is activated in the player asking if the user wants to return the video at the point where it stopped, only if the cookie file exists.

<div id='jplay'style='width: 100%;'></div>
<script type="text/javascript">
  var playerInstance=jwplayer("jplay");
    playerInstance.setup({
        localization:{fullscreen:"Tela Cheia", hd:"Qualidade", copied:"Copiado", playbackRates:"Velocidade da reprodução", videoInfo:"Sobre este vídeo", rewind:"Voltar 10s", settings:"Qualidade","loadingAd":"Carregando anúncio",},
        playbackRateControls:"[0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]",
        id:"jplay",
        controls:true,
        displaytitle:true,
        width:"100%",
        height:"100%",
        aspectratio:"16:9",
        fullscreen:"true",
        autostart: false,
        preload:"auto",
        sharing:{heading:"Compartilhar"},
        image: jw.image,
        sources: 'arquivos de video aqui',
        type:"video/mp4",
        tracks:[{file:"",label:"Português",kind:"captions","default":true},

</script>

1 answer

1


To get the current position of the video you can use jwplayer().getPosition() (in your code something like playerInstance.getPosition() and to detect the change of position of the current video frame use the event jwplayer().on('seeked') (in your code something like:

playerInstance.on('seeked', () => {
    console.log(playerInstance.getPosition());
});

Can save with localStorege instead of cookies and will probably want to save referring to the video’s own ID (if the video has ID), something like:

playerInstance.on('seeked', () => {
    localStorage.setItem(idDoVideo, playerInstance.getPosition());
});

If it is based on the URL of the video you can do so:

playerInstance.on('seeked', () => {
    const file = playerInstance.getPlaylistItem(playerInstance.getPlaylistIndex()).file;

    localStorage.setItem(file, playerInstance.getPosition());
});

And when reloading the page and the player is clear, you must use localStorage.getItem and apply the amount redeemed in jwplayer().seek(position), something like:

let firstPlay = true;

playerInstance.on('play', () => {
    if (firstPlay) {
        firstPlay = false;

        const file = playerInstance.getPlaylistItem(playerInstance.getPlaylistIndex()).file;

        const seekTo = localStorage.getItem(file);

        if (seekTo) playerInstance.seek(seekTo);
    }
});

If at the end of the video you wish to delete the localStorage specific use the event jwplayer().on('complete'), example:

playerInstance.on('complete', () => {
    const file = playerInstance.getPlaylistItem(playerInstance.getPlaylistIndex()).file;

    const seekTo = localStorage.removeItem(file);
});

If you need more specific adjustments see documentation: https://developer.jwplayer.com/jwplayer/docs/jw8-javascript-api-reference

Browser other questions tagged

You are not signed in. Login or sign up in order to post.