如何使用JavaScript获取iframe嵌入视频的当前播放时长及其他元数据？

可行性前提 #

浏览器同源策略是无法绕过的硬性限制：只有当iframe的src与父页面的协议、域名、端口三者完全一致时，你才可以直接操作iframe内部DOM获取视频数据。如果是跨域的第三方视频iframe，必须对方开放了基于postMessage的通信接口才能拿到对应数据，否则没有任何实现可能。

同源场景实现步骤 #

基础DOM获取 #

首先拿到iframe节点，等待其加载完成后定位内部的video元素：

// 替换为你实际的iframe选择器
const videoIframe = document.querySelector('#video-iframe')

videoIframe.addEventListener('load', () => {
  // 获取iframe内部文档对象
  const innerDoc = videoIframe.contentDocument || videoIframe.contentWindow.document
  // 定位内部的video标签
  const innerVideo = innerDoc.querySelector('video')
  if (!innerVideo) return console.warn('未在iframe内找到video元素')
  
  // 所有数据获取和事件监听都基于innerVideo实现
})

核心元数据获取 #

• 当前播放时长：innerVideo.currentTime，返回值为秒级数字，可自行格式化为时分秒结构
• 视频总时长：innerVideo.duration，返回值为秒级数字
• iframe源地址：直接读取iframe属性即可 videoIframe.src，如果需要获取video标签的实际播放源为 innerVideo.currentSrc
• 视频标题：优先取iframe页面的标题 innerDoc.title，也可以根据iframe内部页面的实际DOM结构，定位对应标题元素取文本值

用户行为追踪 #

直接给内部video元素绑定原生媒体事件即可覆盖常见操作场景：

// 播放触发
innerVideo.addEventListener('play', () => {
  console.log('用户点击播放，当前进度：', innerVideo.currentTime)
})

// 暂停触发
innerVideo.addEventListener('pause', () => {
  console.log('用户点击暂停，当前进度：', innerVideo.currentTime)
})

// 进度跳转触发
innerVideo.addEventListener('seeked', () => {
  console.log('用户跳转播放进度，跳转后进度：', innerVideo.currentTime)
})

// 播放完成触发
innerVideo.addEventListener('ended', () => {
  console.log('视频播放完毕')
})

// 实时进度上报，按需控制上报频率避免性能损耗
let lastReportTs = 0
innerVideo.addEventListener('timeupdate', () => {
  const now = Date.now()
  // 示例为每1秒上报一次
  if (now - lastReportTs >= 1000) {
    console.log('实时播放进度：', innerVideo.currentTime)
    lastReportTs = now
  }
})

跨域场景实现说明 #

如果嵌入的是第三方服务商的跨域视频，需要先确认服务商是否对外提供了播放器事件通知接口：

• 绝大多数视频云服务商都会提供基于postMessage的消息回调机制，你需要按照服务商文档的约定，在父页面监听message事件，过滤可信来源后解析对应字段即可拿到播放时长、操作事件等数据
• 通用跨域监听代码结构参考：

window.addEventListener('message', (event) => {
  // 必须先校验消息来源，避免恶意数据
  if (event.origin !== '替换为你的视频服务商的官方域名') return
  const eventData = event.data
  // 按照服务商约定的字段规则解析事件类型、播放进度、视频标题等信息
  if (eventData.event === 'play') {
    console.log('跨域视频触发播放', eventData.currentTime)
  }
})

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