我正在开发一个网页,我有一个来自客户的请求,但我不太清楚如何执行它。
我的想法是,一旦我进入索引,一个视频就会出现在一个弹出窗口(广告)中,当这个视频结束时,这个窗口就会消失。
有什么办法吗?并控制视频何时结束?
这个想法是通过 JavaScript 脚本实现的,但我并不完全确定。
谢谢。
编辑:
在 Jordi Flores 的帮助下,它几乎就在那里:
<!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>
虽然现在视频没有关闭,如果我把一个放在我的电脑上,它就不会播放。
在这里你可以看到一个完整的例子:
用于
fancybox
打开和包装视频,直到完成,一旦完成,使用示例中的 js 事件,关闭fancybox。我找到了几个可能对您有用的答案,全部使用html5和css3 我已经尽力开发它,但我还没有完成它的“漂亮”。我希望有人对其进行编辑,或者当我回到家时,我会更好地从计算机上进行编辑。
创建 PopUp
第一个示例 ←StackOverflow 英语
第二个示例
使用带有示例的 Html5 w3Schools插入视频
在索引的 OnLoad 事件中,您必须打开
window.open();
视频所在的页面 ( ),然后播放要关闭它,您必须通过事件检测它何时完成播放: