I am developing a web page and there is a request that I have from the client and I don't know very well how to carry it out.
My idea is that as soon as I enter the index, a video appears in a pop-up window (advertising) and that when this video ends, the window disappears.
Is there any way to do it? and to control when the video ends?
The idea would be through a JavaScript script, but I'm not entirely sure.
Thanks.
EDIT:
With the help of Jordi Flores, it's almost there:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#myVideo {
display: none;
}
</style>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="http://fancyapps.com/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#openVideo").fancybox({
'closeBtn':false,
'openEffect': 'fade',
helpers : {
overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox
}
});
//simulamos click y abrimos fancybox
$("#openVideo").eq(0).trigger("click");
//forzamos play
document.getElementById('myvideo').play();
});
document.getElementById('myvideo').addEventListener('ended',myHandler, false);
function myHandler(e) {
console.log("el video se ha acabado!!")
$.fancybox.close();
}
</script>
</head>
<body>
<!--Boton para abrir video, solo para test -->
<a href="#myVideo" id="openVideo">open video</a>
<div id="myVideo" >
<div id="videoWrapper">
<video id="myvideo" autoplay>
<source src="008.mp4" type="video/mp4">
Your browser does not support html5 videos
</video>
</div>
</div>
</body>
</html>
Although now the video does not close and if I put one located on my pc it does not play it.
Here you can see a complete example:
use
fancybox
to open and wrap the video until it is finished, once it is finished, with the event in js that you have in the example, you close the fancybox.I have found several answers that may be useful to you, all with html5 and css3 I have tried to develop it as best I could, but I have not finished making it "pretty". I hope someone edits it, or when I get home I'll do it from the computer better.
To create the PopUp
First Example ←StackOverflow English
Second Example
To insert a video with Html5
w3Schools with examples
In the OnLoad event of the index you have to open a page (
window.open();
) where the video is and then play itAnd for it to close you have to detect when it finished playing, with an event: