0

我正在使用 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="{{vgUrl} } 在上面的 JS 中获取 HTML 中 vg-url 的值？另外，我需要为最终变量传递一个值，我在上面称为 {{vgUrl2}}。

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

4

1 回答 1

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，因为如果它适用于数字，我不会。

于 2015-11-06T19:56:31.457 回答