微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Youtube 嵌入的视频突然停止工作

如何解决Youtube 嵌入的视频突然停止工作

我在网站上有一个嵌入式 YouTube 播放器

这是它的设置方式。

  • 标记中存在 Youtube 嵌入的 iFrame
  <iframe 
      id="video_1"
      class="yt-video"
      data-modal-id="vid_modal_1"
      src="https://www.youtube.com/embed/Fh1a2K9ZgNA?enablejsapi=1&html5=1&origin=http://d.mydomain"
      allowfullscreen=""
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      width="675"
      height="380"
      frameborder="0">
  </iframe>
  • Youtube iframe API 在头部加载
  • window.onload 事件中,使用此代码创建了 YT 个玩家
  // --- file2.js ---
  //
  // --- closure code unrelated to this feature ----
  // ...
  //
  window.isYouTubeIframeAPIReady = false;

  window.onYouTubeIframeAPIReady = function () {
      window.isYouTubeIframeAPIReady = true;
  };

  function onPlayerReady() {
      alert( 'player is ready' );
  }

  $(window).on('load',function () {
      //
      // some polling happens here and code only proceeds if
      // window.isYouTubeIframeAPIReady is true
      //
      if( window.isYouTubeIframeAPIReady == true ){
          var p = new YT.Player(id,{
              'events': {
                  'onReady': onPlayerReady,'onStateChange': onPlayerStateChange
              }
          });
      }
  }

  // --- closure code unrelated to this feature ----
  // ...
  //

其中 id 是 Youtube iFrame 的 ID。

问题

onReady 事件回调仅在页面硬刷新 (Ctrl+F5) 时触发。使用浏览器刷新图标或按 F5 键的正常刷新不会触发 onReady 事件。

附加信息

Youtube iframe API javascript 文件file2.js 之后加载。

更新

这是显示 p 的 javascript 控制台的屏幕截图(运行时返回 new YT.Player(...)

p,when it works

对象还有很多方法...截图不完整

这里它在服务器上,它没有

p,when it doesn't

屏幕截图显示了完整的对象。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。