Question

我正在尝试学习/弄清楚如何使用ekko-lightbox插件属性在Bootstrap模式中成功播放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>

Answer 1

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

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

Ekko-Lightbox播放YouTube视频/链接图片时出现问题

1 个答案: