如何在Angular项目中移除Facebook嵌入视频暂停/结束时的推荐视频？

核心限制说明 #

Facebook官方视频嵌入组件没有提供官方参数直接禁用推荐视频，这是平台默认行为，用于引导用户浏览更多内容。我们只能通过前端交互或样式遮挡的方式规避。

方法一：自动循环播放（覆盖结束时的推荐） #

通过监听视频暂停、结束事件，立刻重启播放，不让推荐内容有展示机会。可以优化现有逻辑，同时兼容用户全屏操作：

修改TS代码的事件监听与重启逻辑 #

initializeFB() {
  const initParams: any = {
    appId: '317808808064170',
    xfbml: true,
    version: 'v20.0'
  };
  FB.init(initParams);
  FB.Event.subscribe('xfbml.ready', (msg: any) => {
    if (msg.type === 'video') {
      this.myVideoPlayer = msg.instance;
      this.myVideoPlayer.play();

      this.myVideoPlayer.subscribe('paused', () => {
        // 排除用户全屏暂停的情况，保留用户主动控制权限
        if (!this.myVideoPlayer.isFullscreen()) {
          this.restartVideo();
        }
      });
      this.myVideoPlayer.subscribe('finishedPlaying', () => {
        this.restartVideo();
      });
    }
  });
  FB.XFBML.parse();
}

restartVideo() {
  if (this.myVideoPlayer && !this.myVideoPlayer.isPlaying()) {
    this.myVideoPlayer.seek(0);
    // 加小延迟避免seek与play的时序冲突
    setTimeout(() => {
      this.myVideoPlayer.play();
    }, 100);
  }
}

方法二：样式遮挡推荐区域 #

通过绝对定位的遮罩层覆盖视频结束后出现的推荐内容区域，同时不影响播放控件交互：

1. 修改HTML结构 #

<div class="fb-video-wrapper">
  <div #videoContainer id="myIframe" class="fb-video" 
       data-href="https://www.facebook.com/facebook/videos/1173373513689916/" 
       data-width="500" 
       data-show-text="false"
       data-autoplay="true"
       data-allowfullscreen="true"
       data-controls="true"
       data-show-captions="false"
       data-show-post="false"
       data-show-social-context="false"
       data-show-metadata="false"
       data-show-adaptive-playback="false"
       data-autoplay-metadata="false"></div>
  <!-- 遮罩层 -->
  <div class="fb-video-overlay"></div>
</div>

2. 添加SCSS样式 #

.fb-video-wrapper {
  position: relative;
  width: 500px;
  height: auto;
}

.fb-video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%; // 根据实际推荐区域高度调整
  background-color: #000; // 与视频背景色保持一致
  pointer-events: none; // 不干扰播放控件点击
}

// 全屏时隐藏遮罩，避免影响全屏体验
.fb-video-wrapper:has(iframe[allowfullscreen]) .fb-video-overlay {
  display: none;
}

方法三：用Graph API获取原生视频源（彻底解决） #

如果你的应用具备Facebook Graph API权限，可以直接获取视频原始播放地址，用原生<video>标签播放，完全控制播放行为，无推荐视频：

示例代码 #

<video #nativeVideo width="500" autoplay controls>
  <source [src]="videoSource" type="video/mp4">
</video>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  videoSource: string;

  ngOnInit() {
    // 建议通过后端代理请求API，避免前端跨域与密钥泄露
    fetch('https://graph.facebook.com/v20.0/1173373513689916?fields=source&access_token=YOUR_ACCESS_TOKEN')
      .then(res => res.json())
      .then(data => {
        this.videoSource = data.source;
      });
  }
}

此方案需要处理API权限、视频源有效期及跨域问题，是最彻底的解决方案。

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