2

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

这是模式弹出的 HAML 代码：

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

    = 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)
  }
4

4 回答 4

3

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

$('.x').live('click',function(){
    var media_html = '';
    $('.modalBox').each(function(){
         media_html = $(this).html();
         $(this).html('');
         $(this).html(media_html);
    });
});
于 2013-03-16T08:26:00.930 回答
1

尝试这样的事情：

$('.x').click(function(){
    var myAudio = document.getElementsByTagName("audio")[0];
    if(myAudio != undefined){
        myAudio.StopPlay();
    }
}
于 2013-03-09T07:59:06.620 回答
0

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

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

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

于 2013-03-09T12:56:38.027 回答
0 
<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 上完美运行。

于 2013-05-16T04:53:16.470 回答