Nie udało się wykonać „postMessage” w „DOMWindow”: https://www.youtube.com! == http: // localhost: 9000

Oto komunikat o błędzie, który otrzymuję:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
('https://www.youtube.com') does not match the recipient window's origin 
('http://localhost:9000').

Widziałem inne podobne problemy, w których znajduje się źródło docelowe http://www.youtube.comi źródło odbiorcy https://www.youtube.com, ale żaden nie przypomina mojego, gdzie jest cel https://www.youtube.comi źródło jest http://localhost:9000.

1. Nie mam problemu. Jaki jest problem?
2. Jak mogę to naprawić?

Uważam, że jest to problem z docelowym pochodzeniem https. Podejrzewam, że dzieje się tak, ponieważ Twój adres URL iFrame używa httpzamiast https. Spróbuj zmienić adres URL pliku, który próbujesz osadzić https.

Na przykład:

'//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';

być:

'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';

Po prostu dodaj parametr "origin"z adresem URL swojej witryny do paramVarsatrybutu odtwarzacza, na przykład:

this.player = new window['YT'].Player('player', {
    videoId: this.mediaid,
    width:'100%',
    playerVars: { 'autoplay': 1, 'controls': 0,'autohide':1,'wmode':'opaque','origin':'http://localhost:8100' },
}

Wydaje się, że ustawienie tego rozwiązuje problem:

  this$1.player = new YouTube.Player(this$1.elementId, {
    videoId: videoId,
    host: 'https://www.youtube.com',

Możesz zapisać JavaScript w lokalnych plikach:

• https://www.youtube.com/player_api
• https://s.ytimg.com/yts/jsbin/www-widgetapi-vfluxKqfs/www-widgetapi.js

W pierwszym pliku player_apiumieść ten kod:

if(!window.YT)var YT={loading:0,loaded:0};if(!window.YTConfig)var YTConfig={host:"https://www.youtube.com"};YT.loading||(YT.loading=1,function(){var o=[];YT.ready=function(n){YT.loaded?n():o.push(n)},window.onYTReady=function(){YT.loaded=1;for(var n=0;n<o.length;n++)try{o[n]()}catch(i){}},YT.setConfig=function(o){for(var n in o)o.hasOwnProperty(n)&&(YTConfig[n]=o[n])}}());

W drugim pliku znajdź kod: this.a.contentWindow.postMessage(a,b[c]);

i zamień na:

if(this._skiped){
    this.a.contentWindow.postMessage(a,b[c]); 
}
this._skiped = true;

Oczywiście można połączyć w jeden plik - będzie bardziej wydajne. To nie jest idealne rozwiązanie, ale działa!

Moje źródło: yt_api-concat

Upewnij się, że ładujesz z adresu URL, takiego jak:

https://www.youtube.com/embed/HIbAz29L-FA?modestbranding=1&playsinline=0&showinfo=0&enablejsapi=1&origin=https%3A%2F%2Fintercoin.org&widgetid=1

Zwróć uwagę na składnik „origin”, a także „enablejsapi = 1”. Pochodzenie musi być zgodne z Twoją domeną, a wtedy zostanie umieszczone na białej liście i będzie działać.

Spróbuj użyć window.location.hrefadresu URL, aby dopasować pochodzenie okna.

Mam ten sam błąd. Mój błąd polegał na tym, że enablejsapi=1parametr nie był obecny w iframesrc.

Myślę, że opis błędu jest mylący i pierwotnie dotyczy złego użycia obiektu gracza.

Miałem ten sam problem podczas przełączania się na nowe filmy w suwaku.

Po prostu przy użyciu player.destroy()funkcji opisanej tu problem znika.

Miałem ten sam problem i okazuje się, że było to spowodowane uruchomionym rozszerzeniem Chrome „HTTPS Everywhere”. Wyłączenie rozszerzenia rozwiązało mój problem.

Dokładnie ten błąd był związany z blokowaniem treści przez YouTube podczas „odtwarzania w niektórych witrynach lub aplikacjach”. Dokładniej przez WMG (Warner Music Group).

Komunikat o błędzie sugerował jednak, że problemem był import elementu iframe https do witryny http, czego nie było w tym przypadku.

Usuń DNS Prefetch rozwiąże ten problem.

Jeśli korzystasz z WordPressa, dodaj ten wiersz do pliku functions.php swojego motywu

remove_action( 'wp_head', 'wp_resource_hints', 2 );

Możesz zmienić element iframe na taki i dodać źródło do bieżącej witryny internetowej. Rozwiązuje to błąd w mojej przeglądarce.

<iframe class="test-testimonials-youtube-group"  type="text/html" width="100%" height="100%"
  src="http://www.youtube.com/embed/HiIsKeXN7qg?enablejsapi=1&origin=http://localhost:8000"
  frameborder="0">
</div>

ref: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Może istnieć dowolna z poniższych sytuacji, ale wszystkie prowadzą do DOM, który nie został załadowany przed uzyskaniem do niego dostępu przez skrypt javascript.

Oto, co musisz upewnić się, zanim faktycznie wywołasz kod JS: * Upewnij się, że kontener został załadowany przed wywołaniem jakiegokolwiek kodu JavaScript * Upewnij się, że docelowy adres URL jest załadowany do dowolnego kontenera, który ma

Natknąłem się na podobny problem, ale na moim lokalnym, gdy próbuję uruchomić mój Javascript na długo przed onLoad strony głównej, co powoduje komunikat o błędzie. Naprawiłem to, po prostu czekając na załadowanie całej strony, a następnie wywołując wymaganą funkcję.

Możesz to po prostu zrobić, dodając funkcję limitu czasu po załadowaniu strony i wywołać zdarzenie onload, takie jak:

window.onload = new function () {setTimeout (function () {// jakieś zdarzenie onload}, 10); }

to zapewni, że to, co próbujesz, zostanie wykonane dobrze po wyzwoleniu onLoad.

Ten komunikat jest również wyświetlany, gdy nie określisz targetOrigin w wywołaniach funkcji window.postMessage().

W tym przykładzie wysyłamy wiadomość do pierwszego elementu iFrame i używamy go *jako celu, co powinno pozwolić na komunikację z dowolnym targetOrigin.

window.frames[0].postMessage({
                    message : "Hi there",
                    command :"hi-there-command",
                    data : "Some Data"
                }, '*')

W moim przypadku przynajmniej wydaje się to nieszkodliwym warunkiem „niegotowym”, że API ponawia próby, aż się powiedzie.

Dostaję od dwóch do dziewięciu z nich (na moim testerze najgorszych przypadków, FossilBook 2009 z 20 otwartymi zakładkami przez hotspot komórkowy) ... ale wtedy wideo działa poprawnie. Po uruchomieniu moich wywołań opartych na postMessage do seekTo zdecydowanie działa, nie testowałem innych.

W niektórych przypadkach (jak wspomniał jeden z komentatorów) może to być spowodowane przenoszeniem odtwarzacza w ramach DOM, np. appendItp.

Możesz spróbować :

document.getElementById('your_id_iframe').contentWindow.postMessage('your_message', 'your_domain_iframe')

Miałem również ten sam problem, a potem odwiedziłem oficjalny interfejs YouTube Iframe Api, gdzie znalazłem to:

Przeglądarka użytkownika musi obsługiwać funkcję postMessage HTML5. Większość nowoczesnych przeglądarek obsługuje postMessage

i wędruj, aby zobaczyć, że ta oficjalna strona również została dotknięta tym problemem. Po prostu odwiedź oficjalny interfejs API iframe w serwisie Youtube i zobacz dzienniki konsoli. Moja wersja Chrome to 79.0.3945.88.

Moje było:

<youtube-player
  [videoId]="'paxSz8UblDs'"
  [playerVars]="playerVars"
  [width]="291"
  [height]="194">
</youtube-player>

Właśnie usunąłem linię z playerVars i działało bez błędów na konsoli.