0

I am helping a friend make a website and am a novice with javascript so could do with a little help. I have researched on here and see that some similar questions have been asked before but would like to know exactly how to relate this back to my code. So far this code works well, when you load up the homepage, the video clip runs IF the window is wider than 600px, but the video clip doesn't run if the window is less than 600 pixels. Also the other javascript makes the video disappear once it's played. However the problem I have is if you go to another page on the site, and then back to the home page, the video plays again and again, but I want the video to play only once when the visitor arrives to the site. Could anyone advise how I would edit the code so that the video only runs once per visit? All relevant code is below:

<script type="text/javascript">

window.addEventListener('load', function() {
if (window.innerWidth >= 600) {
var vid = document.getElementById('video');
var wrap = document.getElementById('videowrapper');
wrap.classList.toggle('hide');

vid.play();
vid.addEventListener('ended',function(e) {
  wrap.classList.toggle('hide');    
});
}
})
</script>


<div id="videowrapper" class="hide">
<video id="video" controls>
<source src="clip.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div id="videoEnd" style="display:block">Chris Presents</div>
</div>



<script>        

document.getElementById('video').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }

// What you want to do after the event
document.getElementById('video').style.display="none";
document.getElementById('videoEnd').style.display="none";
}
</script>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="oldhomestyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="soundmouseover.js"></script>

</head>
  • You can use `localStorage` or `history` see [Global Variable usage on page reload](http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload/30144363?s=2|1.3568#30144363) – guest271314 Mar 27 '17 at 18:12
  • you'll want to create a cookie and store a flag in there that says the video has played. when you go to the home page, read the cookie and if it's set then don't display the video – Offbeatmammal Mar 27 '17 at 18:12

2 Answers2

0

Not sure what is this code doing in your tag! (the divs)

Other than that, as mentioned, you could definitely use cookies for what you need.

Niss
  • 116
  • 6
  • @ thomasto - the last line soundmouseover.js is to do with clips that play when you roll over the navigation bar links! I just didn't copy that bit in. –  Mar 27 '17 at 18:21
  • I edited: why is the video in the of your page? This part should be in your not : `
    Chris Presents
    `     – Niss Mar 27 '17 at 18:27
  • agreed - i had just moved it there temporarily –  Mar 27 '17 at 18:30
0

You can set localStorage to store value representing if video has been played at ended event, read localStorage at load event of window

  window.addEventListener('load', function() {
    if (window.innerWidth >= 600 && localStorage.getItem("played") === null) {
      var vid = document.getElementById('video');
      var wrap = document.getElementById('videowrapper');
      wrap.classList.toggle('hide');

      vid.play();
      vid.addEventListener('ended', function(e) {
        wrap.classList.toggle('hide');
        localStorage.setItem("played", true)
      });
    }
  })
guest271314
  • 1
  • 15
  • 104
  • 177
  • guest271314 - thanks, I swapped out your code for my original code, but that's not fixing it, could be something small - I tried it in google chrome and microsoft edge. –  Mar 27 '17 at 18:31
  • What do you mean by "not fixing it"? – guest271314 Mar 27 '17 at 18:33
  • guest271314 - the code you pasted in is not making the video disappear after you have played it once. It is still the same (keeps replaying) except now the video no longer autoplays. I expect it's a small adjustment to the code needed. –  Mar 27 '17 at 18:49
  • Is `ended` event reached? Or should video not be played again if played at all, before reaching `ended` event? – guest271314 Mar 27 '17 at 18:51
  • when you load up the home page, the video plays once and then disappears. After that, the video is not meant to play again during that session. –  Mar 27 '17 at 19:05