Videogular：动态海报不起作用

Question

我正在遍历视频并尝试为每个视频动态设置一张海报：

index.html

<div ng-controller="VideoController as controller" class="carousel-cell carousel__slide" data-ng-repeat="tpl in templates track by $index">
    <div class="videogular-container">
        <videogular vg-theme="controller.config.theme.url">
            <vg-media vg-src="controller.config.sources"
                          vg-tracks="controller.config.tracks"
                          vg-native-controls="true">
            </vg-media>
          <vg-poster
            vg-url="'{{ tpl.image }}'">
          </vg-poster>
          <vg-overlay-play></vg-overlay-play>
        </videogular>
    </div>
</div>

video.controller.js

'use strict';

angular.module('video', [])
.controller('VideoController',
["$sce", function($sce) {

  this.config = {
            preload: "none",
            sources: [
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
                {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
            ],
            theme: {
                url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
            }
        };
  ...

然而，呈现的 HTML 是这样的：

<vg-poster vg-url="'http://example.net/my-dynamica-image.jpg'" class="ng-isolate-scope"><img ng-src="{{ tpl.image }}" ng-class="API.currentState" src="{{ tpl.image }}" class="stop"></vg-poster>

请注意，它适用于 vg-ur 但不适用于 ng-src。

有什么线索吗？

Answer 1

指令 vg-url 需要一个 angular 表达式，因此您可以保留为 tpl.image:

<div ng-controller="VideoController as controller" class="carousel-cell carousel__slide" data-ng-repeat="tpl in templates track by $index">
    <div class="videogular-container">
        <videogular vg-theme="controller.config.theme.url">
            <vg-media vg-src="controller.config.sources"
                          vg-tracks="controller.config.tracks"
                          vg-native-controls="true">
            </vg-media>
          <vg-poster
            vg-url="tpl.image">
          </vg-poster>
          <vg-overlay-play></vg-overlay-play>
        </videogular>
    </div>
</div>

http://videogular.com/docs/#/api/com.2fdevs.videogular.plugins.poster.directive:vgPoster

Videogular：动态海报不起作用

Videogular: dynamic posters not working

javascript

angularjs

videogular

index.html

video.controller.js