playing a 10 second video before php page is called

bowlesj · Post by **bowlesj** » Mon Oct 20, 2014 1:53 pm

Hi, my website needs to (in a few places) play at least 10 seconds of an advertising video before a php page is called. I am assuming this would be a javascript or jQuery call with a call back function that executes the call to the page once the 10 seconds (a parameter) is completed and the user has indicated they do not want to watch the whole video. I did a summary search of this site for the keyword "video" but found no thread subjects along the line of what I am looking for. This is pretty standard these days. Is there anything in the forum on this subject?

Thanks,
John

BaconFries · Post by **BaconFries** » Mon Oct 20, 2014 2:18 pm

Maybe you could simply just use the redirect script found in Ready to use Javascript or you could try the following
<meta http-equiv="refresh" content="350;url=http://www.yourpage.com"> the 350 being the seconds it will redirect to the set url or page you wish...

bowlesj · Post by **bowlesj** » Mon Oct 20, 2014 4:00 pm

Hi Baconfries

I tried the meta command and sort of got it to work. It keeps placing this in the browser URL window and can't find the page.
http://localhost/MJN/,URL=frmLogin.php

Regarding the "redirect script found in Ready to use Javascript" are you referring to the "window.location.replace("http://stackoverflow.com");" command they are talking about in this link? http://stackoverflow.com/questions/5030 ... javascript

I might try the javascript timer function.

Thanks,
John

BaconFries · Post by **BaconFries** » Mon Oct 20, 2014 5:33 pm

The script in ready to use javascripts does use the window.location but works it a different way. The meta tag method is simply using HTML rather than jQuery/PHP or javascript the only issue with the meta tag is that if the redirect is less than 300 seconds some search engines will penalise pages as it is seens as trying to cloak the page. It may be best to use a small jQuery.javascript time redirect that wont or should effect how search work...

bowlesj · Post by **bowlesj** » Mon Oct 20, 2014 5:41 pm

I got the code below to work for a small test of a mp4 test video I found on the web. It gives a 5 second delay for my test. All I need to do now is figure out how to stop the user from skipping buy the video (probably can't do this anyway) and also allowing them to have it continue if they are interested in the ad. Actually normally the default is the video keeps going and they click the button to reduce it to 10 seconds (or whatever). What is below is okay but some advertisers may want a longer video but the negotiation would be allowing the user to stop it within 10 seconds. I guess I could have a button to bypass the ad call a javascript function and have the timer set a global variable switch which the button click function checks and when the switch is finally changed it allows them to click past it.

I got it to work. it is below. I initially set it up with a text box but later changed it to a regular bottom which is set to normal and I was able to get the value of the button to have the same code with countdown as the text.

Between the <head></head> tags

Code: Select all

<script>
//This function sets up the flag for 10 seconds so that if the user clicks before the 10 seconds the click is ignored.
function funcOnloadProcessing() {
   window.Seconds = 10;
   
   window.AllowBypass = "N";
   setInterval(function () {
      window.AllowBypass = "Y";
   }, 10000);
} //function funcOnloadProcessing()

//This function executes every 1 second to show a count down inside the edit box.
setInterval(function () {
   if (window.Seconds > 0) {
      window.Seconds = window.Seconds - 1;
   }
   document.getElementById("Editbox1").value = "Click here to bypass the advertizement after 10 seconds: " + window.Seconds + " remaining.";
}, 1000);
</script>

Inside <body> tag

Code: Select all

onload="funcOnloadProcessing()"

After <body> tag

Code: Select all

<script>
//This function is executed when the text box is clicked. The timer event sets the switch to Y after 10 seconds
function funcBypassAd() {
   if (window.AllowBypass == "Y") {
      window.location="frmWhateverPage.php?Key=1";
   }
}
</script>

This code is placed inside the HTML object that you place on your page so the video will play.
The video will be placed in your directory unless you have a link to where the ad is stored at the company.

Code: Select all

<video id="myVideo"  autoplay>
  <source src="WhateverVideo.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

If you want to include pause and play buttons for the video, insert the code below and set up regular buttons. Inside the event properties include a call to the playVid() and pauseVid() javascript functions when the button is clicked. Note that they are referencing the id of "myVideo" which matches the code placed inside the HTML object.

Code: Select all

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 

<script> 
var vid = document.getElementById("myVideo"); 

function playVid() { 
    myVideo.play(); 
} 

function pauseVid() { 
    myVideo.pause(); 
} 

function loadVid() { 
    myVideo.load();  //This can be used to restart the video.
} 

</script>

bowlesj · Post by **bowlesj** » Mon Oct 20, 2014 6:46 pm

I got it all to work. I updated the code in the post above to show the full solution.

Thanks again BeaconFries.
John

BaconFries · Post by **BaconFries** » Mon Oct 20, 2014 6:50 pm

Thanks for taking the time to provide this solution. You could make it a thread in the section if you wish or I could move it for you when back at PC.

bowlesj · Post by **bowlesj** » Mon Oct 20, 2014 6:57 pm

Are you referring to this section?
"WYSIWYG Web Builder Tips, Tricks, Tutorials and Code Examples"

Moving it is fine. I just want to be able to go back to it with "View your posts". Often I will go back and fix things up if needed.

SteveMann · Post by **SteveMann** » Tue Oct 21, 2014 4:11 am

Why not just use an onended event?

bowlesj · Post by **bowlesj** » Tue Oct 21, 2014 12:38 pm

Why not just use an onended event?

The idea is basically the same as many I have seen including this one where you see a long ad but you have the option to stop it after 5,10 or 15 seconds.
http://www.youtube.com/watch?v=_86Gm9iclAg
The onended event would not give the user the option to end after 10 seconds with a count down on the button.
In my case hopefully advertisers will have specials and the user may actually want to watch the whole ad on occasion.
So I put added buttons on to control the video if they want.
I had no MP4 movie files (which seems to be the most widely supported) so I grabbed one for testing.
Here is the screen shot with 8 seconds remaining.
I may make it a popup in the future. For now I like the new page clean look.
It is actually centered but I moved the image to reduce the size of the upload file.

SteveMann · Post by **SteveMann** » Tue Oct 21, 2014 1:58 pm

There's many ways to skin this cat.
You could use a timer event to hide the "Skip Ad" button for ten seconds, and use an onclick event for the skip button to stop the player, where the onended event would trigger.

www.wysiwygwebbuilder.com

playing a 10 second video before php page is called

playing a 10 second video before php page is called

Re: playing a 10 second video before php page is called

Re: playing a 10 second video before php page is called

Re: playing a 10 second video before php page is called

Re: playing a 10 second video before php page is called

Re: playing a 10 second video before php page is called

Re: playing a 10 second video before php page is called

Re: playing a 10 second video before php page is called

Re: playing a 10 second video before php page is called

Re: playing a 10 second video before php page is called

Re: playing a 10 second video before php page is called