Youtube Javascript API - 禁用相关视频

Question

是的，这似乎没有很好的文档记录，或者我在文档中看不到它。我基本上不想要使用 JavaScript API 的相关视频 (?rel=0)。

$players[$vidIdPlaceholderRef] = new YT.Player('player_' + $vidIdPlaceholderRef, {
    height: '550',
    width: '840',
    videoId: $vidId
});

是我所拥有的。

我也试过了：

$players[$vidIdPlaceholderRef] = new YT.Player('player_' + $vidIdPlaceholderRef, {
    height: '550',
    width: '840',
    videoId: $vidId + '?rel=0',
    rel : 0
});

没有运气。有谁知道可以添加的选项（尝试rel : 0 没有运气）

Answer 1

“rel”是一个播放器参数，在这里指定：

https://developers.google.com/youtube/player_parameters#rel

要将播放器参数添加到 iframe 播放器，您需要指定第二个构造函数参数的 playerVars 属性（在撰写本文时，这已记录在 here 和 IFrame API documentation page 上）

例如

new YT.Player('playerid', {
    height: '550',
    width: '840',
    videoID: 'video_id',
    playerVars: {rel: 0, showinfo: 0, ecver: 2}
});

Answer 2

rel player 参数的行为发生了变化。

From documentation,

rel 参数的行为在 9 月或之后发生变化 2018 年 2 月 25 日。更改的效果是您将无法 禁用相关视频。但是，您可以选择 指定播放器中显示的相关视频应来自 与刚刚播放的视频相同的频道

因此，无法再禁用相关视频。而playerVars: {rel:0} 将改变玩家的行为并显示来自指定频道的建议。

Answer 3

您可以在两个位置获得相关视频：在带有网格的视频末尾，以及在视频底部暂停时。我已经找到了一种方法，可以在最后删除它们，并使底部的那些至少对大多数企业来说是可以忍受的。

1。删除视频末尾的相关视频

IFrame Player API: Events

为避免在视频末尾显示相关视频，我刚刚停止了视频，使其返回显示缩略图和播放按钮：

var player = new YT.Player('player', {
   height: '390',
   width: '640',
   events: {
      'onStateChange': function(event){
         switch(event.data){
            // Stop the video on ending so recommended videos don't pop up
            case 0:     // ended
               player.stopVideo();
               break;
            case -1:    // unstarted
            case 1:     // playing
            case 2:     // paused
            case 3:     // buffering
            case 5:     // video cued
            default:
               break;
         }
      }
   }
});

您还可以将player.stopVideo(); 替换为您想要运行的任何其他代码。

2。在视频底部制作相关视频仅显示您的视频

IFrame Player API: YouTube Embedded Players and Player Parameters

rel=0 不再避免显示任何相关视频；现在，它仍会显示相关视频，但至少它们只会来自您的频道。这在 2018 年 9 月 25 日左右的某个时候发生了变化 (documentation)。

通过在 YT.Player 中设置playerVars，我们至少可以让相关视频只显示我们频道的视频。文档不清楚您必须将 playerVars 设置为对象，但您可以像这样进行设置：

var player = new YT.Player('player', {
   ...
   playerVars:{
      rel:              0
      modestbranding:   1,       // If you're trying to remove branding I figure this is helpful to mention as well; removes the YouTube logo from the bottom controls of the player
      // color:         'white', // Can't have this and modestbranding active simultaneously (just a note in case you run into this)
   },
   ...
});

2A。从底部删除相关视频的潜在方法

如果我有时间，我可能会进一步研究它，但这里可能会有答案：

我们可以轻松访问 iframe 对象，但我们无法对其进行任何操作：IFrame Player API: Accessing and modifying DOM nodes。似乎因为我们要从 YouTube 编辑 iframe，所以存在安全问题（不管我们实际在做什么）。理想情况下，我可以使用player.getIframe().contentWindow.document.querySelector('.ytp-pause-overlay.ytp-scroll-min').remove() 删除“更多视频”文本，但是当我运行player.getIframe().contentWindow.document 时，我收到错误SecurityError: Permission denied to access property "document" on cross-origin object。

但是playerVars 也有一个origin 值，它可以让我们访问 iframe 的对象：

var player = new YT.Player('player', {
   ...
   playerVars:{
      origin:           'https://mywebsite.com'
   },
   ...
});

它不适用于 localhost，而是 that may be a Chromium and Firefox thing。也许这在现场是一个合法的选择；当/如果我尝试这样做时，我会更新这篇文章，让你知道我是否成功。

Answer 4

接受的解决方案对我不起作用。起作用的是：

1) 将 iframe 放入包含 rel 参数的 html 中

<iframe id="youtube-video" width="560" height="315" 
 src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&rel=0&modestbranding=1" 
 frameborder="0" enablejsapi="1" allowfullscreen></iframe>

2) 使用 javascript API 附加到现有播放器

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('youtube-video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
    console.log("ready");
}

function onPlayerStateChange(event) {
    console.log("state changed");
}

演示小提琴：http://jsfiddle.net/bf7zQ/195/

Answer 5

如果您使用的是 SWFObject，您只需执行以下操作：

function loadVideo() {
        var params = { allowScriptAccess: "always" }
            , atts = { id: "myvideo" }
        ;
//NOTE THE END OF THE BELOW LINE vvvvvv
        swfobject.embedSWF("https://www.youtube.com/v/[video id here]?enablejsapi=1&playerapiid=myvideo&version=3&rel=0"
         , "videoplaceholderid"
         , "768", "432", "8", null, null, params, atts);
    }

只需将rel=0 添加到您的网址末尾即可。

Answer 6

无需通过API编写代码，现在可以轻松完成

You Tube 嵌入按钮 -> 显示更多 -> 勾选“视频结束时显示建议的视频”选项

Answer 7

这是一个快速解决方案：

setInterval(function(){
    if($('iframe').length > 0){
        $('iframe').each(function(){
            if($(this).hasClass('gotYou')){
                //do nothing
            }else{
                var getMySrc = $(this).attr('src');
                var newSrc = getMySrc.split('?');
                console.log(newSrc);
                var freshURL = newSrc[0]+'?rel=0&'+newSrc[1];
                console.log(freshURL);
                $(this).addClass('gotYou');
                $(this).attr('src', freshURL );         
            }
        });
    }
}, 1);

它的作用是在您的文档中查找 iframe。如果找到 iframe，它会抓取 iframe 的 src，找到 ? 标记，然后将 ? 替换为 ?rel=0& 。这里的目标是出rel=0

Answer 8

new YT.Player('playerid', {
    height: '550',
    width: '840',
    videoID: 'video_id',
    playerVars: {rel: 0},
});