ng-repeatでビデオファイルを読み込むディレクティブ

Question

Azure Media ServicesにあるビデオをDash Playerに読み込んで再生する指示があります。私はNGリピートにロードする必要があるので、ロードされた複数の動画があります、ここでメインループ

<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', 
    } 
}); 
}); 

そして最後に、テンプレートファイルを持っている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> 

このコードは（私はこのようなソースを設定することを読んだことが動作しません。困難になる可能性があります。私は、videoタグで、プログラムでビデオが実行時に正しくロードされる方法

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

のようなものをダッシュ​​プレーヤーを追加できるようにしたいです。私はこのすべてを（テンプレートファイルを水和し、ソースを設定することで）ディレクティブを使って同時にプラグインするのにいくつかの問題を抱えています。私はこれについて少しガイダンスに感謝し、必要に応じてコードを更新することができます。カスタムディレクティブampscriptを登録

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> 

コード。パラメータとしてIDとビデオソースを使用して、紺碧のメディアプレーヤーを初期化します。リピーターがレンダリングを完了したことを確認したいので、$ 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> 

は、それはあなたを助けることを願っています。