Videogular - 创建带有附加变量的自定义海报

Question

我正在使用 Videogular 作为视频播放器的现有 Angular 站点，并且我创建了两个新的自定义元素（一个包含文本的灰色条 DIV 和另一个包含徽标的 DIV）。这些新的 DIV 覆盖视频海报图像并随海报出现/消失。

我正在使用 Videogular 海报插件，并且它的自定义版本运行良好。图层正确显示/消失。

我需要传递两个新变量/值：1) 将插入到覆盖视频的图层中的文本变量和 2) 第二张图像的 URL 变量（第一张已经工作的图像是海报图像本身）。

这是显示视频/海报的每个页面中的 HTML：

<div class="videogular" mixpanel-track="Video Played" mt-key="Video Name" data-mt-desc="Introduction" mt-video
       box-init box-ratio="1.77">
    <videogular vg-theme="videogular.theme">
      <vg-media vg-src="[{src: sceService.trustAsResourceUrl('http://static.videogular.com/assets/videos/videogular.mp4'), type: 'video/mp4'}]"></vg-media>
      <vg-controls vg-autohide="videogular.autoHide" vg-autohide-time="videogular.autoHideTime">
        <vg-play-pause-button></vg-play-pause-button>
        <vg-scrub-bar>
          <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        </vg-scrub-bar>
        <vg-volume>
          <vg-mute-button></vg-mute-button>
          <vg-volume-bar></vg-volume-bar>
        </vg-volume>
        <vg-fullscreen-button></vg-fullscreen-button>
      </vg-controls>
      <vg-overlay-play></vg-overlay-play>
      <vg-poster vg-url="'http://www.videogular.com/img/videogular.png'" vg-text="'this is text that will display in the grey bar overlaying video'" vg-url2="'http://www.videogular.com/img/videogular2.png'"></vg-poster>

    </videogular>
  </div>

注意视频 (vg-src) 和海报图片 (vg-url) 的值是如何在 HTML 中定义的，而不是在外部 Videogular javascript 中定义的。

您还可以在上面的 HTML 中看到，我需要为将出现在其中一个额外海报层中的文本添加第二个海报变量 (vg-text)，并且我需要第三个海报变量 (vg- url2) 用于应出现在覆盖海报图像的两个新 DIV 之一中的图像。

下面我的自定义海报 JS 正确显示了海报图片和两个新的 DIV，但我需要为这些 DIV 中的内容传递值：

"use strict";
angular.module("com.2fdevs.videogular.plugins.poster", [])
.run(
["$templateCache", function ($templateCache) {
    $templateCache.put("vg-templates/vg-poster",
        '<img ng-src="{{vgUrl}}" ng-class="API.currentState">\
          <div class="video-overlay-logo" ng-class="API.currentState">\
            <img ng-src="{{vgUrl2}}">\
          </div>\
          <div class="video-overlay-bar" ng-class="API.currentState">\
              <div ng-src="{{vgText}}" ng-class="API.currentState">   </div>\
          </div>');
}]
)
.directive("vgPoster",
[function () {
    return {
        restrict: "E",
        require: "^videogular",
        scope: {
            vgUrl: "=?"
        },
        templateUrl: function (elem, attrs) {
            return attrs.vgTemplate || 'vg-templates/vg-poster';
        },
        link: function (scope, elem, attr, API) {
            scope.API = API;

            if (API.isConfig) {
                scope.$watch("API.config",
                    function () {
                        if (scope.API.config) {
                            scope.vgUrl = scope.API.config.plugins.poster.url;
                        }
                    }
                );
            }
        }
    }
}]
);

如何设置我的自定义海报 JS，以便它在 JS 中的 ng-src="{{vgText}}" 和 HTML 中的 vg-text 之间创建绑定，就像 ng-src="{上面 JS 中的 {vgUrl}} 获取 HTML 中 vg-url 的值？另外，我需要为最终变量传递一个值，我在上面称为 {{vgUrl2}}。

非常感谢任何和所有的指针。

Answer 1

在您的 DDO 范围属性中添加您需要的任何变量：

.directive("vgPoster",
[function () {
    return {
        restrict: "E",
        require: "^videogular",
        scope: {
            vgUrl: "=?",
            vgUrlAlt: "=?",
            vgText: "=?"
        },
        templateUrl: function (elem, attrs) {
            return attrs.vgTemplate || 'vg-templates/vg-poster';
        },
        link: function (scope, elem, attr, API) {
            scope.API = API;

            if (API.isConfig) {
                scope.$watch("API.config",
                    function () {
                        if (scope.API.config) {
                            scope.vgUrl = scope.API.config.plugins.poster.url;
                        }
                    }
                );
            }
        }
    }
}]
);

并像使用 vgUrl 一样在 HTML 中使用。

<vg-poster vg-url="yourUrl" vg-url-alt="yourUrlAlt" vg-text="yourText"></vg-poster>

请注意，我创建了一个 vgUrlAlt 而不是 vgUrl2，因为如果它适用于数字，我不这样做。