Ekko-Lightbox 无法播放 YouTube 视频/链接图像出现问题答案

【问题标题】：Trouble with Ekko-Lightbox playing YouTube videos/linked images not appearingEkko-Lightbox 无法播放 YouTube 视频/链接图像出现问题
【发布时间】：2016-07-22 15:17:23
【问题描述】：

我正在尝试学习/弄清楚如何在具有 ekko-lightbox 插件属性的引导模式中成功播放 youtube 视频。我已经设法让 Vimeo 链接正常工作，但 YouTube 链接不会检索视频，并且按钮图像（外部链接）不会出现。我的工作文件保存在我的桌面/本地。我是否需要将文件上传到 ISP 才能使 YouTube 和图片链接正常工作？我还想知道如何让视频以模态播放，而不必依赖互联网。这样，如果我想展示一个网站概念并且没有互联网接入，我仍然可以拥有功能。

这是出现在我的索引文件中的代码。只有 Vimeo 视频链接和静态瀑布图像链接有效。按钮图像链接也不会出现。请帮忙！！！

<!DOCTYPE html>
<html>
    <head>
        <title>Mixed Lightbox Gallery in Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/ekko-lightbox.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">


                    <h3 class="page-header" id="mixed-gallery">Mixed gallery</h3>
                    <div class="row">
                        <div class="col-md-offset-1 col-md-10">
                            <div class="row">
                                <a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
                                    <img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
                                </a>
                                <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
                                    <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
                                </a>
                                <a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
                                    <img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive">
                                </a>
                            </div>
                        </div>
                    </div>



                            </div>
                        </div>
                    </div>



        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/ekko-lightbox.js"></script>

        <script type="text/javascript">
            $(document).ready(function ($) {
                // delegate calls to data-toggle="lightbox"
                $(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
                    event.preventDefault();
                    return $(this).ekkoLightbox({
                        onShown: function() {
                            if (window.console) {
                                return console.log('Checking our the events huh?');
                            }
                        },
                        onNavigate: function(direction, itemIndex) {
                            if (window.console) {
                                return console.log('Navigating '+direction+'. Current item: '+itemIndex);
                            }
                        }
                    });
                });

                //Programatically call
                $('#open-image').click(function (e) {
                    e.preventDefault();
                    $(this).ekkoLightbox();
                });
                $('#open-youtube').click(function (e) {
                    e.preventDefault();
                    $(this).ekkoLightbox();
                });

                // navigateTo
                $(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
                    event.preventDefault();

                    var lb;
                    return $(this).ekkoLightbox({
                        onShown: function() {

                            lb = this;

                            $(lb.modal_content).on('click', '.modal-footer a', function(e) {

                                e.preventDefault();
                                lb.navigateTo(2);

                            });

                        }
                    });
                });


            });
        </script>
    </body>
</html>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap youtube

【解决方案1】：

是的，您需要将文件保存在服务器上而不是本地，这样 Youtube 视频和图像才能正常工作。我也经历过这一点，通过检查代码，我看到了编写 javascript 的方式，这些资产在本地工作时被称为 file:// 而不是 http://。我认为这可能与相对链接有关，但即使使用绝对 URL 也是如此。

由于 Youtube 依赖于互联网连接，我想不出没有互联网就可以加载这些视频的方法。如果您只是在构思一些东西，请尝试使用本地存储的视频而不是 Youtube 视频。

【讨论】：