为什么视频不显示在角灯箱中？图片有效，但视频无效答案

【问题标题】：Why video is not displayed in angular lightbox? Images work but videos don't为什么视频不显示在角灯箱中？图片有效，但视频无效
【发布时间】：2016-05-03 16:21:41
【问题描述】：

我使用 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>

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;

});

希望任何人都可以帮助我。

【问题讨论】：

您没有嵌入视频；你只是链接到它。
@ChrisStanley -- 仍然无法正常工作。我将 plunker 中的链接更改为嵌入视频，但没有成功。
链接就是这样：一个链接。当您单击它时，它将转到该网址。我的意思是你必须嵌入视频。如中所示，您无法创建指向它的链接，否则它只会导航到视频。您需要利用 youtube 嵌入，它利用 iframe 在您的页面上显示视频。

标签： javascript jquery angularjs

【解决方案1】：

使用嵌入的url，然后就可以了

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

而不是

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

【讨论】：

还是不行。正如你所说，我更新了 plunker。我留下了一个嵌入的链接和一个带有“watch？v”关键字的链接，但仍然不起作用。顺便说一句，在 Angular 演示中，它也用于与“watch?v”的链接。无法理解我做错了什么

【解决方案2】：

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

控制器模块用于 demo5，您的应用程序为 demo1。
正如angular-bootstrap-lightbox Github 中公开的那样，如果要嵌入视频，则需要使用ng-videosharing-embed 脚本。

【讨论】：