API iframe của Youtube không thể đăng tin nhắn

Question

Trong một thời gian, một đoạn javascript tôi đã viết nghe những hành động trên một trang nhất định hoạt động một cách tuyệt vời. Tôi đang sử dụng iframe của Youtube js api: https://developers.google.com/youtube/iframe_api_reference. Nhưng một nội dung bổ sung gần đây, một video youtube cụ thể, tính năng theo dõi sẽ không hoạt động. Các sự kiện sẽ không cháy chút nào.

Trong giao diện điều khiển, tôi nhận thấy điều này lỗi bài nhắn: Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.

Vì vậy, không có gì với mã của riêng tôi giúp đỡ. Một số câu hỏi ở đây trên stackoverflow đề xuất đây là vấn đề với việc bắt đầu new YT.player quá sớm, vì vậy tôi đã thử một loạt các thứ như tải tệp yt js api trên window tải và chỉ áp dụng api sau, nhưng điều đó dường như không làm bất kỳ tốt.

Answer 1

Tôi mất hơn một giờ, nhưng câu trả lời là ngay trước mặt tôi. Nó thực sự khá tự giải thích: Bạn không thể sử dụng js api của youtube để theo dõi video iframe mà không cần www. Tôi không biết tại sao, nó chắc chắn không nói như vậy trong tài liệu của họ.

Tôi thử nghiệm này một vài lần và khẳng định, tính đến nay, theo dõi một iframe với nguồn www.youtube.com/embed/0GN2kpBoFs4 sẽ làm việc tuyệt vời trong khi theo dõi youtube.com/embed/0GN2kpBoFs4 sẽ ném:

Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.

Phần khó hiểu tất nhiên là cả hai tải video và chơi tốt. Nó chỉ là API không hoạt động đúng.

fiddle - http://jsfiddle.net/8tkgW/ (Thử nghiệm trên chrome/sư tử núi)

Btw, khi viết câu trả lời này, tôi tình cờ gặp YouTube iframe API: how do I control a iframe player that's already in the HTML? - nhận thấy fiddle của anh chàng này. Ông đã viết triển khai iframe của riêng mình (wow!). Nếu bạn thay đổi địa chỉ nguồn iframe trong fiddle thành một không có www, nó sẽ hoạt động. Điều này chỉ có nghĩa là youtube viết js xấu. Tệ tệ tệ!

Answer 2

Tôi biết bài này là 3 tuổi, nhưng đối với những người vẫn còn đang tìm kiếm một câu trả lời:

Thêm kịch bản này và tất cả mọi thứ hoạt động tốt:

<script src="https://www.youtube.com/iframe_api"></script> 

Tôi đã có cùng một vấn đề với jwplayer và sửa nó với kịch bản đó.

Answer 3

Đừng quên để thêm nó vào danh sách trắng:

<!-- Add the whitelist plugin --> 
<plugin name="cordova-plugin-whitelist" source="npm" spec="*"/> 

<!-- White list https access to Youtube --> 
<allow-navigation href="https://*youtube.com/*"/> 

Answer 4

Các tài liệu api youtube khuyên bạn nên tải các api như thế này

var tag = document.createElement('script'); 
tag.src = "http://youtube.com/iframe_api"; 
tag.id = "youtubeScript"; 
var firstScriptTag = document.getElementsByTagName('script')[1]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

Nhưng nhận được lỗi này:

Không để gửi tin nhắn đến http://youtube.com.Người nhận có nguồn gốc http://www.youtube.com

Dưới đây là giải pháp tốt nhất I found from this site

Vì vậy, thêm này đầu tiên ở phía trên trước khi gọi các Api

if (!window['YT']) {var YT = {loading: 0,loaded: 0};} 
if (!window['YTConfig']) {var YTConfig = {'host': 'http://www.youtube.com'};} 
if (!YT.loading) {YT.loading = 1;(function(){var l = [];YT.ready = function(f) {if (YT.loaded) {f();} 
else 
{l.push(f);}}; 
window.onYTReady = function() {YT.loaded = 1;for (var i = 0; i < l.length; i++) {try {l[i]();} catch (e) {}}}; 
YT.setConfig = function(c) {for (var k in c) {if (c.hasOwnProperty(k)) {YTConfig[k] = c[k];}}}; 
var a = document.createElement('script'); 
a.type = 'text/javascript'; 
a.id = 'www-widgetapi-script'; 
a.src = 'https:' + '//s.ytimg.com/yts/jsbin/www-widgetapi-vflumC9r0/www-widgetapi.js'; 
a.async = true; 
var b = document.getElementsByTagName('script')[0]; 
b.parentNode.insertBefore(a, b);})();} 

// =========== THEN =============================

function onYouTubeIframeAPIReady() {// do stuff here}