There is a site with a video in the background. You need to play a new video after reloading the page. Here is the html code:

<html> <head> <title>JabraOne</title> <link rel="icon" type="image/ico" href="id.ico" sizes="45x48"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src="js/skel.min.js"></script> <script src="js/init.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body class="loading"> <div id="wrapper"> <video autoplay="1" loop="" id="player"> <source src="./vid/3.mp4" type="video/mp4"> </video> <div id="overlay"></div> .... </div> </body>

3.mp4 is played by default, you need to change after a reboot, for example, to 4.mp4, after the next one to 5.mp4

    2 answers 2

    To solve your problem, there are two solutions:

    Javascript

    You need to write a JS that will set the cookie to watch this or that video, and when you reload the site, change to another. Example:

     // функции для работы с куками function getCookie(name) { var matches = document.cookie.match(new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" )); return matches ? decodeURIComponent(matches[1]) : undefined; } function setCookie(name, value, options) { options = options || {}; var expires = options.expires; if (typeof expires == "number" && expires) { var d = new Date(); d.setTime(d.getTime() + expires*1000); expires = options.expires = d; } if (expires && expires.toUTCString) { options.expires = expires.toUTCString(); } value = encodeURIComponent(value); var updatedCookie = name + "=" + value; for(var propName in options) { updatedCookie += "; " + propName; var propValue = options[propName]; if (propValue !== true) { updatedCookie += "=" + propValue; } } document.cookie = updatedCookie; } function deleteCookie(name) { setCookie(name, "", { expires: -1, path: "/", domain: window.location.hostname }); } // example // setCookie("cookieName", "cookieValue", { expires: expireTime, path: cookiePath, domain: allowedDomain, secure: useOrNotHttps }) // setCookie("langsite", "ru", { expires: 30*24*60*60, path: "/", domain: "eshko.ua", secure: false }) // expires: in one month // path: on all site // domain: eshko.ua // secure: use http // Сам код: $(document).ready(function(){ if (getCookie('LastVideoIndex') > 0) { var newIndex = getCookie('LastVideoIndex') + 1; setCookie('LastVideoIndex', newIndex); $('source').attr("src", './vid/'+newIndex+'.mp4'); } else { setCookie('LastVideoIndex', 3); } });

    Php

    In essence, the same thing is only using session for data storage. Insert inside the HTML page the file is renamed in PHP and set up .htaccess .

     <?php if (isset($_SESSION['lastVideoIndex']) && $_SESSION['lastVideoIndex'] > 0) { $_SESSION['lastVideoIndex']++; } else { $_SESSION['lastVideoIndex'] = 3; } echo '<source src="./vid/'.$_SESSION['lastVideoIndex'].'.mp4" type="video/mp4">'; ?>

      I would take a simple way through js and localstorage. The idea is that - if the user comes for the first time, then he has for example the variable firstVisited which is 0 (false). After the page has loaded and everything is OK, the variable changes to 1 and is stored in the localstorage, from where it is then unloaded after reloading the page.

      ....

        var firstVisited = localStorage.getItem('firstVisited'); var count = 3; // номер видео по умолчанию if (firstVisited == null){ firstVisited = 1; // первый раз на странице // и потому стандартное значение в video не нужно даже менять } else { count = localStorage.getItem('countVideo'); // вытаскиваем номер видео } if (!firstVisited) { // если уже не первый раз на странице // присваиваем новое видео элементу video $("#player").attr("src","./vid/"+(count+1)+".mp4"); localStorage.setItem('countVideo',count+1); // и сохраняем видео } else{ // если же в первый раз то нужно пометить, что со следующего раза видео должны меняться localStorage.setItem('firstVisited',0); , }

      1 line on jquery, but it can be done on js. PS I understand that there is no js tag, but I suggested a way to "vlob"