播放HTML5视频时打开弹出窗口
Open pop-up window while HTML5 video is playing
我正在使用爆米花.js来提供与HTML5视频的一些交互。在播放视频时,我试图让另一个窗口(带有另一个视频)在某个时间点打开,然后在 x 秒后关闭。基本上,我正在尝试重新创建此处看到的功能:http://thewildernessdowntown.com
我遇到的问题是我的弹出窗口被 Firefox 的弹出窗口阻止程序阻止了。我该如何解决这个问题?再一次,我会回 http://thewildernessdowntown.com,因为他们的窗户打开得很好,但我无法弄清楚他们在做什么。
这是我拥有的一些非常基本的代码:
document.addEventListener('DOMContentLoaded', function() {
var $popcorn = Popcorn('#video');
$popcorn.code({
start: 6,
end: 12,
onStart: function() {
window.open('window.html','window','width=400,height=200');
},
onEnd: function() {
window.close();
}
});
}, false );
任何帮助将不胜感激。谢谢!
您可以在"click"事件侦听器中打开一个新窗口,但不能在超时或视频时间更新事件中打开一个新窗口,这是 Popcorn 使用的。但是,如果您仔细观看《荒野市中心》,它会通过在单击开始按钮时提前打开几个窗口,然后在以后重新使用这些窗口来解决这个问题。所以像这样的事情...
document.getElementById('start-button').addEventListener('click', function() {
var $popcorn = Popcorn('#video'),
popup = window.open('about:blank','mywindow','width=10,height=10');
$popcorn.code({
start: 6,
end: 12,
onStart: function() {
window.open('window.html','mywindow');
popup.moveTo(400, 400);
popup.resizeTo(400,200);
popup.focus();
},
onEnd: function() {
//window.close();
/* in case you want to re-use this window again later... */
window.open('about:blank','mywindow');
popup.moveTo(0, 0);
popup.resizeTo(10, 10);
}
});
//optionally...
$popcorn.play();
}, false );
如果您打开的窗口指向不同的域,则会遇到问题。
相关文章:
- 如何将 html5 画布另存为窗口 8 Metro 应用程序中的图像文件
- .data() html5 交叉窗口
- 如何停止html5视频时关闭其内联弹出窗口,跨浏览器
- nodejsjavascripts窗口/图像,而不使用html5画布
- 播放HTML5视频时打开弹出窗口
- HTML5 范围输入值在引导弹出窗口中没有变化
- 设置 HTML5 视频窗口的当前时间.onscroll 滞后
- 如何在模式窗口关闭时使用 HTML5 停止为视频
- 窗口调整时暂停/停止或删除HTML5视频
- 如何为HTML5画布添加预览窗口
- Javascript-在HTML5中提交弹出窗口,无需重新加载父页面
- HTML5 postMessage没有窗口引用
- 停止HTML5表单发布、刷新或在Submit上打开新窗口
- HTML5窗口.postMessage在Youtube品牌频道
- 在窗口警报中显示html5输入值,并将值保存为.txt
- 当窗口最小化时,提醒用户浏览器内事件——而不是html5通知
- Html5 -窗口.Onbeforeunload捕获_only_ refresh, back/forward
- HTML5拖动高度调整窗口大小
- HTML5在多个浏览器窗口之间拖放多个元素
- 我如何使Html5/Javascript画布填充窗口屏幕