1

Есть сайт с видео в фоне. Нужно воспроизводить новое видео после перезагрузки страницы. Вот код html:

<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, нужно менять после перезагрузки например на 4.mp4, после следующей на 5.mp4

2 ответа 2

1

Для решения Вашей проблемы есть два решения:

JavaScript

Необходимо написать JS который будет устанавливать куку просмотра того или иного видео, и при повторной загрузке сайта менять на другую. Пример:

// функции для работы с куками
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

По сути тоже самое только использовать сесию для хранения данных. Вставить внутри HTML страницы файл пере назвать в PHP и настроить .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">';
?>
1

Я бы взял простой способ через js и localstorage. Идея такова - если пользователь заходит впервые, то у него есть например переменная firstVisited которая равно 0 (false). После того как страница загрузилась и все ок, переменная меняется на 1 и сохраняется в localstorage откуда потом выгружается после перезагрузки страницы.

....

    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 строчка на jquery, но это можно сделать и на js. P.S. я понимаю, что нет тега js, но я предложил способ "влоб"

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.