弹出窗口中的Youtube视频在窗口关闭时不会停止播放

时间:2012-08-15 18:44:11

标签: jquery api youtube

所以基本上,我有一个弹出的代码,让div弹出。在里面,有一个youtube视频播放器。一切正常,直到我关闭窗口,我仍然可以听到背景音乐,这意味着视频仍在播放。我想阻止它。 我做了一些研究并且落在了youtube API上,但它仍然没有用。

这是我的div代码

echo "<div id='popupContact'>";
echo "<a id='popupContactClose'>x</a>";
echo "<div><h1>" .$row['title']. "</h1></div>";
echo "<p id='contactArea'>";
if($row[type] == "image")
echo "<img src='gallery/" .$row['path']. "' alt='" .$row['title']. "'/>";
else
echo "<iframe width='560' height='315' src='http://www.youtube.com/v/" .$row['path']."?        enablejsapi=1&version=3&playerapiid=ytplayer' frameborder='0' allowfullscreen></iframe>";
echo "<br/><br/>" .$row['description']. "</p>";
echo "</div>";
echo "<div id='backgroundPopup'></div>";

以下是弹出窗口的代码:

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP
//Click the button event!
$("#button").click(function(){
    //centering with css
    centerPopup();
    //load popup
    loadPopup();
});

//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
    disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
    disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup();
    }
});

});

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
    $("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
stop();
}
}
function onYouTubePlayerReady(playerId) {
alert("YAY");
ytplayer = document.getElementById("ytplayer");
}

function stop() {
if (ytplayer) {
ytplayer.stopVideo();
}
}

谢谢你, ARA

2 个答案:

答案 0 :(得分:0)

可变范围。您只需在ytplayer函数中定义onYouTubePlayerReady(),并且不返回该值。当该函数返回时,ytplayer值将被销毁。

您需要定义函数的变量OUTSIDE:

var ytplayer;   // now a global variable.
function onYouTubePlayerReadye(playerID) {
   ytplayer = document.getElementById('ytplayer');
}

答案 1 :(得分:0)

我正在查看Youtube Documentation(iframe),我认为你正在混淆不同的api

JavaScript API上声明

  

我们建议使用SWFObject嵌入将使用JavaScript API访问的所有播放器。

但您使用的是iframe。所以我认为你需要创建一个名为

的函数

function onYouTubeIframeAPIReady()

其中有几行代码可以与其他函数一起设置所有内容。