0
Ich benutzte die angular-Bootstrap-Lightbox, um Bilder, Videos und andere Links in Lightbox anzuzeigen, aber Videos funktionieren nicht. Anstatt Video anzuzeigen, erscheint ein Text "Video ansehen" und wenn ich darauf klicke, bringt es mich zum Link. Hier ist ein Plunker:Warum wird das Video nicht in einem abgewinkelten Leuchtkasten angezeigt? Bilder funktionieren, aber Videos nicht
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;
});
Hoffnung jemand kann mir helfen.
Sie sind nicht das Video einbetten; du verbindest dich einfach damit. –
@ChrisStanley - Immer noch nicht funktioniert. Ich habe den Link im Plunker geändert, um Video einzubetten, aber kein Glück. – Octtavius
Der Link ist nur das: ein Link. Wenn Sie darauf klicken, wird es zu dieser URL gehen. Was ich sage ist, dass Sie das Video einbetten müssen. Wie in, Sie können keine Verknüpfung zu ihr erstellen, oder es wird nur zu dem Video navigieren. Sie müssen die Youtube-Einbettung verwenden, die einen iframe verwendet, um das Video auf Ihrer Seite anzuzeigen. –