Question

我试图做一个小技巧，允许在不使用YouTube的API的情况下自动播放/停止嵌入在引导模式中的youtube播放器（因为我需要更多视频提供在将来所以我希望有一个通用的解决方案）。

诀窍就是这样：

显示并播放带有YouTube视频（iframe）的模式[视频有autoplay=1来源]
隐藏模态后（hide event）iframe的src会在该iframe的data-iframe-src属性中捕获，并且iframe的原始src已设置至''，视频停止播放。
一旦我加载了视频（show event)我试图从src属性重新分配iframe的data-iframe-src，但唯一的一件事就是集合是?autoplay=1我认为可能是因为网址结构（//youtube...）

我尝试使用encodeURIComponent和decodeURIComponent，但仍然没有运气。

这是我的代码：

$('#modal-video').on('hide show',function(e){
var $iframe = $(this).find('.video-wrap:visible').find('iframe'),
    iframe_src = '';

if ( e.type == 'hide' ) {
    // Snapshot
    $iframe.attr('data-iframe-src', encodeURIComponent( $iframe.attr('src') ) );

    // Clear iframe
    $iframe.attr('src','');
}
else {
    // Show and re-assign the iframe src
    $iframe.attr('src', decodeURIComponent( $iframe.attr('data-iframe-src') ) );
}
});

有什么想法吗？

Answer 1

为什么不使用bootstrap本身的回调？

$(function() {
  $('#myModal').on('shown.bs.modal', function (e) {
    var src = $('#videowrapper').attr('data-iframe-src');
    $('#videowrapper').attr('src', src);
  });

  $('#myModal').on('hidden.bs.modal', function (e) {
    $('#videowrapper').attr('src', '');
  });
});

这可以按照您的意愿使用。

编辑：

data属性从jQuery加载到src属性

<iframe id="videowrapper" width="560" height="315" src="" data-iframe-src="https://www.youtube.com/embed/SJTyY2csya8?autoplay=true" frameborder="0" allowfullscreen></iframe>

EDIT2：

工作示例：http://jsfiddle.net/trk9vkat/

Answer 2

我在模态中有多个视频，如下所示：

<div id="modal">
<div class="video-wrap video-1">
    iframe...
</div>
<div class="video-wrap video-2">
    iframe...
</div>
<div class="video-wrap video-3">
    iframe...
</div>

我认为问题出在事件名称上，应该是hide和shown，这样我就可以使用:visible选择器了。

我在关闭模态之前没有设置data-iframe-src，现在我已经在触发模态的链接中设置了它。

所以这就是诀窍：

 // Video Trigger
    $('.play-video').on('click',function(e){
    e.preventDefault();
    var id = $(this).data('video-id'),
        $video = $('.' + id),
        $iframe = $video.find('iframe');
        src = $iframe.attr('src');

    // Hide all
    $('.video-wrap').hide();

    // Show selected video
    $video.show();

    // Show modal
    center_modal('modal-video');

    // Autoplay video
    src = video_autoplay( src );
    if ( typeof( $iframe.attr('data-iframe-src') ) == 'undefined' ) {
        $iframe.attr('data-iframe-src', src);
    }
});



// Show / Hide
    $('#modal-video').on('hide shown',function(e){
    var $iframe = $(this).find('.video-wrap:visible').find('iframe');
    if ( e.type == 'hide' ) {
        $iframe.attr('src','');
    }
    else {
        if ( $iframe.attr('src') == '' ) {
            $iframe.attr('src',$iframe.attr('data-iframe-src'));
        }
    }
});

感谢您的时间和救命！ ; - ）

Bootstrap Modal＆amp; YouTube播放器技巧

2 个答案: