我想创建一个嵌入 YouTube 视频并允许自定义控件的 jQuery Mobile Popup(或任何类型的 javascript 模式)。
这是一个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 弹出窗口或 JavaScript 模式中拥有自定义 YouTube 控件？
最佳答案
<强> SEE FIDDLE
<!DOCTYPE html>
<title>JQM latest</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<body>
<div data-role="page" id="index">
<a href="#popupVideo" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Launch video player</a>
<div data-role="popup" id="popupVideo" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
<a href="#" id="play" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Play</a>
<br>
<div id="player"></div>
<!-- <iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298" seamless=""></iframe> -->
</div>
</div>
</body>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'a0gact_tf_0',
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {}
function stopVideo() {
player.stopVideo();
}
$(document).on('click', '#play', function() {
player.playVideo();
});
</script>
</html>关于javascript - 带有自定义 YouTube 控件的 jQuery Mobile 弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38999543/