Bootstrap modal data-dismiss on close modal 不关闭 mozilla 和 IE 中的音频答案

【问题标题】：Bootstrap modal's data-dismiss on close modal not closing audio in mozila and IEBootstrap modal data-dismiss on close modal 不关闭 mozilla 和 IE 中的音频
【发布时间】：2013-02-24 18:17:02
【问题描述】：

我正在使用引导模式弹出窗口来显示项目中附加的音频/视频。单击取消按钮时，模式应关闭并且音频应停止播放。这在 Chrome 中正常工作，但在 mozila 和 IE 中，当我单击取消模式时，模式会消失，但音频/视频会继续播放。

这是模态弹窗的 HAML 代码：

%a{ href: "#", class: "x", title: "Close", :'data-dismiss' => "modal" }
    .diagRepeater &nbsp;

    = swf_tag "StrobeMediaPlayback",
      :width => '620',
      :height => (attachment.media_content_type.split('/')[0] == 'audio' ? '65' : '340'),
      :flashvars => { :urlIncludesFMSApplicationInstance => "true",
      :src => URI.encode("#{request.protocol}#{request.host_with_port}" + attachment.media.url),
      :playButtonOverlay => (attachment.media_content_type.split('/')[0] == 'audio' ? 'false' : 'true'),
      :controlBarAutoHide => (attachment.media_content_type.split('/')[0] == 'audio' ? 'false' : 'true') },
      :parameters => { :allowFullScreen => "true", :wmode => "direct",     :allowScriptAccess => "always" }

这是 bootstrap.js 文件中的代码：

hide: function (e) {
e && e.preventDefault()

    var that = this
    alert(this.toString());
    e = $.Event('hide')

    this.$element.trigger(e)

    if (!this.isShown || e.isDefaultPrevented()) return

    this.isShown = false

    $('body').removeClass('modal-open')

    escape.call(this)

    this.$element.removeClass('in')

    $.support.transition && this.$element.hasClass('fade') ?
      hideWithTransition.call(this) :
      hideModal.call(this)
  }

【问题讨论】：

当您关闭模式时，您可以对您的视频调用一个操作来停止播放。
怎么做，你能解释一下吗

标签： jquery ruby-on-rails twitter-bootstrap haml

【解决方案1】：

试试这样的：

$('.x').click(function(){
    var myAudio = document.getElementsByTagName("audio")[0];
    if(myAudio != undefined){
        myAudio.StopPlay();
    }
}

【讨论】：

嘿斯科特，感谢您的快速回答，但它对我不起作用。它给出了 stopPlay() 不是函数的错误。

【解决方案2】：

这真的不应该太难。我认为您的 javascript 存在问题。你有没有像 Railscasts 解释的那样实现 Bootstrap？我从来没有遇到过模态和视频方面的问题。

http://railscasts.com/episodes/328-twitter-bootstrap-basics

http://twitter.github.com/bootstrap/

【讨论】：

【解决方案3】：

如果您遇到任何问题，有一个简单的方法，只需使用下面的代码并先清除模态的 html 并重新放置它，它应该每次都可以工作：

$('.x').live('click',function(){
    var media_html = '';
    $('.modalBox').each(function(){
         media_html = $(this).html();
         $(this).html('');
         $(this).html(media_html);
    });
});

【讨论】：

【解决方案4】：

<a href="#" class="mydemo">Open Video</a>
<div id="myModal" class="modal hide" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    </div>
    <div class="modal-body"> <iframe width="470" height="310" frameborder="0" allowfullscreen=""></iframe></div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

<script type="text/javascript">
$('.mydemo').click(function () {
            var src = 

'http://www.youtube.com/v/2EnI9K8Fkf4&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;autoplay=1';
            $('#myModal').modal('show');
            $('#myModal iframe').attr('src', src);
            });

        $('#myModal.modal').bind('hide', function () {
            var iframe = $(this).children('div.modal-body').find('iframe');
            var src = iframe.attr('src');
            iframe.attr('src', '');
            iframe.attr('src', src);
            });

</script>

此代码在 IE 上完美运行。

【讨论】：