如何对Bilibili嵌入iframe视频实现跳转至指定时间点功能

Bilibili iframe播放器控制实现方案 #

Bilibili未公开官方的iframe API，但播放器内置了跨域postMessage通信能力，可通过该方式实现类似YouTube API的控制效果，具体实现如下：

1. 基础跳转控制实现 #

你可以直接用以下代码实现点击按钮跳转到指定时间点的需求：

// 获取iframe元素
const bilibiliPlayer = document.getElementById('player')

// 封装seek跳转方法
function seekTo(seconds) {
  if (!bilibiliPlayer?.contentWindow) return
  bilibiliPlayer.contentWindow.postMessage(
    JSON.stringify({
      type: 'seek',
      time: seconds,
      play: true // 跳转后自动播放，不需要可以删掉
    }),
    '*'
  )
}

// 绑定按钮点击事件，示例为跳转至第10秒
document.getElementById('你的按钮ID').addEventListener('click', () => {
  seekTo(10)
})

2. 其他常用控制接口 #

除了跳转功能外，你还可以通过相同的通信逻辑实现更多控制能力：

• 播放视频

function playVideo() {
  bilibiliPlayer.contentWindow.postMessage(JSON.stringify({type: 'play'}), '*')
}

• 暂停视频

function pauseVideo() {
  bilibiliPlayer.contentWindow.postMessage(JSON.stringify({type: 'pause'}), '*')
}

• 调整音量

function setVolume(volumeValue) {
  // volumeValue取值范围0-100
  bilibiliPlayer.contentWindow.postMessage(JSON.stringify({type: 'volume', value: volumeValue}), '*')
}

3. 状态监听实现 #

如果需要获取视频播放进度、播放状态等信息，可以通过监听message事件获取播放器返回的数据：

// 发送查询当前播放进度的请求
function getCurrentTime() {
  bilibiliPlayer.contentWindow.postMessage(JSON.stringify({type: 'getCurrentTime'}), '*')
}

// 监听播放器返回的消息
window.addEventListener('message', (event) => {
  try {
    const data = JSON.parse(event.data)
    // 当前播放进度回调
    if (data.type === 'currentTime') {
      console.log('当前播放秒数：', data.time)
    }
    // 视频播放结束回调
    if (data.type === 'ended') {
      console.log('视频播放完毕')
    }
  } catch (err) {
    // 忽略非播放器返回的无效消息
  }
})

注意事项 #

• 建议在iframe的load事件触发后再调用控制方法，避免指令发送失败
• 所有指令发送前建议先判断iframe元素和contentWindow是否存在，避免报错

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