I would like to have a LP direct to a video TY page where after the Video Plays they are the directed to another page to complete a final, larger form (application). I just don't want them to skip to the end without watching the video.
Step 1: Small Form
Step 2: Watch a Video
Step 3: Long form
Step 4: Rejoice
Anyone have a solution for that?
-- Corey Smith Directory of Digital Marketing corey@intuitivewebsites.com
Since you mentioned you are doing this with HTML5 Video, you're in luck. The video tag has a rather exstensive list of bindable events, and 'ended' just happens to be one of them. The basic idea of this function is to replace the usual 'video.play' with your own function, where you run a second function after the event listener is triggered. Let's take a look at the HTML of your video:
Do you see what we're doing? Our onclick control is being used to trigger a function called 'playVideo'. This playVideo function will be containing the command of 'video.play' plus the second function of redirecting on end. That can be seen below:
playVideo Function
function playVid(){
var video = document.getElementById('your-video');
// plays video
video.play();
//execute on end
video.addEventListener('ended', function(){
//Redirects
window.location = 'https://www.google.com';
});
}
This will handle the basic level of your problem, I even included a JSFiddle for you to see it in action (Please note, JSFiddle won't allow a redirect from their site, since it's playing in an iframe, but it should essentially show a fake-redirect in that window): Link
Let me know if you have any questions, hope this helps!
Since you mentioned you are doing this with HTML5 Video, you're in luck. The video tag has a rather exstensive list of bindable events, and 'ended' just happens to be one of them. The basic idea of this function is to replace the usual 'video.play' with your own function, where you run a second function after the event listener is triggered. Let's take a look at the HTML of your video:
Do you see what we're doing? Our onclick control is being used to trigger a function called 'playVideo'. This playVideo function will be containing the command of 'video.play' plus the second function of redirecting on end. That can be seen below:
playVideo Function
function playVid(){
var video = document.getElementById('your-video');
// plays video
video.play();
//execute on end
video.addEventListener('ended', function(){
//Redirects
window.location = 'https://www.google.com';
});
}
This will handle the basic level of your problem, I even included a JSFiddle for you to see it in action (Please note, JSFiddle won't allow a redirect from their site, since it's playing in an iframe, but it should essentially show a fake-redirect in that window): Link
Let me know if you have any questions, hope this helps!