'DOMWindow' üzerinde 'postMessage' yürütülemedi: https://www.youtube.com! == http: // localhost: 9000

Aldığım hata mesajı:

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').

Hedef orijin http://www.youtube.comve alıcı orijin olduğu başka benzer problemler gördüm https://www.youtube.com, ama hiçbiri hedefin https://www.youtube.comve orijin olduğu benimki gibi değil http://localhost:9000.

1. Sorunu anlamıyorum. Sorun nedir?
2. Nasıl düzeltebilirim?

Bunun hedef menşei ile ilgili bir sorun olduğuna inanıyorum https. Bunun iFrame URL'nizin httpyerine kullanmasından kaynaklandığından şüpheleniyorum https. Yerleştirmeye çalıştığınız dosyanın URL'sini değiştirmeyi deneyin https.

Örneğin:

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

olmak:

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

Parametreyi oynatıcının özelliğine "origin"sitenizin URL'si ile ekleyin paramVars, örneğin:

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' },
}

Bunu ayarlamak sorunu çözüyor gibi görünüyor:

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

JavaScript'i yerel dosyalara kaydedebilirsiniz:

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

İlk dosyaya player_apişu kodu koyun:

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

İkinci dosyaya kodu bulun: this.a.contentWindow.postMessage(a,b[c]);

ve aşağıdakilerle değiştirin:

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

Tabii ki, bir dosyada birleştirebilirsiniz - daha verimli olacaktır. Bu mükemmel bir çözüm değil, ama işe yarıyor!

Kaynağım : yt_api-concat

Aşağıdaki gibi bir URL'den yüklediğinizden emin olun:

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

"Origin" bileşenine ve "enablejsapi = 1" e dikkat edin. Başlangıç ​​noktası, alan adınızla eşleşmelidir; ardından beyaz listeye eklenecek ve çalışacaktır.

window.location.hrefURL'nin pencerenin kaynağına uygun olmasını sağlamayı deneyin .

Aynı hatayı aldım. Benim hatam enablejsapi=1parametre iframesrc mevcut değildi oldu .

Hatanın açıklamasının yanıltıcı olduğunu ve aslında oyuncu nesnesinin yanlış kullanımı ile ilgisi olduğunu düşünüyorum.

Bir Slider'daki yeni Videolara geçerken de aynı sorunu yaşadım.

Burada açıklananplayer.destroy() işlevi kullandığınızda sorun ortadan kalkar.

Aynı sorunu yaşadım ve Chrome uzantısının "HTTPS Everywhere" çalıştığı için ortaya çıktı. Uzantıyı devre dışı bırakmak sorunumu çözdü.

Bu kesin hata, "belirli sitelerde veya uygulamalarda oynatıldığında" Youtube'daki bir içerik bloğuyla ilgiliydi. Daha spesifik olarak WMG (Warner Music Group) tarafından.

Ancak hata iletisi, http sitesine bir https iframe içe aktarma işleminin bu durumda olmadığı sorunu olduğunu düşündürdü.

DNS Prefetch kaldır bu sorunu çözecektir.

WordPress kullanıyorsanız, bu satırı temanızın işlevlerine ekleyin. Php

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

İframe'inizi bu şekilde olacak şekilde değiştirebilir ve mevcut web sitenize başlangıç ​​kaynağı ekleyebilirsiniz. Tarayıcımdaki hatayı giderir.

<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

Aşağıdakilerden herhangi biri olabilir, ancak hepsi javascript tarafından erişilmeden önce yüklü olmayan DOM'a yönlendirir.

Yani aslında JS kodunu aramadan önce sağlamanız gereken şey: * Herhangi bir javascript çağrılmadan önce kabın yüklendiğinden emin olun * Hedef URL'nin sahip olduğu herhangi bir kapta yüklendiğinden emin olun

Ben benzer bir sorunla karşılaştım ama benim Javascript hata iletisine neden olan ana sayfanın onLoad önce daha önce çalıştırmak için çalışıyorum zaman yerel üzerinde geldi. Sadece tüm sayfanın yüklenmesini bekleyip gerekli işlevi çağırarak düzelttim.

Bunu, sayfa yüklendiğinde bir zaman aşımı işlevi ekleyerek ve onload etkinliğinizi aşağıdaki gibi çağırarak yapabilirsiniz:

window.onload = new function () {setTimeout (function () {// bazı onload olayı}, 10); }

denediğiniz şeyin onLoad tetiklendikten sonra iyi bir şekilde yürütülmesini sağlayacaktır.

Bu iletiyi , aramalarında bir targetOrigin belirtmediğinizde de alırsınız window.postMessage().

Bu örnekte, ilk iFrame'e bir mesaj *gönderiyoruz ve herhangi bir targetOrigin ile iletişime izin vermesi gereken hedef olarak kullanıyoruz.

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

Benim durumumda en azından bu, API'nın başarılı olana kadar tekrar denediği zararsız bir "hazır değil" koşulu gibi görünüyor.

Bunlardan ikiden dokuza kadar her yere ulaşıyorum (en kötü durum test cihazımda, hücresel etkin nokta aracılığıyla 20 sekmeli açık bir 2009 FossilBook) .... ama sonra video düzgün çalışıyor. Aramak için postMessage tabanlı çağrılarımı çalıştırdıktan sonra Kesinlikle çalışmak için başkalarını test etmedim.

Bazı durumlarda (bir yorumcunun bahsettiği gibi), müzikçaları DOM appendvb. Gibi DOM içinde taşıyorsanız buna neden olabilir .

Deneyebilirsin :

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

Ben de aynı sorunla karşı karşıya kaldım sonra resmi Youtube Iframe Api ziyaret burada buldum:

Kullanıcının tarayıcısı HTML5 postMessage özelliğini desteklemelidir. Çoğu modern tarayıcı postMessage'ı destekler

ve resmi sayfanın da bu sorunla karşı karşıya olduğunu görmek için dolaşmak. Sadece resmi Youtube Iframe Api'yi ziyaret edin ve konsol günlüklerini görün. Chrome sürümüm 79.0.3945.88.

benimki:

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

PlayerVars ile çizgiyi yeni kaldırdım ve konsolda hatasız çalıştı.