Youtube 嵌入 iframe - 事件未在本地触发-前端问题

Youtube Embed Iframe - Events Not Firing In Local(Youtube 嵌入 iframe - 事件未在本地触发)

本文介绍了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/

<!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.

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

问题描述

基础教程推荐