Question

我在我的视频库中使用video.js。我试过video.js，但收到以下错误信息。

未捕获的TypeError：$（...）。lightGallery不是一个函数我的代码：

<html>
<head>
    <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://vjs.zencdn.net/4.12/video.js"></script>
</head>

<body>
    <!-- Hidden video div -->
    <div style="display:none;" id="video1">
        <video class="lg-video-object lg-html5 video-js vjs-default-skin" controls preload="none">
            <source src="videos/test1.mp4" type="video/mp4">
             Your browser does not support HTML5 video.
        </video>
    </div>
    <div style="display:none;" id="video2">
        <video class="lg-video-object lg-html5 video-js vjs-default-skin" controls preload="none">
            <source src="videos/test2.mp4" type="video/mp4">
             Your browser does not support HTML5 video.
        </video>
    </div>

    <!-- data-src should not be provided when you use html5 videos -->
    <ul id="video-gallery">
      <li data-poster="video-poster1.jpg" data-sub-html="video caption1" data-html="#video1" >
          <img src="1.jpg" />
      </li>
      <li data-poster="video-poster2.jpg" data-sub-html="video caption2" data-html="#video2" >
          <img src="2.jpg" />
      </li>
      ...
    </ul>


</body>
<script>
    $('#video-gallery').lightGallery({
        videojs: true
    }); 

</script>

</html>

请提出解决方案。

Answer 1

您似乎错过了lightgallery的脚本标记

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.4/js/lightgallery.min.js"></script>

Answer 2

    $(document).ready(function() {    
        $('#video-gallery').lightGallery({
            videojs: true
        }); 
    });

Answer 3

奇怪的是，但是当前版本只能以这种方式初始化（典型的JQuery语法不起作用）：

lightGallery($('#video-thumbnails')[0], {
    download: false,
    //other options
});

甚至在Github上发布了问题：https://github.com/sachinchoolur/lightgallery.js/issues/42

视频库获取Uncaught TypeError：$（...）。lightGallery不是一个函数

3 个答案: