Videogular - Создание собственного плаката с дополнительными переменными

0

Я работаю с существующим сайтом Angular с Videogular как видеоплеер, и я создал два новых пользовательских элемента (серый бар DIV, который содержит текст, а другой - логотип). Эти новые DIVs накладывают изображение плаката видео и появляются/исчезают с плакатом.

Я использую плагин плаката 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 показано изображение плаката и два новых DIVs, но мне нужно передать значения для содержимого в этих 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 так, чтобы он создавал привязку между ng-src= "{{vgText}}" в JS и vg-тексте в HTML, точно так же, как ng-src= "{{vgUrl} } в JS выше выбирает значение для vg-url в HTML? Также мне нужно передать значение для конечной переменной, что я назвал {{vgUrl2}} выше.

Большое спасибо за все и все указатели.

Теги:
video
variables
videogular
poster

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;
                        }
                    }
                );
            }
        }
    }
}]
);

И используйте в своем HTML, как вы используете vgUrl.

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

Обратите внимание, что я создал vgUrlAlt, а не vgUrl2, потому что не знаю, будет ли он работать с числами.

Поделиться
  • 0
    Спасибо @elecash! До сих пор это работает с изображением Alt, но я не знаю, что использовать вместо ng-src для помещения текста в div (т. <div ng-src="{{vgText}}> , очевидно, неверно, и Я попытался <div ng-class="API.currentState">{{vgText}}</div> безрезультатно).
  • 0
    Теперь все работает. Я использовал <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-url-alt="'http://www.videogular.com/img/videogular2.png'"></vg-poster> в коде HTML Videogular И <div>{{vgText}}</div> в код директивы JS вместе с подсказкой из @elecash выше относительно определения области действия. Большое спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню