视频结束后，我正在尝试致电电子邮件注册表单。我的问题是，我不知道如何在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';
}
因此，当单击按钮或视频结束时，模态将同时显示。