使用JavaScript在网站上结束视频后，如何显示联系表？

Question

＆lt; script type ='text/javascript'＆gt; document.getElementsByClassName（'hideVideo'）。addeventListener（'ended'，myhandler，false）;函数myhandler（e）{var hidevideo = document.getElementsByClassName（“ hidevideo”）[0]; hidevideo.style.display =“ none”; }＆lt;/script＆gt;

我正在创建一个网站，其中整个页面上仅显示1个视频。我想要的是在视频结束后，随着弹出式弹出，视频应该消失。如何使用JavaScript执行此操作？

Answer 1

您可以在那里找到有关HTML视频元素事件的需求等。

html audio/video properties

Answer 2

var videoObj = document.getElementById('sample-video');
videoObj .play();
videoObj .addEventListener('ended', function () { 
document.getElementById("form-id").style.display="block";
this.style.display = "none";
},false);

#form-id{
display : none;
}

<div>
<video id="sample-video" style="max-width:100%;width:100%;" controls="">
    <source src="https://cdn.videvo.net/videvo_files/video/free/2015-09/large_watermarked/Search_Google_preview.mp4" type="video/mp4">
</video>
</div>
<div>
<form id="form-id">
<h1>Your form</h1>
<label>Form Field 1</label>
<input type="text">
<label>Form Field 2</label>
<input type="text">
</form>
</div>

Answer 3

我认为这将与您要做的事情：

<video id="sample-video" style="max-width:100%;width:100%;" controls="">
    <source src="" type="video/mp4">
</video>
<div id="myForm">
  Add your form here
</div>

var v = document.getElementById('sample-video');
v.play();
v.addEventListener('ended', function () { 
  var formDiv = document.getElementById("myForm");
  if (formDiv.style.display === "none") {
    formDiv..style.display = "block";
  } else {
    formDiv..style.display = "none";
  }
},false);

这是 source

Answer 4

请致电行动

在审查下面的示例时，

1. ：等待5秒钟的＆lt; video＆gt;以结束
2. ＆lt; dialog＆gt;，并用＆lt; form＆gt; 将打开
3. 输入所需的数据并提交
4. 数据将提交到实时测试服务器
5. ＆lt; dialog＆gt;将关闭
6. ＆lt; iframe＆gt; ^✺ 将出现在＆lt; video＆gt;下，并带有服务器响应
   ^{✺不需要 - 仅添加例如}

详细信息在示例中评论

// Reference <video>, <dialog>, and <form>
const vid = document.querySelector('video');
const mod = document.querySelector('dialog');
const con = document.forms[0];
// Bind the 'ended' event to <video>
vid.onended = cta;
/*
Event handler passes Event Object by default
Hide, pause, and reset <video>
Open <dialog>
*/
function cta(e) {
  vid.style.display = 'none';
  vid.pause();
  vid.currentTime = 0;
  mod.showModal();
}

// Bind 'click' and 'submit' events to <form>
con.onclick = close;
con.onsubmit = close;

/*
If the user clicked .close OR <form> is submitted...
...close <dialog>...
...show <video> and add controls
*/
function close(e) {
  if (e.target.matches('.close') || e.type === 'submit') {
    mod.close();
    vid.style.display = 'block';
    vid.controls = true;
  }
}

// This was added so you don't have to sit and wait for the whole video to end
vid.ontimeupdate = quit;

function quit(e) {
  if (this.currentTime >= 5) {
    this.currentTime = this.duration;
  }
};

html {
  font: 300 2ch/1 'Segoe UI'
}

video {
  display: block;
  margin: 20px auto 10px;
}

dialog {
  padding-right: 5px;
  padding-bottom: 8px;
  border-radius: 4px;
}

fieldset {
  border-radius: 4px;
}

legend {
  font-size: 1.2rem
}

input {
  font: inherit;
  margin-bottom: 6px;
}

button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font: inherit;
  float: right;
  cursor: pointer;
}

button::before {
  content: attr(value);
}

#close {
  width: 1rem;
  height: 1rem;
  margin: -12px 0 0 4px;
  padding: 0 1px 3px;
  outline: 0;
}

sup {
  font-size: 0.6rem;
  color: red;
}

input+sup {
  display: inline-block;
  margin: 0 -8px 0 1px;
}

small+sup,
small {
  float: right;
}

small {
  display: inline-block;
  margin-right: 20px;
}

iframe {
  display: block;
  margin: 0 auto;
  border: 0;
}

<video src='https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4' width='240' autoplay muted></video>
<dialog>
  <form action='https://httpbin.org/post' method='post' target='response'>
    <button id='close' class='close' type='button' value='x'></button>
    <fieldset>
      <legend>Subscribe</legend>
      <input name='user' type='text' placeholder='User Name' required><sup>✱</sup><br>
      <input name='email' type='email' placeholder='Email Address' required><sup>✱</sup><br>
      <button value='Submit'></button>
      <button class='close' type='button' value='Cancel'></button>
    </fieldset>
    <small>Required</small><sup>✱</sup>
  </form>
</dialog>
<iframe name='response' width='240'></iframe>