隐藏弹出窗口时暂停/停止 YouTube 视频答案

【问题标题】：Pausing/Stopping YouTube video when hiding popup window隐藏弹出窗口时暂停/停止 YouTube 视频
【发布时间】：2014-04-03 11:40:43
【问题描述】：

我一直在研究以找到答案，但似乎无法弄清楚如何在隐藏弹出窗口时让这个 youtube 视频停止播放。这是我的代码...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {  

            var id = '#dialog';

            //Get the screen height and width
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();

            //Set heigth and width to mask to fill up the whole screen
            $('#mask').css({'width':maskWidth,'height':maskHeight});

            //transition effect     
            $('#mask').fadeIn(1000);    
            $('#mask').fadeTo("slow",0.8);  

            //Get the window height and width
            var winH = $(window).height();
            var winW = $(window).width();

            //Set the popup window to center
            $(id).css('top',  winH/2-$(id).height()/2);
            $(id).css('left', winW/2-$(id).width()/2);

            //transition effect
            $(id).fadeIn(2000);     

        //if close button is clicked
        $('.window .close').click(function (e) {
            //Cancel the link behavior
            e.preventDefault();

            $('#mask').hide();
            $('.window').hide();
        });     

        //if mask is clicked
        $('#mask').click(function () {
            $(this).hide();
            $('.window').hide();
        });

    });
    </script>

    </head>

<body>

<div id="boxes">
    <div id="dialog" class="window">

    <a href="#" class="close"><img src="exit_button.png" width="25" height="25" style="float:right;" /></a>

    <br />
    <br />

    <iframe width="853" height="480" src="http://www.youtube.com/embed/9SgIIlloQ5U?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

    </div>
    <!-- Mask to cover the whole screen -->
    <div id="mask"></div>
</body>
</html>

我是一个 javascript 新手，这对您来说可能很明显，但我只需要一个简单的解决方案来使其正常工作。

【问题讨论】：

标签： javascript jquery youtube

【解决方案1】：

您需要使用 YouTube API 生成播放器并使用 JavaScript 从您的页面控制它。完整的文档在这里：https://developers.google.com/youtube/js_api_reference

基本上您需要做的是使用此 URL 而不是 iframe 将视频作为对象嵌入页面中：

https://www.youtube.com/v/9SgIIlloQ5U?version=3&enablejsapi=1

这会加载选择的播放器和视频并启用 JavaScript API。然后您可以使用这些方法来控制播放器：当您需要开始播放视频时触发player.playVideo()，当您需要暂停视频时触发player.pauseVideo()。

您还可以使用 API 做很多其他事情 - 所有信息都在提供的链接中。

【讨论】：