Youtube Javascript API-禁用相关视频


69

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

$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没有运气尝试过)


这是在我的情况非常有用...检查stackoverflow.com/questions/13418028/...
卡兰Suthar

Answers:


155

“ rel”是播放器参数,如下所示:

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

要将播放器参数添加到iframe播放器,您需要指定第二个构造函数参数的playerVars属性(在编写本文时,在此处以及IFrame API文档页面上都有记录)

例如

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

4
完美的工作,谢谢。我无法在YouTube iframe参考页
Shahar,2014年

3
根据docs的2018年8月23日修订版,情况不再如此,因为'rel'的行为已更改。
cweber105

截至2018年11月11日,使用showinfo = 0?ecver = 2的作品@ cweber105
伊万·卡斯特拉诺斯

9
> -这9月25日,2018年更多信息后停止工作developers.google.com/youtube/player_parameters
shutupchigo

1
@JoshPowlison不幸的是,YouTube(该公司)的目的是减少越来越多的嵌入操作。目前唯一真正的解决方案是使用一个拥有自己的自定义播放器的第三方JS库(或使用youtube API创建自己的播放器)。
伊万·卡斯泰拉诺斯

17

rel player参数的行为已更改。

根据文档

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

因此,不再可能禁用相关视频。而是playerVars: {rel:0}会更改播放器的行为并显示来自指定频道的建议。


1
我在链接的页面中找不到您写的内容。无论如何,似乎此参数现在确实在做什么。
西蒙娜·阿德里亚尼

@SimonaAdriani,此笔记是2018年8月23日的要点。它还指出了对showinfo参数所做的更改,如果这有助于您从文档中找到它。
Kuu_Tamo

2
截至2018年11月11日,您可以{rel:0,showinfo:0,ecver:2}隐藏相关参数@ user9568723
Ivan Castellanos

5

您可以在两个位置获得相关视频:在带有网格的视频的结尾,以及暂停时在视频的底部。我想出了一种方法,可以在最后删除它们,并使大多数企业至少可以容忍它们的底部。

1.删​​除视频结尾处的相关视频

IFrame Player API:事件

为了避免在视频结尾显示相关视频,我只是停止了视频,所以它返回到显示缩略图和播放按钮:

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嵌入式播放器和播放器参数

rel=0不再避免显示任何相关视频;现在,它仍然会显示相关视频,但至少它们只会来自您的频道。这种情况在2018年9月25日左右的某个时间发生了变化(文档)。

通过playerVars在YT.Player中进行设置,我们至少可以使相关视频仅显示我们频道的视频。文档尚不清楚您是否必须将其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:访问和修改DOM节点。似乎因为我们要从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,但这可能是Chromium和Firefox的问题。也许这是一个实时网站上的合法选择;如果/如果我尝试成功,我会更新此帖子的内容。


3

公认的解决方案对我不起作用。起作用的是:

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/


1

如果使用的是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到您的网址末尾即可。


7
为将来的读者着想:上面使用的Flash(AS3)播放器API已于2015
。– Tim Wintle

rel = 0节省了我的时间
nlt


0

这是一个快速解决方案:

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.