如何通过Dailymotion iframe获取视频播放当前进度？

直接操作iframe元素拿不到视频进度，因为浏览器的跨域限制，必须用Dailymotion官方提供的Player API来实现，具体步骤如下：

1. 调整iframe配置 #

首先要在iframe的src参数里添加&api=1，开启API支持，修改后的iframe代码：

<iframe id="myVideo" style="width:300px;height:300px;position:absolute;left:100px;top:0px;overflow:hidden"
        frameborder="0" type="text/html" 
        src="https://geo.dailymotion.com/player/{Player_id}.html?video=x84sh87&startTime=10&api=1"
        allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>
</iframe>

2. 用postMessage实现跨域通信 #

通过postMessage和iframe内的播放器交互，获取当前播放进度。替换你的JS代码为：

// 监听播放器返回的消息
window.addEventListener('message', function(event) {
    // 验证消息来源，确保安全
    if (event.origin.startsWith('https://geo.dailymotion.com')) {
        const data = JSON.parse(event.data);
        // 处理获取到的当前时间
        if (data.type === 'get' && data.params[0] === 'currentTime') {
            alert('当前播放进度：' + data.data + '秒');
        }
    }
});

function getCurTime() {
    const iframe = document.getElementById('myVideo');
    // 向播放器发送请求，获取当前时间
    iframe.contentWindow.postMessage(JSON.stringify({
        'method': 'get',
        'params': ['currentTime']
    }), 'https://geo.dailymotion.com');
}

3. 可选：实时监听进度 #

如果需要实时获取播放进度，而不是点击按钮才查询，可以在页面加载完成后，给播放器添加timeupdate事件监听：

window.addEventListener('load', function() {
    const iframe = document.getElementById('myVideo');
    // 请求监听timeupdate事件
    iframe.contentWindow.postMessage(JSON.stringify({
        'method': 'on',
        'params': ['timeupdate', function(currentTime) {
            console.log('实时播放进度：', currentTime + '秒');
        }]
    }), 'https://geo.dailymotion.com');
});

关键注意点 #

• 必须开启api=1，否则播放器不会响应API请求
• 一定要验证消息的origin，避免恶意网站的消息干扰
• 替换代码中的{Player_id}为你实际的Dailymotion播放器ID

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