Youtube 嵌入 iframe - 事件不在本地触发 [英] Youtube Embed Iframe - Events Not Firing In Local

查看：17
本文介绍了Youtube 嵌入 iframe - 事件不在本地触发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚注意到，当我在本地测试时，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/

<身体><!-- 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('玩家', {高度:'190'，宽度:'140'，视频 ID:'M7lc1UVf-VE'，事件:{'onReady': onPlayerReady,'onStateChange': onPlayerStateChange}});}//4. 当视频播放器准备就绪时，API 将调用此函数.函数 onPlayerReady(事件){console.log('准备好');event.target.playVideo();}//5. API 在玩家状态改变时调用该函数.//该函数表示在播放视频时(state=1)，//玩家应该播放六秒钟然后停止.变量完成 = 假；函数 onPlayerStateChange(event) {console.log('更改');if (event.data == YT.PlayerState.PLAYING && !done) {设置超时(停止视频，6000)；完成 = 真;}}功能停止视频(){player.stopVideo();}

解决方案

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

另见:

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

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 方案完全匹配.例如

</iframe>

<块引用>

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

如果您使用 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.

这篇关于Youtube 嵌入 iframe - 事件不在本地触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆