Question

我正在制定一项指令，将Azure Media Services中的视频加载到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>

此代码不起作用（我已经读过像这样设置源代码可能很困难。我希望能够以视频标记的形式添加破折号播放器，例如

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的代码。它使用id和视频源作为参数并初始化azure媒体播放器。使用$ 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>

希望它会对你有所帮助。

在ng-repeat中加载视频文件的指令

1 个答案: