Question

我使用angular-bootstrap-lightbox在灯箱中显示图片，视频和其他链接，但视频不起作用。而不是显示视频，会出现文本“观看视频”，当点击它时，它会转到我的链接。这是一个吸烟者：

http://plnkr.co/edit/g0jSl3WW36jGMYf3VNgz?p=preview

<!doctype html>
<html ng-app="demo1">
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-lightbox/0.12.0/angular-bootstrap-lightbox.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-lightbox/0.12.0/angular-bootstrap-lightbox.js"></script>

  <script src="script.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="angular-bootstrap-lightbox.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul class="gallery gallery1" ng-controller="GalleryCtrl">
      <li ng-repeat="image in tiles">
        <a ng-click="Lightbox.openModal(tiles, $index)">
          <p  ng-src="{{image.url}}">{{image.title}}</p>
      </a>
    </li>
  </ul>
</body>

JS

var app = angular.module('demo1', ['bootstrapLightbox']);

app.controller('GalleryCtrl', function ($scope, Lightbox) {

       var images = {
            name: "User 1",
            tiles: [{
                    'url': 'https://farm8.staticflickr.com/7300/12807911134_ff56d1fb3b_b.jpg',
                    'thumbUrl': 'https://farm8.staticflickr.com/7300/12807911134_ff56d1fb3b_s.jpg',
                    'title': "An Image"
                },
                {
                    'type': 'video',
                    'url': 'https://www.youtube.com/watch?v=Nfq3OC6B-CU',
                'thumbUrl': 'https://www.youtube.com/watch?v=Nfq3OC6B-CU',
                    'title': 'A Video'
                },
                {
                    'url': 'https://farm8.staticflickr.com/7300/12807911134_ff56d1fb3b_b.jpg',
                    'thumbUrl': 'https://farm8.staticflickr.com/7300/12807911134_ff56d1fb3b_s.jpg',
                    'title': ' An Image'
                },
                {
                    'type': 'video',
                    'url': 'https://www.youtube.com/watch?v=Nfq3OC6B-CU',
                    'thumbUrl': 'https://farm1.staticflickr.com/400/20228789791_52fb84917f_s.jpg',
                    'caption': 'The left and right arrow keys are binded for navigation. The escape key for closing the modal is binded by AngularUI Bootstrap.',
                'title': 'A Video'
                }

            ]}

    $scope.tiles = images.tiles;

    $scope.Lightbox = Lightbox;

});

希望有人能帮助我。

Answer 1

使用嵌入式网址，然后运行

'url': 'https://www.youtube.com/embed/Nfq3OC6B-CU'

而不是

'url': 'https://www.youtube.com/watch?v=Nfq3OC6B-CU'

Answer 2

你犯了两个容易解决的错误：

控制器模块适用于demo5，您的应用程序是demo1。
如angular-bootstrap-lightbox Github中所述，如果要嵌入视频，则需要使用ng-videosharing-embed脚本。

为什么视频不会在角灯箱中显示？图片有效但视频却没有

2 个答案: