javascript - 更改 YouTube 中嵌入的 Flash 对象的来源

Question

我想更改 YouTube 视频的源 swf 文件。视频是<embed>元素。

它是如何构建的:

<embed width="640" id="movie_player-flash" height="390"
       tabindex="0" type="application/x-shockwave-flash"
       src="http://s.ytimg.com/yt/swfbin/watch_as3-vfl07wZSq.swf" flasvars="...">

(示例可以在 Google's YouTube channel 上找到)

我遗漏了一些属性和 flashvars 的内容因为它是一个带有设置的长字符串，这会影响视频吗？

---

我尝试过的:

1. 我尝试通过简单地更改 src属性，但这不会影响任何东西:

   document.getElementById('movie_player-flash').src = url;
   

2. 我还尝试克隆原始文件，更改源文件并重新附加它。再一次:没有:

   var player = document.getElementById('movie_player-flash');
   var playerClone = player.cloneNode(true);
   playerClone.setAttribute('src', url);
   
   player.parentNode.replaceChild(playerClone, player);
   

有谁知道如何完成更改视频源？

Answer 1

这里有很多问题:

1. Flash 视频并不总是在 <embed id="movie_player-flash" 中, 有时在 <embed id="movie_player" 中.由于这是谷歌，因此可能还有其他方案。所以，一个简单的 document.getElementById('movie_player-flash')马上就出来了。使用类似的东西:

   var flashEmbed  = document.querySelectorAll ("#movie_player-flash, #movie_player");
   if (flashEmbed.length) {
       flashEmbed  = flashEmbed[0];
       // DO THE SWITCH HERE.
   }
   

   
   

2. 只是改变src属性确实有效，但仅在极少数情况下有效。如果您要切换到其他视频:

   1. 不需要参数。(虽然您可以通过创建适当的 <object> 和 <param> 标签来恢复这些。)
   2. 不加载任何外部依赖项。如果它们与目标页面不在同一个域中，它们将被跨域安全阻止。此外，闪存文件加载的对象路径通常在文件本身内是固定的(即使是同一域，也可能会出现 404 错误)。
      

   然后，它就可以工作了。参见this Fiddle .

3. 回复:

   I left out some attributes and the content of flashvars as it is a long string with settings, does this affect the video at all?

   在现代 Youtube 上，flashvars是一切!此外，如果您比较 src属性，您会发现它对于大多数 Flash 视频都是相同的。例如，无论我尝试什么视频，目前都是 src是http://s.ytimg.com/yt/swfbin/watch_as3-vfl07wZSq.swf .

   那是因为flash对象，由<embed>加载标签，不是视频。它是一个加载播放器(和其他东西)的 shell 对象，播放器加载实际的视频文件。

   因此，名义上，要将一个 Youtube 视频更改为另一个，您必须更改参数和/或 flashvars 。即使你改变了 src旧式，直接<embed>链接(例如:http://www.youtube.com/v/uY3LAFJbKyY?version=3&hl=en_US&rel=0)，它只会在按下播放 按钮之前显示为有效。然后参数中定义的视频将返回并播放。

4. 但是，Youtube 仍然保留旧系统的某些方面(目前)。所以，如果你能找到旧式嵌入链接，你可以交换 src为此并替换 <embed>一个没有flashvars的.请参阅答案末尾的代码。

   这是查找旧式嵌入链接的一种方法:

   1. 在视频的 Youtube 页面上，按分享按钮。
   2. 按嵌入按钮。
   3. 选中使用旧的嵌入代码复选框。

   4. 文本区域现在将显示 <object>...<embed>... HTML。将其复制出来并仅提取 <embed> src属性。 (例:

      http://www.youtube.com/v/uY3LAFJbKyY?version=3&hl=en_US&rel=0
      

      )
      丢弃其他一切。

5. Flash 元素并不总是立即加载。它也可以通过 AJAX 替换。所以，我们可能需要等待(右)<embed>。出现。
   为简单起见，我将用 setInterval() 来展示它, 但要获得可靠、实用的解决方案，您需要使用 the waitForKeyElements() utility ，如图this answer .

综上所述，这是一个完整的 Greasemonkey 脚本，它可以替换大多数视频:

// ==UserScript==
// @name        _Youtube, replace flash video
// @description Replaces most videos with the Greatest Video Of All Time!
// @include     http://www.youtube.com/watch*
// @include     http://www.youtube.com/user*
// @grant       none
// ==/UserScript==

var embedChkIntval  = setInterval ( function () {
        var flashEmbed  = document.querySelectorAll ("#movie_player-flash, #movie_player");
        if (flashEmbed.length) {
            var playerClone = flashEmbed[0].cloneNode (true);
            playerClone.src = 'http://www.youtube.com/v/dQw4w9WgXcQ?version=3&hl=en_US&rel=0';
            playerClone.removeAttribute ("flashvars");

            flashEmbed[0].parentNode.replaceChild (playerClone, flashEmbed[0]);
            clearInterval (embedChkIntval);
        }
    },
    150
);