Lead Capture Tools

coreysmith
Top colaborador(a) | Parceiro Ouro
Top colaborador(a) | Parceiro Ouro

Intermediate Video Step in Lead Flow

resolver

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
0 Avaliação positiva
1 Solução aceita
Ty
Solução
HubSpot Employee
HubSpot Employee

Intermediate Video Step in Lead Flow

resolver

Hey @coreysmith,

 

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:

 

Video HTML

<video width="400" controls id="your-video" width="770" height="882" onclick="playVid()">
    <source src="your-video-source" type="video/mp4">
</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!

-- Ty

 

Exibir solução no post original

0 Avaliação positiva
6 Respostas 6
Ty
Solução
HubSpot Employee
HubSpot Employee

Intermediate Video Step in Lead Flow

resolver

Hey @coreysmith,

 

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:

 

Video HTML

<video width="400" controls id="your-video" width="770" height="882" onclick="playVid()">
    <source src="your-video-source" type="video/mp4">
</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!

-- Ty

 

0 Avaliação positiva
coreysmith
Top colaborador(a) | Parceiro Ouro
Top colaborador(a) | Parceiro Ouro

Intermediate Video Step in Lead Flow

resolver

Ty, finally back at this now that my deadline is looming. This is simply a brilliant solution. I dig it. Thank you very much!

--
Corey Smith
Directory of Digital Marketing
corey@intuitivewebsites.com
coreysmith
Top colaborador(a) | Parceiro Ouro
Top colaborador(a) | Parceiro Ouro

Intermediate Video Step in Lead Flow

resolver
This is great. I may be a couple of weeks before trying it out but I'll mark as a solution now. I'll pop back in if something doesn't work. Thanks!
--
Corey Smith
Directory of Digital Marketing
corey@intuitivewebsites.com
roisinkirby
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Intermediate Video Step in Lead Flow

resolver

Hey @coreysmith what video player are you using?

0 Avaliação positiva
coreysmith
Top colaborador(a) | Parceiro Ouro
Top colaborador(a) | Parceiro Ouro

Intermediate Video Step in Lead Flow

resolver

Normally I just use the HTML5 video player. I like it because it's simple to use and I just host the video on Hubspot's CDN

--
Corey Smith
Directory of Digital Marketing
corey@intuitivewebsites.com
0 Avaliação positiva
roisinkirby
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Intermediate Video Step in Lead Flow

resolver

@cbsembler @Ty @sfiske have you seen this acheived before?

0 Avaliação positiva