How to store the Jwplayer video position in a cookie

Asked

Viewed 49 times

0

Ola would like to know how I can change the code below that shows the position of time in which the video is in real time. I would like this position to be stored in a cookie, valid, so that if the page is updated, the cookie is triggered, placing the video in the position where the video stopped.

Code

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    body {
        font-size:1em;
        line-height:1.8em;
    }
    h2,#timer {
        background-color:#000;
        color:#0f0;
        font-size:2em;
        margin:0em;
        width:200px;
        height:1.2em;
    }
</style>
<script type="text/javascript" src="https://osric.com/chris/javascript/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="https://osric.com/chris/jwplayer/jwplayer5.4/jwplayer.min.js"></script>
<script type="text/javascript">
 $(document).ready( function() {
    jwplayer("container").setup({
        file:"url do vídeo aqui",
        height: 300,
        width: 400,
            events: {
            onTime: function(event) {
                $('#timer').html(Math.floor(event.position));
            }
        }
    });
 });
</script>
</head>
<body>



<div id="container"></div>

<h2>Timer:</h2>
<div id="timer"></div>



</body>
</html>
javascript html

  • What would be the expiration date? In hours, days, minutes?

1 answer

0


I suppose you have already separated the time of a player, what you are trying to do is a little complicated work, I will give you a basis to assemble your logic, have two ways to do this, one is with cookies and the other is with local Storage.

First mind to save a cookie, you can use pure javascript and write something like this:

//javascript
document.cookie = "tempo=123";

Every cookie is stored inside the document.cookie, but it won’t last long, so you can set a time, something like:

//javascript
document.cookie = "tempo=123; expires=Wed, 23 Dec 2020 12:00:00 UTC";

This cookie will stand "up" until December 23rd, and to pull that date you can receive this way:

//javascript
ver cookie = document.cookie;

The problem is that it will return a log string with all the stored text, so you can use a very common API which is the Cookiejs, it’s much simpler to work with her, and her code would look something like this:

//CookiesJS API
Cookies.set('tempo', '123456', { expires: 7 });
var cookie = Cookies.get('tempo');

And to finish when to load it is necessary to take the video element and change the time, the first step is to make sure that it was loaded before the script to change the time, because javascript is asynchronous and this can give a little headache, However to change the time is so;

//javascript
var player = document.getElementById('container').children;

for (var i = 0; i < player.length; i++) {

    if (player[i].nodeName == "VIDEO") {

        player[i].currentTime = 123;

        break;

    }

}

NOTE: Jwplayer may occur unplanned error while changing the weather, as every API always has flaws that were not planned, but I believe this will not disturb you.

Browser other questions tagged javascript html

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