Videogular

Question

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

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

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

这是每个显示video/poster的页面中的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 之间创建绑定，就像如何上面 JS 中的 ng-src="{{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，因为如果它适用于数字，我不会这样做。

Videogular - 使用附加变量创建自定义海报

Videogular - Creating custom poster with additional variables

variables

video

poster

angularjs