更改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"。由于这是Google，因此可能还有其他方案。 所以，一个简单的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. 不加载外部依赖项。 如果跨域安全性与目标页面不在同一个域中，则会被跨域安全性阻止。 另外，flash文件加载的对象的路径通常在文件本身内固定（可能给出404错误，即使是相同的域）。
      

   然后，它可以正常工作。请参阅this Fiddle。

   3. 回复：

        

      我省略了flashvars的一些属性和内容，因为它是一个包含设置的长字符串，这是否会影响视频？

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

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

      因此，名义上，要将一个Youtube视频更改为另一个，您必须更改参数和/或flashvars 。即使您将src更改为旧式直接<embed>链接（EG：http://www.youtube.com/v/uY3LAFJbKyY?version=3&hl=en_US&rel=0），它也只会在 Play 按钮。然后参数中定义的视频将返回并播放。

   4. 然而， Youtube仍保留旧系统的各个方面（暂时）。因此，如果您可以找到旧式嵌入链接，则可以将src交换为该链接，并将<embed>替换为没有flashvars的链接。请参阅答案末尾的代码。

      以下是查找旧式嵌入链接的一种方法：

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

      4. textarea现在将显示<object>...<embed>... HTML。将其复制并仅提取<embed> src属性。 （EG：

         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
   );