Display a different video for each visitor

Asked

Viewed 88 times

1

I am making an HTML page with Javascript and would like for each user who visits the initial video to be changed.

I have 5 videos, so on the first access the video 1 would be displayed, then the video 2 and so on, until on the sixth access would again display the video 1.

Is it possible to do that? How can I do?

javascript html html5-video

2 answers

2

Of course, that’s what "Cookies are for": https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

I’ve got part of the code on https://www.w3schools.com/js/js_cookies.asp

You just need to create a cookie with the number of hits and then keep picking up the rest of the split of the number of hits by the amount of videos. And so you will know which video will display.

<html>
<head>
<meta charset="utf8">
<script>
// Você pode por o nome que quiser dos vídeos, e quantidade que quiser
var videos = ["v1.mp4", "v2.mp4", "v3.mp4"];

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function checkCookie() {
    var acessos = getCookie("acessos");
    if (acessos != "") {
        acessos = parseInt(acessos)+1;
    } else {
        // Caso queria que sempre seja visto primeiro
        // o primeiro vídeo, descomente a próxima linha
        //var acessos = 1;

        // Ou gerando o priemiro vídeo aletatório, se baseando
        // no tamanho do array vídeos
        acessos = Math.floor(Math.random() * videos.length);
    }
    setCookie("acessos", acessos, 30);
    setVideo(acessos);
}

function setVideo(acessos) {
    var video = videos[acessos % videos.length];
    document.getElementById("titulo").innerHTML = video;

    var src = document.createElement("source");
    src.setAttribute("src", video);
    src.setAttribute("type","video/mp4");
    var video = document.getElementById("video");
    video.appendChild(src);
    video.play();
}


</script>
</head>

<body onload="checkCookie()">

<h1 id="titulo"></h1>
<video id="video" width="320" height="240" loop controls>
  <p>Seu navegador não suporta o vídeo.</p>
</video>

</body>
</html>

  • First of all, thank you very much for your attention. Poxa I think I did something wrong because the video the title changes right, I added the videos there all with the name v1, v2, v3, v4 and v5 all in MP4. but it did not run the video, and even if it was another user it should follow the previous user count following the link: https://testewww.000webhostapp.com/teste-nathan/index.html

  • It was my mistake. Now, if you want for every user who accesses the site to change the video, you will have to store the number of accesses on the server. But actually this is not too different from randomly choosing a video from the user’s point of view.

  • Again thank you, for the attention and without wanting to abuse too much of your goodwill, have any topic or link that helps me at this point that for me it is important that they follow the order through other users also Example user to enter and watched or is watching v1.mp4 the next user to access b same from another device will enter will watch v2.mp4 and so on.

  • Well, now you’re going to show the videos. Now, what are you using on the server side? PHP? Python? Node.js? For me to put the user-specific video example.

  • I use PHP, here on the server

  • So I ended up seeing that this way work, but for exactly what I want not to be able to apply well. So what happens. that I will use this html, (into an RB ) and create a hotspot, and every time someone joined this wifi before releasing the internet would present a video and the same continue to forget, for customers who connect later, in my shop. In my head it would be like this html generate a txt inside the folder that it is inside the router and this txt it sends and fetch the value to drop the videos.

Show 1 more comment

1


Jonathan, in the specific case of PHP, you will have to store this count somewhere, because after PHP’s process is over, all information is lost.

In case I’ll use Redis. Redis is a database in memory, very fast and small, ideal for this kind of thing.

If using windows is just lower the binaries and run the file redis-server. And install the extension.

<?php
// pegos os videos na pasta atual
$videos = glob('./*.mp4');


$redis = new Redis();
$redis->connect('127.0.0.1');

/* se não existir uma chave chamada 'nacessos',
ele cria e retorna 1, se existir ele incrementa
e retorna o valor
*/
$nacessos = $redis->incr('nacessos');

$video = $videos[$nacessos % count($videos)];
?>
<html>
<head>
<meta charset="utf8">
</head>

<body>

<h1 id="titulo"><?= $video ?>, acesso #<?= $nacessos ?></h1>
<video id="video" width="320" height="240" controls autoplay muted loop>
  <source src="<?= $video ?>" type="video/mp4">
  <p>Seu navegador não suporta o vídeo.</p>
</video>

</body>
</html>
<?php

Browser other questions tagged javascript html html5-video

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