javascript-Youtube能否与Turbolinks完美搭配？

2019-11-22 20:36:58 阅读：256 来源： 互联网

标签：turbolinks ruby-on-rails-4 youtube javascript jquery

我正在开发一个Rails4应用程序,它将能够在我的应用程序页面中嵌入和播放Youtube上托管的视频.我需要了解视频播放器的一些事件,因此我要通过API调用来创建Youtube对象：

<script id="video_script" ></script>
<div id="player"></div>
<%= javascript_tag do %>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var scriptTag = $("script#video_script");
  scriptTag.parent()[0].insertBefore(tag, scriptTag[0]);

  var youtube_player;
  function onYouTubeIframeAPIReady() {
    youtube_player = new YT.Player('player', {
      videoId: <%= @video.id %>,
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    ....
  }

  function onPlayerStateChange(event) {
     ....
  }    
<% end %>

当首次加载页面时,此方法效果很好,但是当用户在启用了涡轮链接的页面之间导航时,该方法不起作用,因为文档就绪事件不会触发,因此,Youtube代码不知道发出回调到onYouTubeIframeAPIReady().

因此,我想知道是否有任何解决方法,除了document.ready事件外,是否可以使Youtube API调用page：change事件的API Ready方法以使其与Turbolink一起使用？我曾尝试浏览从Youtube下载的api脚本,但在其中找不到能解决该问题的任何内容,而且我还有些犹豫,无法运行本地版本的Youtube脚本.

解决方法:

Turbolinks仅重新加载标题和正文的内容(因此请注意不要使用过多的脚本来污染头部).为了避免这种情况,我检查YT对象是否存在.另外,在turbolinks’page：load’事件中,我还对onYouTubeIframeAPIReady进行了其他调用.

<script type="text/javascript">
/* load youtube js api */
var reloadYoutube = function () {
   /* if YT already initialized return */
   if (window.YT) { return; };
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
};
reloadYoutube();
$(document).on('page:load', function() {
    onYouTubeIframeAPIReady && onYouTubeIframeAPIReady();
});

/* youtube callback */
var ytplayer = null;
function onYouTubeIframeAPIReady() {
    // it is important to return when window.ytplayer 
    // is already created - because you will be missing
    // certain methods like getCurrentTime
    if (!window.YT || window.ytplayer) {
        return;
    }
    ytplayer = new YT.Player('main_player_div', {
        height: '315',
        width: '560',
        videoId: getVideoId(),
        events: {
            'onReady': onPlayerReady
        }
    });
}

标签：turbolinks,ruby-on-rails-4,youtube,javascript,jquery
来源： https://codeday.me/bug/20191122/2062425.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-Youtube能否与Turbolinks完美搭配？