視頻在我的網站上使用javascript結束后如何顯示聯系表？

<script type='text/javascript'> document.getElementsByClassName('hideVideo').addEventListener('ended',myHandler,false); function myHandler(e) { var hideVideo = document.getElementsByClassName("hideVideo")[0]; hideVideo.style.display = "none"; } </script>

我正在創建一個網站，整個頁面上只顯示 1 個視頻。我想要的是在視頻結束后，聯系表格應該彈出，視頻應該消失。我怎樣才能使用javascript做到這一點？

uj5u.com熱心網友回復：

你可以在那里找到你需要的關于 html 視頻元素事件等等。

HTML 音頻/視頻屬性

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

我認為這將與您想做的事情有關：

<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);

這是來源

uj5u.com熱心網友回復：

呼吁采取行動

查看以下示例時：

1. 等待 5 秒<video>以結束
2. 一個會打開<dialog>的<form>
3. 輸入所需資料并提交
4. 資料將被提交到實時測驗服務器
5. 將<dialog>關閉
6. <iframe>^?將出現在服務器<video>回應
   ^{下方? 不需要 - 僅添加例如}

細節在例子中注釋

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

標籤：javascript html 形式

上一篇：多個小部件在提取的方法textformfield小部件中使用相同的GlobalKey

下一篇：Angular表單陣列-為嵌套表單組動態添加值