Question

我阅读了很多类似的帖子，但没有为我的项目找到合适的解决方案。

我想让用户使用简单的<a>应答器显示/隐藏引导模式。这是一个自动播放= 1的Youtube iframe。

第一个问题是当页面加载时，视频正在启动，我们可以听到声音，但当然无法在出价模式中看到视频。第二个问题，当用户用十字架关闭模态或只是在模态外点击时，我需要停止视频。

以下是在线演示：See live demo

这是我的代码，我正在使用Bootstrap 3+：

<div aria-labelledby="myModalLabel" class="modal fade responsive-video" id="myModal" role="dialog" tabindex="-1">
  <div class="modal-header">
    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
  </div>
  <div class="modal-body"></div>
</div>

和JS：

<script>
  $('#myModal').on('show', function () {
    $('div.modal-body').html('<iframe width="100%" height="360" src="https://www.youtube.com/embed/PUcTN5ou2o0?autoplay=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
  });
  $('#myModal').on('hide', function () {
    $('div.modal-body').html('');
  });
</script>

Answer 1

您最初可以保留iframe空白的SRC属性，并在用户打开模态窗口时将其设置为所需的YouTube视频，其中autoplay = 1。

HTML：

    Ext.application({
    name : 'Test',

    launch : function() {
        Ext.Viewport.add({
            xtype: 'container',
            fullscreen: true,
            html: 'Application panel',
            items: [{
                xtype: 'button',
                text: 'Show first menu',
                listeners: {
                    tap: function() {
                        Ext.Viewport.removeMenu('left');
                        var menu = Ext.create('Ext.Menu', {
                            items: [
                                {
                                    text: 'Settings on first menu',
                                    iconCls: 'settings'
                                },
                                {
                                    text: 'New Item on first menu',
                                    iconCls: 'compose'
                                },
                                {
                                    text: 'Star on first menu',
                                    iconCls: 'star'
                                }
                            ]
                        });
                        Ext.Viewport.setMenu(menu, {
                            side: 'left',
                            reveal: true
                        });
                        Ext.Viewport.showMenu('left');
                    }
                }
            },
                {
                    xtype: 'button',
                    text: 'Show second menu',
                    listeners: {
                        tap: function() {
                            Ext.Viewport.removeMenu('left');

                            var secondmenu = Ext.create('Ext.Menu', {
                                items: [
                                    {
                                        text: 'Settings on second menu',
                                        iconCls: 'settings'
                                    },
                                    {
                                        text: 'New Item on second menu',
                                        iconCls: 'compose'
                                    },
                                    {
                                        text: 'Star on second menu',
                                        iconCls: 'star'
                                    }
                                ]
                            });
                            Ext.Viewport.setMenu(secondmenu, {
                                side: 'left',
                                reveal: true
                            });
                            Ext.Viewport.showMenu('left');
                        }
                    }
                }
            ]
        });
    }
});

JS：

<div aria-labelledby="myModalLabel" class="modal fade responsive-video" id="myModal" role="dialog" tabindex="-1">
  <div class="modal-header">
    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
  </div>
  <div class="modal-body">
    <iframe id="youtube" src="" />
  </div>
</div>

Answer 2

抱歉，无法发表评论，遗漏了这项权限。所以快速回答两种可能的解决方案。

解决方案1：使用Youtube API

您可以在此处找到API参考：https://developers.google.com/youtube/iframe_api_reference

因此，您可以在显示页面时创建iframe，并在启动模式时使用play()方法。

解决方案2：使用预制播放器

那里有很多好的解决方案。正如我现在所处理的那样，我建议使用http://afterglowplayer.com（基于video.js）或其他类似解决方案。有灯箱支持，你不必处理这种东西。：）

具有自动播放功能的视频在Bootstrap模式中，当模态关闭时停止

2 个答案: