Nhúng YouTube trên iPad: Bộ nhớ tạm thời khi bắt đầu qua Javascript API

Question

Tôi đang gặp một số sự cố khi nhúng YouTube để hoạt động.

Tôi đang sử dụng API YouTube để tải video. Trên đầu trang của video được tải, tôi có một điều khiển tùy chỉnh <div> (trong suốt) chỉ với một nút phát (một <img>). Nó được thực hiện theo cách này để ẩn trình phát YouTube mặc định sau nút phát đi kèm với phần còn lại của thiết kế trên trang web.

Các <div> phủ toàn bộ iFrame nạp, do đó người chơi chính nó là không thể nhấp - Tôi sử dụng một sự kiện click trên <div> để bắt đầu video thay vì:

// Inside onYouTubePlayerAPIReady(): 
var player = new YT.Player(playerId, { 
    height: height, 
    width: '100%', 
    videoId: videoId, 
    playerVars: { 
    html5: '1', 
    controls: '0', 
    rel: '0', 
    showinfo: '0', 
    modestbranding: '1', 
    theme: 'light', 
    color: 'white', 
    wmode: 'transparent', 
    suggestedQuality: "large" 
    } 
}); 

$(".youtube-player-controls").bind("click", function(e){ 
    if (!player || !player.getPlayerState) return false; 
    if (player.getPlayerState() == YT.PlayerState.PLAYING) player.pauseVideo(); 
    else player.playVideo(); 
    return false; 
}); 

trình tốt trên iPhone, nhưng trên iPad (và Android quá dường như) video chuyển sang khung đầu tiên của video, nhưng sau đó các quầy hàng ở trạng thái đệm (được kiểm tra qua player.getPlayerState()).

Tôi đã thử bắt đầu video với player.loadVideoById() không hoạt động (cùng một lỗi).

Nếu tôi xóa các điều khiển lớp phủ <div> và do đó cho phép người dùng thực sự nhấp vào video, nó hoạt động tốt.

Bất kỳ đề xuất nào về cách tôi có thể phát video bằng cách sử dụng API Javascript?

Edit:

tôi đã thay đổi mã nhúng một chút, ví dụ: Tôi được thêm vào html5=1 như mô tả trong Force HTML5 youtube video. Điều này thay đổi nội dung của iFrame được nhúng để sử dụng trình phát HTML5 nhưng không giải quyết được sự cố.

Tôi đã thử nó để xem nó có thể hoạt động như được mô tả trong http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html hay không.

Answer 1

Apple không cho phép tải thẻ qua các tập lệnh trên iOS (để tránh sử dụng băng thông không cần thiết trong khi trên mạng di động). Một số phiên bản Android hiển thị cùng một hành vi.

Bạn sẽ phải yêu cầu người dùng bắt đầu video đầu tiên bằng cách nhấp vào chính video đó - sau đó bạn sẽ có thể kiểm soát video thông qua API như trên thiết bị máy tính để bàn.

Answer 2

Hiện tại, chúng tôi chỉ đang thực hiện kiểm tra trước khi gửi trong player.playVideo(); chức năng. Nó không lý tưởng nhưng nó hoạt động cho đến khi chúng tôi nhận được bản sửa lỗi cấp API tốt hơn từ Google.

Ở phía trên của kịch bản nhúng bạn thiết var của bạn:

var isiPad = navigator.userAgent.match(/iPad/i) != null; 

Sau đó, trong chức năng nhấp chuột bạn sử dụng:

if (!isiPad) { 
player.playVideo(); 
}