Sự cố API nhúng của YouTube trên iOS và Android

Question

Một số vấn đề nảy sinh trong vài ngày qua với API nhúng YouTube. Vấn đề là khi bạn nhúng một video với API chính thức, nó chỉ đơn giản là không cho phép bạn truy cập vào API. Khi bạn cố gắng truy cập vào API, bạn nhận được thông báo lỗi trên nhật ký (IOS) và nếu bạn cố gắng phát video thông qua API, video sẽ bị tắt. Nếu bạn tải nó qua API, nhưng bạn không sử dụng API, người dùng có thể phát video bằng vòi nước.

Vấn đề tồn tại trên các trình duyệt sau:

IOS 7 Safari trên iPad và iPhone IOS 7 Chrome trên iPad và iPhone Android 4 Chrome

(nút play của tôi sử dụng API để phát video và sản xuất các lỗi) JSfiddle: thông điệp http://jsfiddle.net/frdd8nvr/6/

lỗi:

Unable to post message to https://www.youtube.com. Recipient has origin http://fiddle.jshell.net. 
postMessage[native code]:0 
Jwww-widgetapi.js:26:357 
Nwww-widgetapi.js:25 
(anonymous function)[native code]:0 
html5player.js:1201:97 

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://jsfiddle.net". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match. 

Một số thông tin gỡ lỗi:

Khi tôi thấy API tạo iframe trên trang web. Src là đôi khi http và đôi khi https.

http://www.youtube.com/embed/ZPy9VCovVME?enablejsapi=1&origin=http%3A%2F%2Ffiddle.jshell.net&autoplay=0&modestbranding=1&wmode=opaque&forceSSL=false

thử nghiệm của tôi cho thấy rằng hầu hết các lần máy chủ của YouTube chỉ đơn giản VỊ TRÍ: https: // ... yêu cầu đến địa chỉ https, nhưng khoảng 10% họ phục vụ theo yêu cầu http với nội dung thích hợp.

Tôi nghĩ bằng cách nào đó vấn đề liên quan đến https bắt buộc, nhưng tôi không thể tìm ra giải pháp. Bạn có trải nghiệm giống nhau không? Bạn có một số loại giải pháp cho vấn đề này? Có phải đó là lỗi của YouTube không?

mã kiểm tra của tôi:

<div id="myvideo"></div> 
<button id="play-button">Play</button> 

JS:

var tag = document.createElement("script"); 
tag.src = "//www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName("script")[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

onYouTubeIframeAPIReady = function() { 
    var vars = { 
     enablejsapi: 1, 
     origin: window.location.protocol + "//" + window.location.host, 
     autoplay: 0, 
     modestbranding: 1, 
     wmode: "opaque", 
     forceSSL: false 
    }; 

    if (+(navigator.platform.toUpperCase().indexOf('MAC') >= 0 && navigator.userAgent.search("Firefox") > -1)){ 
     vars.html5 = 1; 
    } 
      var playerobj = new YT.Player('myvideo', { 
       videoId: 'ZPy9VCovVME', 
       wmode: 'opaque', 
       playerVars: vars, 
       events: { 
        onReady: function(){ 
         $('#play-button').on('click', function(){ 
          playerobj.playVideo(); 
         }); 
         //playerobj.playVideo(); 
        }, 
        onStateChange: function(state){ 
         switch(state.data){ 
          case YT.PlayerState.PLAYING: 
           break; 
          //case YT.PlayerState.PAUSED: 
          case YT.PlayerState.ENDED: 
           break; 
         } 
        } 
       } 
      }); 
} 

Answer 1

Trước tiên, tôi nghĩ rằng đây là một bản sao của những câu dưới đây: YouTube IFrame API play method doesn't work before touch on some Android tablets

tôi có thể tạo lại vấn đề tương tự trên YouTube Player Demo page.

Các lỗi

Không thể gửi thông điệp tới https://www.youtube.com. Người nhận có nguồn gốc http://fiddle.jshell.net.

chỉ xuất hiện trên jsfiddle của bạn. Trên trang demo, lỗi này không xảy ra, do đó lỗi được quan sát của bạn dường như không liên quan đến lỗi được ghi trong bảng điều khiển. Tôi đã kiểm tra điều này với chrome trên Android 4.4.4.

Cách giải quyết

Tôi có một workaround bẩn mà hoạt động trên chrome trên Android 4.4.4 (Nexus5) và 4.1.2 (S2). Tôi không có thiết bị iOS để kiểm tra điều này. Cách giải quyết hoạt động trên điện thoại của tôi, vì video luôn bắt đầu lần thứ hai tôi nhấp vào nút phát.

http://jsfiddle.net/kjwpwpx8/6/

tôi luôn luôn có thể bắt đầu các video trên nhấp Sự kiện sau khi chức năng playVideo được gọi là một lần trước. Trong workaround của tôi, tôi đặt hai iframe trên trang. Một là ẩn trong khi một trong những khác có thể nhìn thấy. Nếu trang được trình duyệt di động xem, tôi gọi hàm playVideo của video thứ hai sau Sự kiện OnReady. Video sẽ không phát khi trình duyệt chặn video này.

Bây giờ khi nút phát của chúng tôi được nhấn, video đầu tiên sẽ bị ẩn và dừng và video thứ hai sẽ hiển thị và chức năng playVideo được gọi lại.

Đây là mã quan trọng:

var playerOptions = { 
    videoId: 'ZPy9VCovVME', 
    wmode: 'opaque', 
    playerVars: vars, 
    events: {} 
}; 

var playerobj1 = new YT.Player('myvideo1', playerOptions); 
var playerobj2 = null; 

playerOptions.events.onReady = function(){ 
    $('#play-button').on('click', function(){ 
     $("#videowrapper .video1wrapper").hide(); 
     playerobj1.stopVideo(); 

     $("#videowrapper .video2wrapper").show(); 
     playerobj2.playVideo(); 
    }); 

    if(isMobileBrowser) 
     playerobj2.playVideo(); 
}; 

playerobj2 = new YT.Player('myvideo2', playerOptions);