首先让我解释一下问题:
在整个网站构建的某些页面上,用户可以单击视频的缩略图,然后显示一个模式(引导程序),其中包含该视频,这是来自托管视频的各个站点的嵌入链接。然而问题是,如果用户点击播放/暂停以外的任何地方,或者在视频内部,他们会被带到嵌入视频网站。反正我可以阻止这个吗?
我的目标是让用户观看我网站上的嵌入视频,而不是让他们仅仅因为点击视频播放器而离开。
我正在寻找一种方法(可能使用 jQuery),在显示模式时禁用所有链接。或者,如果有另一种更简单的方法,我很想知道。谢谢!
首先让我解释一下问题:
在整个网站构建的某些页面上,用户可以单击视频的缩略图,然后显示一个模式(引导程序),其中包含该视频,这是来自托管视频的各个站点的嵌入链接。然而问题是,如果用户点击播放/暂停以外的任何地方,或者在视频内部,他们会被带到嵌入视频网站。反正我可以阻止这个吗?
我的目标是让用户观看我网站上的嵌入视频,而不是让他们仅仅因为点击视频播放器而离开。
我正在寻找一种方法(可能使用 jQuery),在显示模式时禁用所有链接。或者,如果有另一种更简单的方法,我很想知道。谢谢!
由于您尚未共享代码或结构的片段,我们只能提供有限的建议。尝试这样的事情(假设你的引导模式被包装在一个带有 id 的容器中#myModal
):
$('#myModal a').on('click', function(e) {
e.preventDefault();
/* your own logic to handle the click if you want */
return false;
});
false
这将阻止对所有锚标记的默认操作(在这种情况下为导航),如果您想提醒用户他们即将离开网站(在这种情况下不要返回),您可以添加自己的自定义处理程序.
更新:由于您的场景中的嵌入式播放器可能拥有自己的导航链接,因此上述代码段将不起作用。您可以做的最好的事情是检测导航并提示用户确认他们是否真的想离开您的网站。
首先设置以下事件处理程序以检测用户何时单击视频中的链接并即将离开页面:
window.onbeforeunload = function() {
if (window.isPlayingVideo) {
return "Are you sure you want to stop playing the video and leave the website?";
}
}
然后,每当用户单击视频缩略图以打开模态播放器并开始播放视频时,设置以下标志:
window.isPlayingVideo = true;
这将提示用户确认是否要离开页面(确切的 UI 取决于浏览器)。请注意,您仍然无法从代码中禁用导航。你所能做的就是给用户一个选择。