當視頻結束時添加電子郵件註冊表格

我試圖在視頻結束時致電註冊表單。我的問題我不知道如何調用JavaScript中的表單，到目前爲止，我所取得的成就是在視頻結束時調用警報。有人可以幫助我嗎？當視頻結束時添加電子郵件註冊表格

<video id="myVideo" controls="controls" width="300" height="150"> 
    <source src="http://movie.webm" type="video/webm" /> 
    <source src="your_video_file.ogg" type="video/ogg" /> 
    Your browser does not support HTML5 video. 
</video> 

<script type="text/javascript"> 
    document.getElementById('myVideo').addEventListener('ended', myHandler, false); 
    function myHandler(e) { 
     if (!e) { e = window.event; } 
     alert("Video Finished"); 
    } 
</script>

/***更新 - 有人正在尋找SAME這裏是代碼********/

 <!DOCTYPE html> 
     <html> 

     <head>  
     <style> 

     #overlayContactForm { 
     visibility: hidden; 
     position: absolute; 
     left: 0px; 
     top: 0px; 
     width:100%; 
     height:100%; 
     text-align:center; 
     z-index: 1000; 
     }  
     #overlayContactForm div { 
     width: 428px; 
     margin: 65px; 
     background-color: #fff; 
     border: 1px solid #000; 
     padding: 15px; 
     text-align: center; 
     height: 200px; 
     } 
     </style> 
     </head> 
     <body> 
     <div id="player"></div> 
     <script src="http://www.youtube.com/player_api"></script> 
    <div align="center"> 
    <script> 

    // create youtube player 
    var player; 
    function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'VhvUEhxL1DQ', 
     playerVars: {rel: 0}, 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
    } 

    // autoplay video 
    function onPlayerReady(event) { 
    event.target.playVideo(); 
    } 

    // when video ends 
    function onPlayerStateChange(event) {   
    if(event.data === 0) {    
    el = document.getElementById("overlayContactForm"); 
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : 
    "visible";  
    } 
    } 

    </script> 
    </div> 
    <div id="overlayContactForm"> 
    <div> 
    <h1> Text Header Info </h1> 
    <form class="form-inline"> 
    <input type="email" class="form-control" id="exampleInputEmail3" 
    placeholder="Email Address"> 
    <button type="submit" class="btn btn-default">Sign in</button> 
    </form> 
    <p> Testing email opt-in - Video/Form </p> 
    </div> 
    </div> 
    </body> 
    </html>

來源

2015-06-30 Nuno Sarmento

處理JavaScript的視頻結束事件爲：

var signupForm;      // reference to the sign-up form 
signupForm.style.display = '';  // form initially hidden 

// on video end 
document.getElementById('myVideo').onended = function(e) { 
    signupForm.style.display = 'block'; 
};

編輯：假設signupForm是一個模態對話框，你可以改變甚至處理這樣

var button;  // reference to the button 

document.getElementById('myVideo').onended = function(e) { 
    button.click(); 
}; 

button.onclick = function(e) { 
    signupForm.style.display = 'block'; 
}

因此，當按鈕被點擊或視頻結束時，模式現在都會顯示出來。

來源

2015-06-30 10:45:02 Shreevardhan

嗨Shreevardhan我很感謝您的及時迴應。我設法找到了一種方法。我有另一項任務可能可以幫助我。我想從按鈕中調用我的所有新代碼，並將其顯示在Lightbox或模式框中。 –

@CabLondon然後在事件處理程序中使用'button.click（）'並定義該按鈕的'onclick'事件處理程序來顯示模式對話框 – Shreevardhan

我真的是編程新手，請你介意給我一個例子。 –

當視頻結束時添加電子郵件註冊表格

回答

相關問題