Youtube 嵌入 iframe - 事件未在本地触发

2022-01-19 00:00:00 youtube youtube-api javascript

我刚刚注意到，当我在本地进行测试时，Youtube 事件(onReady、onStateChange)不再触发，但是当我将代码上传到 JsFiddle.我决定从 Youtube Player API 复制并粘贴代码，我可以在其中验证它确实不起作用.还有其他人有这个问题吗?此问题出现在 Chrome、Firefox、IE、Safari 和 Opera 上.

EDIT - 当我在本地 console.log(player); 时，我发现它缺少很多 Youtube 功能，例如 seekTo()、setVolume(), showVideoInfo() 存在于 JsFiddle 中.我不确定为什么会这样，但我相信这可能是我问题的根源.有什么想法吗?

http://jsfiddle.net/8ZmKx/

<!DOCTYPE html><html><身体><!-- 1. <iframe>(和视频播放器)将替换此 <div>标签.--><div id="播放器"></div><脚本>//2. 此代码异步加载 IFrame Player API 代码.var tag = document.createElement('script');tag.src = "https://www.youtube.com/iframe_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);//3. 这个函数创建一个<iframe>(和 YouTube 播放器)//API 代码下载后.var 播放器；函数 onYouTubeIframeAPIReady() {player = new YT.Player('player', {高度:'190'，宽度:'140'，videoId: 'M7lc1UVf-VE',事件:{'onReady': onPlayerReady,'onStateChange':onPlayerStateChange}});}//4. 当视频播放器准备好时，API 会调用这个函数.函数onPlayerReady(事件){console.log('准备好了');event.target.playVideo();}//5. 当播放器状态发生变化时，API 调用该函数.//函数表示在播放视频时(state=1)，//播放器应该播放六秒钟然后停止.var 完成 = 假；函数 onPlayerStateChange(事件) {console.log('改变');if (event.data == YT.PlayerState.PLAYING && !done) {设置超时(停止视频，6000)；完成=真；}}功能停止视频(){播放器.stopVideo();}</脚本></身体></html>

解决方案

目前看来 Youtube iframe API 已损坏，但我还没有看到官方确认.

另见:

在将 iframe 显式写入模板时，onReady 回调不会触发

YouTube API onPlayerReady 未触发

这里是修复:https://code.google.com/p/gdata-issues/issues/detail?id=5670#c6

这是上面链接中答案的直接引用:

<块引用>

快速解决方法是添加 origin=http://www.example.com (替换使用您的服务器的完整域；确保使用 http://或 https://适合您的站点)到播放器的 src= 属性iframe 元素.请确保 origin= 属性的值完全匹配主机域和 URL 方案.例如

<块引用>

我目前正在与工程团队合作，以确定是否origin= 将需要向前推进，或者这个新的要求可以恢复，但这是立即修复.道歉因为在此期间的中断和缺乏先进的沟通.

如果您使用 YT.Player() 构造函数创建 iframe 元素对你来说，这不是问题——这对你来说有点极端明确包含 iframe 元素的开发人员他们页面的 HTML.

我实施了上述修复，它对我有用.

I've just noticed that the Youtube events (onReady, onStateChange) are no longer firing when I am testing in my local, but works when I upload the code to JsFiddle. I've decided to copy and paste the code from Youtube Player API where I am able to verify that it indeed is not working. Is anyone else having this issue? This issue occurs on Chrome, Firefox, IE, Safari, and Opera.

EDIT - When I console.log(player); in my local, I see that it is missing a lot of Youtube functions such as seekTo(), setVolume(), showVideoInfo() which are present in JsFiddle. I am unsure why this is happening, but I believe this might be the root of my problem. Any ideas?

http://jsfiddle.net/8ZmKx/

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

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

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '190',
          width: '140',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        console.log('ready');
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        console.log('change');
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

解决方案

It appears that the Youtube iframe API is currently broken, though I've seen no official confirmation yet.

See also:

onReady callback not firing when having the iframe explicitly written inside a template

YouTube API onPlayerReady not firing

Edit: Here is the fix: https://code.google.com/p/gdata-issues/issues/detail?id=5670#c6

Here is a direct quote of the answer at the link above:

A quick fix is to add in the origin=http://www.example.com (replace with your servers full domain; make sure you use http:// or https:// as appropriate for your site) to the src= attribute of the player's iframe element. Please make sure that the origin= attribute's value exactly matches the host domain and URL scheme. E.g.

<iframe
  type="text/html"
  width="640"
  height="480"
  src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1&origin=https://www.example.com"
  frameborder="0">
</iframe>

I'm currently working with the engineering team to figure out whether origin= is going to be required moving forward or whether this new requirement can be reverted, but this is the immediate fix. Apologies for the breakage and lack of advanced communication in the meantime.

If you use the YT.Player() constructor to create the iframe element for you then this isn't be an issue—it's a bit of an edge case for developers who are explicitly including the iframe element as part of their page's HTML.

I implemented the fix above, and it worked for me.

相关文章