1

作者的笔记

我想我可以在受到评论的启发后自己实现它。感谢您的光临。

原始问题

例如，我想在页面中弹出嵌入的 YouTube 视频

https://www.udacity.com/course/viewer#!/c-ud037/l-1649018590/m-1659588540

看起来像这样

伊姆古尔

youtube html5 播放器作为 iframe 嵌入

<iframe data-ng-controller="videoPlayer" class="ng-scope" frameborder="0" allowfullscreen="1" title="YouTube video player" width="930" height="523" src="https://www.youtube.com/embed/OATi2nCjEoE?autoplay=1&amp;color=red&amp;controls=1&amp;rel=0&amp;showinfo=0&amp;fs=1&amp;theme=light&amp;wmode=opaque&amp;html5=1&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fwww.udacity.com" id="widget2"></iframe>

我希望播放器可以在带有 URL 的新窗口中弹出：

https://www.youtube.com/embed/OATi2nCjEoE?autoplay=1&color=red&controls=1&rel=0&showinfo=0&fs=1&theme=light&wmode=opaque&html5=1&enablejsapi=1&origin=https%3A%2F%2Fwww.udacity.com

伊姆古尔

感谢 JaromandaX，我的临时脚本如下：

// ==UserScript==
// @name         My Fancy New Userscript
// @namespace    http://your.homepage/
// @version      0.1
// @description  enter something useful
// @author       You
// @include        https://www.udacity.com/course/viewer*
// @grant        none
// ==/UserScript==


$(document).ready(function()
                  {
                      setTimeout(function(){

                          var button = document.createElement('button');
                          button.type = 'button';
                          button.appendChild(document.createTextNode('Pop Youtube'));
                          button.setAttribute("onclick", "window.open(document.getElementById('widget2').src, 'my video');")
                          document.querySelectorAll("[class=row-gap-small]")[0].appendChild(button)
                      }, 2000);
                  });

伊姆古尔

我的问题是，通过如图所示的按钮切换 youtube 播放器的内容后，iframesrc没有改变。因此，单击该按钮仍会将我带到上一课的 youtube 播放器。

4

1 回答 1

1

关于什么：

var ytVideoSrc = false;
$('.ng-scope').each(function () { // class may exist multiple time

    if ( $(this).data('ng-controller') == 'videoPlayer' ) // search for first player
    {
      ytVideoSrc = $(this).attr('src); // grab src and stop loop
      return false;
    }

});

if ( ytVideoSrc ) // src found, open pop-up
    window.open(ytVideoSrc, "my video"); // open new window with src.

编辑

为了防止播放器自动启动，只需修改该autoplayURL 中的参数：

https://www.youtube.com/embed/OATi2nCjEoE？自动播放=1 &color=red&controls=1&rel=0&showinfo=0&fs=1&theme=light&wmode=opaque&html5=1&enablejsapi=1&origin=https%3A%2F%2Fwww.udacity.com

 ytVideoSrc = ytVideoSrc.replace('autoplay=1', 'autoplay=0');

为了了解如何集成 YT 播放器，您可以在这里查看：https ://developers.google.com/youtube/player_parameters?hl=en

于 2015-10-11T07:25:22.433 回答