I'm making an HTML page with JavaScript and would like for every user who visits it to change the initial video.
I have 5 videos, so on the first access the video 1 would be displayed, then the video 2 and so on, until in the sixth access it would return to display the video 1.
Is it possible to do this? How can I do it?
Jonathan, in the specific case of PHP, you will have to store this count somewhere, because after the PHP process terminates, all information is lost.
In case I'm going to use Redis . Redis is a memory database, very fast and small, ideal for this kind of thing.
If you are using windows, just download the binaries and run the 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
Of course, this is what Cookies are for: link
p>I've copied part of the code in link
You just need to create a cookie with the number of hits and then get the rest of the division of the number of hits for the number of videos. And so you'll know which video to 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>