如何在第三方网站点击链接时打开指定尺寸的视频弹窗

需求说明 #

自有网站通过按钮可触发指定宽高的视频弹窗播放器，现在需要让第三方用户网站仅粘贴一段链接，访客点击该链接后，打开我方渲染的指定尺寸视频弹窗。

解决方案 #

核心是通过我方中转页面触发弹窗（规避浏览器拦截机制），具体分两步实现：

1. 我方准备中转跳转页面 #

创建名为open-video-popup.html的页面，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>打开视频播放器...</title>
    <script>
        window.addEventListener('load', function() {
            // 我方视频播放器页面的地址
            const videoPlayerURL = 'https://我方域名/problem.html';
            // 弹窗预设宽高
            const windowWidth = 200;
            const windowHeight = 300;
            // 计算弹窗居中位置
            const windowX = (window.innerWidth - windowWidth) / 2;
            const windowY = (window.innerHeight - windowHeight) / 2;

            // 打开指定尺寸的视频弹窗
            window.open(
                videoPlayerURL,
                'VideoPlayerWindow',
                `width=${windowWidth}, height=${windowHeight}, left=${windowX}, top=${windowY}, resizable=no, scrollbars=no`
            );

            // 自动关闭中转页面
            window.close();
        });
    </script>
</head>
<body>
    <p>正在加载视频播放器...</p>
</body>
</html>

2. 提供给第三方用户的链接代码 #

用户只需在其网站插入以下链接即可：

<a href="https://我方域名/open-video-popup.html" target="_blank">打开视频播放器</a>

补充：视频播放器页面（problem.html）示例 #

确保我方problem.html包含完整的视频播放逻辑，示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>视频播放器</title>
    <style>
        body { margin: 0; padding: 0; }
        video { width: 100%; height: 100%; object-fit: contain; }
    </style>
</head>
<body>
    <video controls autoplay>
        <source src="https://我方域名/目标视频文件.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
    </video>
</body>
</html>

注意事项 #

• 浏览器弹窗拦截规则：通过用户主动点击链接触发的中转页面弹窗，一般不会被拦截；若出现拦截，可引导用户手动允许弹窗。
• 弹窗参数可按需调整：修改window.open的第三个参数，可控制弹窗是否允许缩放、显示滚动条等。

内容的提问来源于stack exchange，提问作者Aviato