为什么视频不显示在有角度的灯箱中?图像有效，但视频无效;t

Why video is not displayed in angular lightbox? Images work but videos don't

本文关键字：视频 有效 图像 无效 显示 为什么      更新时间：2023-09-26

我使用angular bootstrap lightbox在lightbox中显示图片、视频和其他链接，但视频不起作用。显示的不是视频，而是一个文本"观看视频"，当点击它时，它会将我带到链接。这里有一个plunker：

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;
});

希望有人能帮助我。

使用嵌入的url，然后它就可以工作

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

而不是

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

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

  • 控制器模块用于demo5，您的应用程序为demo1
  • 正如angular bootstrap lightbox Github中所揭示的，如果你想嵌入视频，你需要使用ng视频共享嵌入脚本
相关文章：