0

I have a background video on my website. I have 5 different videos for header that I want show user when he visits second, third time and so on. After that, when he visited 5 times, the video will not be shown anymore, just an image on background.

I have video name like header-1.mp4, header-2.mp4, header-3.mp4 etc.

The following is my html code

<div class="fullscreen-bg">
    <div class="overlay"></div>
    <video loop muted autoplay class="fullscreen-bg-video" id="header_vid">
        <source src="videos/header-1.mp4" type="video/mp4">
        <source src="videos/header-1.webm" type="video/webm">
        <source src="videos/header-1.ogv" type="video/ogg">
    </video>
</div>
Tunaki
  • 116,530
  • 39
  • 281
  • 370
Ismail Farooq
  • 4,949
  • 1
  • 20
  • 42
  • you can save played video url,name or any unique info in cookies,local storage etc.Every time you have to check saved data first – Muhammad Atif Nov 10 '15 at 09:47

1 Answers1

0

You can use cookies to count the user's visit. Store a cookie named visit count, in that store the count. So if user comes first time store a cookie with visitCount = 1 and show header-1.mp4. If visitCount = 1 then the visit is 2nd time of that user, at that time show header-2.mp4 and so on!

NOTE: Cookies are not that reliable as they are stored in browsers, so if someone clears the cookies of the browser, according to this logic your code will play header-1.mp4 as you no longer have reference to the visitCount.

Aatman
  • 553
  • 5
  • 17