Youtube Javascript API – ähnliche Videos deaktivieren

Richtig, das scheint schlecht dokumentiert zu sein oder ich kann es in der Dokumentation nicht sehen. Ich möchte grundsätzlich keine verwandten Videos (?rel=0) mithilfe der JavaScript-API.

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

ist, was ich an Ort und Stelle habe.

Ich habe auch versucht:

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

ohne Glück. Kennt jemand eine Option, die hinzugefügt werden kann (versucht rel : 0 ohne Glück)

“rel” ist ein Player-Parameter, wie hier angegeben:

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

Um Player-Parameter zu Iframe-Playern hinzuzufügen, müssen Sie die playerVars-Eigenschaft des zweiten Konstruktor-Arguments angeben (zum Zeitpunkt des Schreibens ist dies dokumentiert hierund auf der IFrame-API-Dokumentationsseite)

z.B

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

Das Verhalten des Rel-Player-Parameters hat sich geändert.

Aus Dokumentation,

Das Verhalten für den rel-Parameter ändert sich am oder nach dem 25. September 2018. Die Auswirkung der Änderung ist, dass Sie verwandte Videos nicht deaktivieren können. Sie haben jedoch die Möglichkeit festzulegen, dass die im Player angezeigten verwandten Videos vom selben Kanal stammen sollen wie das gerade abgespielte Video

Es ist also nicht mehr möglich, ähnliche Videos zu deaktivieren. Stattdessen playerVars: {rel:0} ändert das Verhalten des Players und zeigt Vorschläge vom angegebenen Kanal an.

Sie erhalten verwandte Videos an zwei Stellen: am Ende des Videos mit dem Raster und am Ende des Videos, während es pausiert ist. Ich habe einen Weg gefunden, sie am Ende zu entfernen und die unteren für die meisten Unternehmen zumindest erträglich zu machen.

1. Entfernen Sie verwandte Videos am Ende eines Videos

IFrame-Player-API: Ereignisse

Um zu vermeiden, dass am Ende eines Videos verwandte Videos angezeigt werden, habe ich das Video einfach angehalten, damit es wieder die Miniaturansicht und die Wiedergabeschaltfläche anzeigt:

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

Könntest du auch ersetzen player.stopVideo(); mit jedem anderen Code, den Sie ausführen möchten.

2. Wenn Sie verwandte Videos unten in einem Video erstellen, werden nur Ihre Videos angezeigt

IFrame-Player-API: Eingebettete YouTube-Player und Player-Parameter

rel=0 vermeidet es nicht mehr, verwandte Videos zu zeigen; Jetzt werden immer noch verwandte Videos angezeigt, aber zumindest werden sie nur von deinem Kanal stammen. Dies änderte sich irgendwann um den 25. September 2018 (Dokumentation).

Indem man es einstellt playerVars in YT.Player können wir zumindest verwandte Videos haben, nur die Videos unseres Kanals anzeigen. Die Dokumentation ist nicht klar, dass Sie haben müssen playerVars als Objekt eingerichtet, aber Sie können es auch so einrichten:

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. Mögliche Möglichkeit, verwandte Videos von unten zu entfernen

Ich werde mich vielleicht genauer damit befassen, wenn ich Zeit habe, aber hier könnte eine Antwort liegen:

Wir können leicht auf das iframe-Objekt zugreifen, aber wir können nichts damit anfangen: IFrame Player API: Zugriff auf und Änderung von DOM-Knoten. Es scheint, dass es Sicherheitsbedenken gibt, weil wir einen Iframe von YouTube bearbeiten würden (unabhängig davon, was wir tatsächlich tun würden). Idealerweise könnte ich einfach den Text “Weitere Videos” mit entfernen player.getIframe().contentWindow.document.querySelector('.ytp-pause-overlay.ytp-scroll-min').remove()aber wenn ich laufe player.getIframe().contentWindow.document Ich erhalte eine Fehlermeldung SecurityError: Permission denied to access property "document" on cross-origin object.

Aber playerVars hat auch eine origin Wert, mit dem wir trotzdem auf das Objekt des iframe zugreifen können:

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

Es funktioniert nicht mit localhost, aber das kann eine Chromium- und Firefox-Sache sein. Vielleicht ist dies eine legitime Option auf einer Live-Site; Ich werde diesen Beitrag aktualisieren, wenn/falls ich das versuche, um Sie wissen zu lassen, ob ich erfolgreich bin.

Die akzeptierte Lösung hat bei mir nicht funktioniert. Was funktioniert ist:

1) Iframe in HTML einfügen, das den rel-Parameter enthält

<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) Verwenden der Javascript-API zum Anhängen an diesen vorhandenen Player

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

Demo Geige: http://jsfiddle.net/bf7zQ/195/

Wenn Sie SWFObject verwenden, müssen Sie einfach so etwas tun:

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

Einfach hinzufügen rel=0 bis zum Ende Ihrer URL.

Es ist nicht erforderlich, über die API zu programmieren, jetzt ist dies ganz einfach

YouTube-Einbettungsschaltfläche -> Mehr anzeigen -> Aktivieren Sie die Option „Vorgeschlagene Videos anzeigen, wenn das Video fertig ist“.

Hier ist eine schnelle Lösung:

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

Was es tut, es sucht nach dem Iframe in Ihrem Dokument. Wenn es iframe findet, greift es den src des iframe, findet die ? markieren und dann ersetzen ? durch ?rel=0& . Hier heißt es raus rel=0