无法使模态中的 Youtube 视频停止在 IE 和 Chrome 中播放

Question

我有一组模态，每个模态都有不同的 youtube 视频。我添加了代码以在每次关闭模式时重置视频的 src，但它仅适用于 Firefox，不适用于 IE 或 Chrome。我尝试了一些不同的代码，但无论我尝试什么，我都只能让它在 Firefox 中工作。

JavaScript：

function close_modal(){  

    //hide the mask  
    $('#mask').fadeOut(500);  

    //hide modal window(s)  
    $('.modal_window').fadeOut(500);

    //enable scoll on main page
    $('body').removeClass('stop-scrolling')

    var video = $("#currentVideo").attr("src");
    $("#currentVideo").attr("src","");
    $("#currentVideo").attr("src",video);  

}  
function show_modal(modal_id){

    //disable scroll on main page
    $('body').addClass('stop-scrolling')  

    //set display to block and opacity to 0 so we can use fadeTo  
    $('#mask').css({ 'display' : 'block', opacity : 0});  

    //fade in the mask to opacity 0.8  
    $('#mask').fadeTo(500,0.8);  

     //show the modal window  
    $('#'+modal_id).fadeIn(500);  

}

模态 HTML：

<div id='jensVoigtModal' class='modal_window'>
    <h3>Jens Voigt</h3>
    <p>(born 17 September 1971) is a German professional road bicycle racer for UCI ProTeam Trek Factory Racing. Voigt is known for his propensity to attack, and for his positive racing attitude.<br />
    <br />
    He is capable of repeated attacking, holding a high tempo, and breaking away from the peloton. He has worn the yellow jersey of the Tour de France twice, though he has never challenged for the overall title due to his lack of ability in the mountains. In cycling folklore, he is considered as one of the best rouleur riders to this day.<br />
    <br />Voigt is generally popular with cycling fans, both for his aggressive riding style and his affable, forthright and articulate style in dealing with the public and media.<br />
        <center>
            <iframe id="currentVideo" width="600" height="338" src="http://www.youtube.com/embed/_Zeu4mPATpA?wmode=opaque&html5=1&rel=0" frameborder="0" allowfullscreen></iframe>
        </center>
    <br />
    Read more about Jens Voigt on the Trek Factory Racing homepage: <a href="http://www.trekfactoryracing.com/team/riders/jens-voigt" id="pageLink" target="_blank">”Jens Voigt”</a>
    </p>
</div>

有没有办法让它在不使用 youtube api 的情况下在 IE 和 Chrome 中运行？非常感谢您的帮助。

Answer 1

为什么不使用 youtube API

把iframe原来的src改成

http://www.youtube.com/embed/_Zeu4mPATpA?wmode=opaque&html5=1&rel=0&enablejsapi=1

注意我添加到末尾的 &enablejsapi=1。

然后在您的脚本文件中添加对下面 YouTube api 的调用

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() {
        player = new YT.Player('currentVideo', {

        });
      }

var player 用于引用 Video 函数。 currentVideo 是 iframe 的 id。

最后你可以停止播放器使用

player.stopVideo()

好吧，它仍然没有应有的那么简单，但它可能是最可靠的方法