视频结束时添加电子邮件注册表格

Add email Signup Form when the video ends

本文关键字：注册 注册表 表格 电子邮件 添加 结束 视频      更新时间：2023-09-26

视频结束时，我正试图调用电子邮件注册表单。我的问题是，我不知道如何在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>

/***更新-对于世界卫生组织正在寻找相同的人，这里是代码********/

        <!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>

将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';
}

因此，当点击按钮或视频结束时，模态都会显示出来。

相关文章：