Youtube Javascript API - Deaktiviere verwandte Videos

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

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

ist das, 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 ( rel : 0ohne Glück versucht )

"rel" ist ein Spielerparameter, wie hier angegeben:

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

Um Spielerparameter zu Iframe-Spielern hinzuzufügen, müssen Sie die playerVars-Eigenschaft des zweiten Konstruktorarguments angeben (zum Zeitpunkt des Schreibens ist dies hier und auf der IFrame-API-Dokumentationsseite dokumentiert ).

z.B

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

Das Verhalten des Parameters rel player hat sich geändert.

Aus der Dokumentation ,

Das Verhalten für den Parameter rel ändert sich am oder nach dem 25. September 2018. Die Änderung hat zur Folge, dass Sie verwandte Videos nicht deaktivieren können. Sie können jedoch festlegen, dass die im Player angezeigten Videos vom selben Kanal stammen sollen wie das gerade abgespielte Video

Es ist also nicht mehr möglich, verwandte Videos zu deaktivieren. Stattdessen playerVars: {rel:0}wird das Verhalten des Players geändert und der Vorschlag des angegebenen Kanals angezeigt.

Sie erhalten verwandte Videos an zwei Stellen: am Ende des Videos mit dem Raster und am Ende des Videos, während Sie angehalten haben. 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 verwandte Videos am Ende eines Videos angezeigt werden, habe ich das Video einfach angehalten, damit wieder das Miniaturbild und die Wiedergabetaste angezeigt werden:

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

Sie können auch durch player.stopVideo();jeden anderen Code ersetzen , den Sie ausführen möchten.

2. Wenn Sie verwandte Videos am Ende eines Videos erstellen, werden nur Ihre Videos angezeigt

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

rel=0vermeidet nicht länger das Anzeigen verwandter Videos; Jetzt werden immer noch verwandte Videos angezeigt, aber zumindest stammen sie nur von Ihrem Kanal. Dies änderte sich irgendwann um den 25. September 2018 ( Dokumentation ).

Durch die Einstellung playerVarsin YT.Player können zumindest verwandte Videos nur die Videos unseres Kanals anzeigen. Die Dokumentation ist nicht klar, dass Sie playerVarsals Objekt eingerichtet haben müssen , aber Sie können es wie folgt 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 kann mehr darüber nachdenken, 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 aufgrund der Bearbeitung eines Iframes von YouTube Sicherheitsbedenken bestehen (unabhängig davon, was wir tatsächlich tun würden). Im Idealfall könnte ich einfach den Text "Weitere Videos" mit entfernen player.getIframe().contentWindow.document.querySelector('.ytp-pause-overlay.ytp-scroll-min').remove(), aber beim Ausführen wird player.getIframe().contentWindow.documenteine Fehlermeldung angezeigt SecurityError: Permission denied to access property "document" on cross-origin object.

Hat aber playerVarsauch einen originWert, mit dem wir trotzdem auf das iframe-Objekt zugreifen können:

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

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

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

1) Einfügen des Iframes in HTML, das den Parameter rel 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 Folgendes 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/[video id here]?enablejsapi=1&playerapiid=myvideo&version=3&rel=0"
         , "videoplaceholderid"
         , "768", "432", "8", null, null, params, atts);
    }

Fügen Sie einfach rel=0am Ende Ihrer URL hinzu.

Sie müssen nicht über die API codieren, jetzt können Sie dies problemlos tun

Die Schaltfläche zum Einbetten der Röhre -> 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, sucht es nach dem Iframe in Ihrem Dokument. Wenn es iframe findet, greift es nach dem src des iframe, findet die ?Markierung und ersetzt sie ?durch ?rel=0&. Hier ist das Ziel rausrel=0