WordPress splash screen

In functions.php (code voor het aanmaken van cookie en bepalen of deze is gezet of niet)

function checkAccessed(){
        if ( !isset($_COOKIE['splash']) ) { 
            setcookie('splash', 'yes', time() + 3600*24*30); // 30 dagen
            define("ACCESSED", false);
        }else{
            define("ACCESSED", true);
        }
}
add_action("init", "checkAccessed");

In header.php (jQuery voor de interactie in de <head>)

<?php if(!ACCESSED && !wp_is_mobile()){ ?>

<script>
			$( document ).ready(function() {
				if($(".splash").is(":visible"))
				{
					$(".boxwrapper").css({"opacity":"0"});
				}
				$(".splash-arrow").click(function() {
					$(".splash").removeClass('fadeIn');
					$(".splash").addClass('slideOutLeft');
					setTimeout(function(){ $("#bgvid").remove(); }, 5000);
					$(".boxwrapper").delay(100).animate({"opacity":"1.0"},800);
				})
				$(".menu-item").click(function() {
					$(".splash").removeClass('fadeIn');
					$(".splash").addClass('slideOutLeft');
					setTimeout(function(){ $("#bgvid").remove(); }, 5000);
					$(".boxwrapper").delay(100).animate({"opacity":"1.0"},800);
				})		
				$("#bgvid").bind('ended', function(){ // voer uit aan het einde van de video
				  	$(".splash").removeClass('fadeIn');
					$(".splash").addClass('slideOutLeft');
					setTimeout(function(){ $("#bgvid").remove(); }, 5000);
					$(".boxwrapper").delay(100).animate({"opacity":"1.0"},800);
				})

			});
			</script>

<script>
			$(document).ready(function(){
			      var video_length_round = 15;
			
			      var video = document.getElementById('bgvid');
			      var mp4Source = document.getElementById('mp4Source');
			      var webMSource = document.getElementById('webMSource');
			      if(typeof video !== 'undefined'){
			
			        // Ensure video element has an mp4Source, if so then update video src
			        if(typeof mp4Source !== 'undefined'){
			          $(mp4Source).attr('src', '/p1videof.mp4');
			        }
			         if(typeof webMSource !== 'undefined'){
			          $(webMSource).attr('src', '/p1videof.webm');
			        }
			
			        video.load();
			
			        // Ensure video is fully buffered before playing
			        video.addEventListener("canplay", function() {
			          this.removeEventListener("canplay", arguments.callee, false);
			
			          if(Math.round(video.buffered.end(0)) >= video_length_round){
			            // Video is already loaded
			            this.play();
			
			          } else {
			            // Monitor video buffer progress before playing
			            video.addEventListener("progress", function() {
			              if(Math.round(video.buffered.end(0)) == video_length_round){
			                this.removeEventListener("progress", arguments.callee, false);
			                video.play();
			              }
			            }, false);
			          }
			        }, false);
			      }
			    });
			</script>

<?php } ?>

In header.php (Splash screen zelf in de <body>)

<?php if(!ACCESSED && !wp_is_mobile()){ ?>
		<div class="splash animated fadeIn">
			<video id="bgvid" autoplay="true" preload="auto">
		      <source id="mp4Source" type="video/mp4">
		    </video>
			<a href="#" class="splash-arrow">Go to the website</a>
		</div>
		<?php } ?>

 

 

 

 

#cookie #jQuery #php