如何控制Odysee嵌入视频并记录播放进度？

核心限制说明 #

Odysee官方确实未提供公开的嵌入视频控制API，且浏览器跨域安全策略会阻止直接读取iframe内的视频播放状态，这是当前的主要障碍，但可以通过以下几种折中方案实现进度记录需求：

方案1：利用嵌入URL的start参数+本地存储 #

这是最易实现的方案，依赖Odysee嵌入链接原生支持的start参数（单位为秒）：

• 页面加载时，从localStorage读取当前视频的历史进度记录（用视频唯一ID作为存储键）
• 将读取到的进度值拼接到嵌入iframe的URL末尾，格式为?start=[进度值]，示例：

  <!-- 从第120秒开始播放的iframe示例 -->
  <iframe id="odysee-iframe" src="https://odysee.com/$/embed/your-video-id?start=120" width="640" height="360" frameborder="0" allowfullscreen></iframe>
  

• 进度保存：由于无法实时监听iframe内的播放状态，可通过用户手动触发（比如添加“保存进度”按钮）或页面卸载前触发保存逻辑，示例代码：

  // 保存进度到localStorage
  function saveProgress(videoId) {
    const userReportedProgress = prompt('请输入当前观看的秒数：');
    if (userReportedProgress) {
      localStorage.setItem(`odysee-video-${videoId}`, userReportedProgress);
    }
  }
  
  // 页面加载时自动设置嵌入URL的start参数
  window.addEventListener('load', () => {
    const videoId = 'your-video-id';
    const savedProgress = localStorage.getItem(`odysee-video-${videoId}`);
    const iframe = document.getElementById('odysee-iframe');
    if (savedProgress && iframe) {
      iframe.src += `?start=${savedProgress}`;
    }
  });
  

方案2：集成LBRY开源播放器（彻底解决跨域问题） #

Odysee基于LBRY协议开发，你可以直接使用开源的lbry-player替代iframe嵌入，这样就能完全控制播放状态并监听进度：

• 引入播放器库后，直接在页面中初始化播放器，示例代码：

  // 初始化播放器
  const player = new LBRYPlayer('#player-container', {
    streamUrl: 'lbry://your-video-id', // 替换为你的视频LBRY地址
    autoplay: false,
    controls: true
  });
  
  // 每秒自动保存播放进度
  setInterval(() => {
    if (!player.paused && player.currentTime > 0) {
      localStorage.setItem(`odysee-video-${player.streamId}`, player.currentTime.toString());
    }
  }, 1000);
  
  // 页面加载时恢复历史进度
  window.addEventListener('load', () => {
    const savedProgress = localStorage.getItem(`odysee-video-${player.streamId}`);
    if (savedProgress) {
      player.currentTime = parseFloat(savedProgress);
    }
  });
  

• 此方案无跨域限制，播放器直接运行在你的页面环境中，还能实现播放、暂停、快进等完整控制功能。

方案3：尝试postMessage通信（非官方，成功率低） #

Odysee的嵌入页面未公开postMessage接口，但可尝试发送请求获取播放进度：

• 在你的页面中向iframe发送消息：

  const iframe = document.getElementById('odysee-iframe');
  iframe.contentWindow.postMessage({ type: 'getCurrentTime' }, 'https://odysee.com');
  

• 监听iframe返回的消息：

  window.addEventListener('message', (event) => {
    if (event.origin === 'https://odysee.com' && event.data.type === 'currentTime') {
      localStorage.setItem(`odysee-video-${videoId}`, event.data.value);
    }
  });
  

• 注意：此方案依赖Odysee嵌入页面的内部实现，官方未提供支持，大概率无法正常工作，仅作为备选尝试。

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