1
我想創建一個嵌入YouTube視頻並允許自定義控件的jQuery Mobile Popup(或任何類型的JavaScript模式)。帶自定義YouTube控件的jQuery Mobile彈出窗口
這是一個JSFiddle demo帶有一個基本的「播放」按鈕,希望可以幫助證明我的問題。
基本上,我在HTML的iframe代碼:
<iframe id="iframe-video" width="400" height="300" src="http://www.youtube.com/embed/a0gact_tf_0" frameborder="0" allowfullscreen></iframe>
然後,當視頻加載我這樣做:
$(document).on("pagecreate", function() {
// bind click events
$(document).on('click', '#play', function() {
playVideo();
return false;
});
$(".ui-popup iframe")
.attr("width", 0)
.attr("height", "auto");
$("#popupVideo").on({
popupbeforeposition: function() {
initYoutubePlayer();
// call our custom function scale() to get the width and height
var size = scale(497, 298, 15, 1),
w = size.width,
h = size.height;
$("#popupVideo iframe")
.attr("width", w)
.attr("height", h);
},
popupafterclose: function() {
$("#popupVideo").html("<span></span>");
$("#popupVideo iframe")
.attr("width", 0)
.attr("height", 0);
},
});
});
function initYoutubePlayer() {
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
alert('onYouTubeIframeAPIReady');
player = new YT.Player('iframe-video', {
events: {
'onReady': onPlayerReady,
}
});
};
function onPlayerReady(event) {
alert('ready');
};
alert('initialized');
}
function playVideo() {
alert('playVideo...');
//player.playVideo();
}
加載視頻工作正常,但我不能得到YouTube iFrame API工作,我可以實例化YT.Player。換句話說,'onYouTubeIframeAPIReady'不會觸發。
我已經嘗試了各種各樣的這個JSFiddle代碼的排列,但感覺像我可能會失去明顯的東西。
是否有可能在jQuery Mobile Popup或JavaScript模式中使用自定義YouTube控件?
哇,這是快。謝謝! – kanso
@kanso很高興幫助。小提琴將完美運作。由於某些原因,該代碼段不能在SO內正常運行。 – Iceman