“捕捉”嵌入式 YouTube 视频中的错误

Question

我在我的网站中嵌入了一个 YouTube 视频，如下所示：

<iframe src="https://www.youtube.com/embed/C_JiP-j2FwM?autoplay=1&loop=1" frameborder="0" allowfullscreen width="100%" height="100%"></iframe>

它运行良好，但在我的工作计算机上，当我使用工作电子邮件登录 Google Chrome 时，出现以下错误：

An error occurred. Please try again later. (Playback ID: TMjivVwHlyxtQxnL) Learn More

This is expected。这是因为我的工作邮箱没有访问 YouTube 的权限。这是我尝试使用我的工作电子邮件访问它时遇到的错误：

根据 DOM 检查器/网络标签请求 https://www.youtube.com/youtubei/v1/player?key=C_JiP-j2FwM 返回此错误：

{
  "error": {
    "code": 403,
    "message": "The caller does not have permission",
    "errors": [
      {
        "message": "The caller does not have permission",
        "domain": "global",
        "reason": "forbidden"
      }
    ],
    "status": "PERMISSION_DENIED"
  }
}

该代码有效，因为我可以在隐身模式下很好地播放嵌入的视频（因为我在隐身模式下没有登录我的工作电子邮件）。

这里是代码的全貌，因此人们可以重现“问题”并看到它很可能对他们有用：https://jsfiddle.net/p3jz62uL/

我希望能够做的是“捕获”错误并在错误发生时更改行为。也许我会一起删除视频，或者我会用图像 IDK 替换它。

Answer 1

您可以尝试使用 youtube iframe api 来检测此问题并做出相应的响应。查看可用的错误代码 https://developers.google.com/youtube/iframe_api_reference#onError 为了让你开始，

<iframe id="yt-video-iframe" width="630" height="354" src="https://www.youtube.com/embed/C_JiP-j2FwM?autoplay=1&loop=1&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe> <!-- note the &enablejsapi=1 --> 


<script type="text/javascript">
  var tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    // this function will be called automatically !
    function onYouTubeIframeAPIReady() {
            console.log("this func is automatically called");
        player = new YT.Player('yt-video-iframe', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange,
                'onError': onPlayerError,
            }
        });
    }
    
    function onPlayerReady(event) {
        console.log('video is ready');
    }

    function onPlayerStateChange(event) {
        console.log(event.data);
    }
    function onPlayerError(event) {
        console.log(event.data);
    }    
</script>

我不能将它作为代码片段包含在此处，因为它是沙盒化的，但您可以查看 jsfiddle https://jsfiddle.net/puejzy6o/1/ 示例

请注意，您的 iframe url 需要查询参数 &enablejsapi=1 并且 onYouTubeIframeAPIReady被自动调用

注意：我实际上并没有尝试测试您的特定错误是否由 api 处理，但它应该是。

“捕捉”嵌入式 YouTube 视频中的错误

“catching” errors in embedded youtube videos

javascript

youtube

youtube-api