CODEWITHSUNDEEP
javascriptjqueryhtmlcssvideo
Apex
Apex

Reputation: 227

How can I stop a background video playing every time the user returns to the home page?

I have been handed a design which requires a background video to load when the users hits the home page. I realise that this isn't best practice, but the design has been signed off by the client, so trying to develop a decent solution for it. I have video in place and it is working nicely.

I have also been asked to ensure that the video only loads once when the user visits the site and when they navigate about the site, if they return to home, the video shouldn't play again.

I have been searching about the web, but can't find a precedent for this. Could anyone suggest a possible solution for this to work? Or some documentation that I could visit to source one?

The site is written with HTML, CSS and JQuery.

I appreciate that there isn't any code to see, but any suggestions would be much appreciated.

Thank you to anyone who stumbles across this.

Upvotes: 2

Views: 72

Answers (2)

Ambrish Pathak
Ambrish Pathak

Reputation: 3968

You have to check if the user was already on the site, so you have to save this data somewhere, data can be saved in session, database, localStorage or in cookies.

Using cookies would be the best option for this scenario. Cookies gets stored on client side and can be used for session and state management

Cookie usage with JS

function setCookie(cookieName, cookieValue, expireDays,isGlobal) {
            var expireDate = new Date();
            expireDate.setTime(d.getTime() + (expireDays*24*60*60*1000));
            var expires = "expires="+expireDate.toUTCString();
            if(isGlobal){
                document.cookie = cookieName + "=" + cookieValue + "; " + expires+"; path=/";
            }else{
                document.cookie = cookieName + "=" + cookieValue + "; " + expires;
            }
        }

        function getCookie(cookieName) {
           var name = cookieName + "=";
           var ca = document.cookie.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(cookieName) {
        if (getCookie(cookieName) != "") {
            return true;
        } else {
            return false;
        }
    }

    $(document).ready(function(){
      if(checkCookie('visited')){
         //Stop playing video
      }else{
        setCookie('visited',1,3,false);
        //Play video automatically
      }
    });

Upvotes: 0

Jordan Running
Jordan Running

Reputation: 106077

Use localStorage or sessionStorage:

Supposing you have a video element with an id, e.g.:

<video id="myVideo">...</video>

Your script might look something like this:

if (!localStorage.getItem('alreadyPlayedVideo')) {
  const myVideo = document.getElementById('myVideo');
  myVideo.play();
  localStorage.setItem('alreadyPlayedVideo', true);
}

It would look the same with sessionStorage. The primary difference between the two is that sessionStorage is cleared when the user exits the browser or closes the tab, whereas localStorage persists between sessions.

Upvotes: 2

Related Questions