Angular中通过Ok.ru视频ID加载视频失败问题排查

1. 确认Ok.ru嵌入URL格式是否正确 #

Ok.ru的官方嵌入格式为 https://ok.ru/videoembed/{VIDEO_ID}，如果你的iframe使用视频普通播放页面URL（比如https://ok.ru/video/{VIDEO_ID}），就会触发“Video has not been found”错误。

• 检查拼接的src是否符合规范，示例：

  // 正确写法
  const videoId = '123456789';
  const iframeSrc = `https://ok.ru/videoembed/${videoId}`;
  

2. 校验路由参数的获取逻辑 #

确保在movie-widget.component.ts中正确拿到路由携带的视频ID：

• 避免直接用activatedRoute.snapshot.paramMap.get('videoId')（动态跳转场景下快照可能无法获取最新参数），应该订阅paramMap：

  constructor(private route: ActivatedRoute) {}
  
  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      const okVideoId = params.get('okVideoId'); // 需与路由定义的参数名一致
      if (okVideoId) {
        this.loadOkVideo(okVideoId);
      }
    });
  }
  

• 核对路由配置的参数名，比如路由路径是否为/movie/:okVideoId。

3. 检查视频ID的有效性 #

• 直接在浏览器中访问https://ok.ru/videoembed/{你的视频ID}，如果页面同样提示找不到视频，说明ID本身无效（可能映射错误、视频被删除或设为私有）。
• 手动核对TMDB与Ok.ru的映射数据，确认几个影片的ID匹配情况。

4. 排查Renderer2的iframe插入逻辑 #

确保插入过程没有遗漏必要属性或DOM元素问题：

• 检查是否正确设置iframe的src及必要属性：

  loadOkVideo(videoId: string): void {
    const iframe = this.renderer.createElement('iframe');
    this.renderer.setAttribute(iframe, 'src', `https://ok.ru/videoembed/${videoId}`);
    this.renderer.setAttribute(iframe, 'width', '100%');
    this.renderer.setAttribute(iframe, 'height', '400');
    this.renderer.setAttribute(iframe, 'frameborder', '0');
    this.renderer.setAttribute(iframe, 'allow', 'autoplay; fullscreen');
    // 确保目标容器已渲染到DOM（比如通过ViewChild获取）
    const container = this.videoContainer.nativeElement;
    this.renderer.appendChild(container, iframe);
  }
  

• 如果容器是动态生成的，建议在ngAfterViewInit中执行插入逻辑，而非ngOnInit。

5. 检查浏览器CSP或跨域限制 #

• 打开浏览器控制台（F12），查看是否有CSP报错，比如Refused to frame 'https://ok.ru/' because it violates the following Content Security Policy directive。若有，需在Angular的angular.json或后端配置中，将https://ok.ru添加到frame-src的允许列表。
• 确认Ok.ru视频的嵌入权限：部分私有或版权视频可能禁止外部嵌入，需检查视频的嵌入设置。

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