在视频网站iframe中实现JS全屏播放并解决跨域问题

问题分析

在iframe中实现全屏播放视频并解决跨域问题需要考虑以下几个关键点：

1. 现代浏览器的全屏API限制
2. 跨域安全策略
3. 不同视频平台的嵌入方式差异

解决方案

1. 基本全屏实现方法

// 获取iframe元素
const iframe = document.getElementById('video-iframe');

// 全屏函数
function requestFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) { /* Safari */
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) { /* IE11 */
        element.msRequestFullscreen();
    }
}

// 调用全屏
requestFullscreen(iframe);

2. 解决跨域问题

方法一：使用postMessage通信

父页面代码：

// 监听来自iframe的消息
window.addEventListener('message', (event) => {
    // 验证消息来源
    if (event.origin !== 'https://video-website.com') return;

    if (event.data === 'requestFullscreen') {
        const iframe = document.getElementById('video-iframe');
        requestFullscreen(iframe);
    }
});

iframe内代码：

// 向父页面发送全屏请求
window.parent.postMessage('requestFullscreen', 'https://your-website.com');

方法二：使用allowfullscreen属性

<iframe 
    src="https://video-website.com/embed/..." 
    allowfullscreen
    allow="autoplay; fullscreen"
    frameborder="0">
</iframe>

3. 针对不同视频平台的特定解决方案

YouTube

<iframe 
    id="ytplayer" 
    type="text/html" 
    width="640" 
    height="360"
    src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
    frameborder="0"
    allowfullscreen
    allow="autoplay; fullscreen">
</iframe>

<script>
// 使用YouTube API控制全屏
function onYouTubeIframeAPIReady() {
    const player = new YT.Player('ytplayer', {
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
    // 进入全屏模式
    const iframe = document.getElementById('ytplayer');
    requestFullscreen(iframe);
}
</script>

Vimeo

<iframe 
    src="https://player.vimeo.com/video/123456789" 
    width="640" 
    height="360" 
    frameborder="0" 
    allow="autoplay; fullscreen" 
    allowfullscreen>
</iframe>

<script>
// 使用Vimeo API
const iframe = document.querySelector('iframe');
const player = new Vimeo.Player(iframe);

player.on('play', function() {
    // 全屏处理
    iframe.requestFullscreen();
});
</script>

注意事项

1. 跨域限制：确保视频网站允许被iframe嵌入（检查X-Frame-Options和Content-Security-Policy）
2. 用户交互要求：全屏API通常需要由用户手势（如点击）触发
3. 移动设备差异：移动浏览器可能有不同的全屏行为
4. 权限控制：某些浏览器可能需要额外的权限设置

最佳实践

1. 优先使用视频平台提供的原生全屏按钮
2. 如果必须自定义全屏控制，确保提供良好的用户体验
3. 测试在不同浏览器和设备上的兼容性
4. 处理全屏状态变化事件：

document.addEventListener('fullscreenchange', exitHandler);
document.addEventListener('webkitfullscreenchange', exitHandler);
document.addEventListener('mozfullscreenchange', exitHandler);
document.addEventListener('MSFullscreenChange', exitHandler);

function exitHandler() {
    if (!document.fullscreenElement && !document.webkitIsFullScreen && 
        !document.mozFullScreen && !document.msFullscreenElement) {
        console.log('已退出全屏模式');
    }
}

通过以上方法，您可以在遵守浏览器安全策略的前提下，实现在iframe中控制视频全屏播放的功能。