Директива для загрузки видео файла в ng-repeat

Question

У меня есть директива, над которой я работаю, которая будет загружать видео, расположенное в службах мультимедиа Azure, в Dash Player и воспроизводить. Будет загружено несколько видео, поэтому мне нужно загрузить его в ng-repeat, вот HTML-код с основным циклом

<div class="row">
     <div class="col-xs-6 col-sm-4 monster-admin-video-wrapper" ng-repeat="video in vm.videos | orderBy: 'Title' | filter: VideoFilter ">
           <ng-azuremediaplayer hideapprove="true"></ng-azuremediaplayer>
     </div>
 </div>

и директива

app.directive('ngAzuremediaplayer', function ($compile) {
    return {
        restrict: 'AE',
        link: function (scope, elem, attrs) {
            scope.hideapprove = attrs.hideapprove;
            scope.hidereject = attrs.hidereject;
            scope.hideinfo = attrs.hideinfo;
            scope.hidedelete = attrs.hidedelete;

        },
        templateUrl: '/app/templates/VideoControl.html',
    }
});
});

И, наконец, файл шаблона

<div class="monster-admin-video monster-section-link">
<div class="monster-card">
    <div class="monster-card-content">
        <h5 class="monster-card-title" style="margin-top: 5px;">{{video.ChannelName}}</h5>
    </div>
    <div class="monster-admin-video-player embed-responsive embed-responsive-16by9" id="">
        <video id="{{video.RowKey }}" class="azuremediaplayer amp-default-skin amp-big-play-centered embed-responsive-item" controls data-setup='{"logo": { "enabled": false }, "techOrder": ["azureHtml5JS", "flashSS", "silverlightSS", "html5"], "nativeControlsForTouch": false}'>
            <source src="{{vm.trustSrc(video.BlobUri)}}"  />
            <p class="amp-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
            </p>
        </video>       
    </div>
    <div class="monster-admin-action-buttons" style="margin-top: 10px;">
        <a class="btn text-success" ng-hide="hideapprove" ng-click="vm.approve(video)"><i class="fa fa-check-circle-o"></i></a>
        <a class="btn text-warning" ng-hide="hidereject" ng-click="vm.reject(video)"><i class="fa fa-times-circle"></i></a>
        <a class="btn text-info" ng-hide="hideinfo" ng-click="vm.info(video)"><i class="fa fa-info-circle"></i></a>
        <a class="btn text-danger" ng-hide="hidedelete" ng-click="vm.delete(video)"><i class="fa fa-trash"></i></a>
    </div>
    <div class="monster-admin-video-caption">
        <p> {{video.EncodingStatus}}</p>
        <p class="lead monster-admin-video-title" ng-bind="video.Title" data-ellipsis></p>
        <p class="monster-admin-video-desc" ng-bind="video.Description" data-ellipsis></p>
    </div>
</div>

Этот код не работает (я читал, что установка источника подобным образом может быть трудной. Я хочу иметь возможность программно добавлять dash player в видеотег, что-то вроде

var player = dashjs.MediaPlayer().create();
player.initialize(document.getElementById(scope.video.RowKey), scope.video.SaSLocator, false);

Таким образом, видео будет загружено правильно во время выполнения. У меня возникли проблемы с одновременным подключением всего этого (использование директивы, увлажнение файла шаблона и настройка источника). Я был бы признателен за небольшое руководство по этому вопросу и может обновить код при необходимости.

Answer 1

Видео -list.template.html

<ul>
  <li ng-repeat="video in 
[{id:'a42',videosrc:'//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest'}, 
{id:'a43',videosrc:'//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest'}]
">
    <video id="{{video.id}}" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
    <ampscript id="{{video.id}}" videosrc="{{video.videosrc}}"></ampscript>
  </li>
</ul>

код, который регистрирует пользовательскую директиву ampscript. Он использует идентификатор и источник видео в качестве параметров и инициализирует Azure Media Player. $timeout используется, потому что вы хотите убедиться, что повторитель завершил рендеринг сам.

angular.module('directives', []).directive('ampscript',
  function ($timeout) {
    return {
      model: {
        id: '@',
        videosrc: '@'
      },
      link: function ($scope, element, attrs, controller) {
        var myOptions = {
          autoplay: false,
          controls: true,
          width: "640",
          height: "400",
          poster: ""
        };

        $timeout(function () {

          var myPlayer = amp(attrs.id, myOptions);
          myPlayer.src([{ src: "" + attrs.videosrc, type: "application/vnd.ms-sstr+xml" },]);
        });
      }
    };
  }
);

Не забудьте включить правильные ссылки в ваш index.html:

<link href="https://amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="https://amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>

Надеюсь, это поможет вам.