AngularJS - Загрузка видео

Question

У меня есть шаблон, в котором я загружаю детали через файл JSON. Загружаемый контент сопровождает встраивание видео. Все из файлов JSON отлично работает, но одно и то же видео появляется на каждом элементе. Есть ли способ загрузить отдельные видеоролики, назначенные каждому файлу JSON?

Вот шаблон:

<div class="container" ng-repeat="guide in guides"> 
<div class="row"> 
<div class="col-md-12"> 
    <br/> 
    <p><a ng-href="#/"><span class="glyphicon glyphicon-home"></span> Back to Guide List</a></p> 
    <h1><span class="glyphicon glyphicon-play-circle"></span> Watch {{ guide.title }}</h1> 

    <span>{{ guide.info }}</span><br/><br/> 

</div> 

<div class="col-md-12">  
    <video video="marvel"> 
    </video><!--This is the bit I'm having an issue with --> 
</div> 

<div class="col-md-6"> 
    <h3><span class="glyphicon glyphicon-education"></span> Background to {{ guide.title }}</h3> 
    <span>{{ guide.background }}</span><br/><br/> 
</div> 
<div class="col-md-6"> 

    <h3><span class="glyphicon glyphicon-save"></span> Downloads for {{ guide.title }}</h3><br/> 

       <a ng-href="{{ guide.pdf }}" target="_blank"><span class="glyphicon glyphicon-floppy-save"></span> Download Help Guide PDF</a><br/><br/> 
       <a ng-href="{{ guide.video }}" target="_blank"><span class="glyphicon glyphicon-floppy-save"></span> Download Video</a> 
    </div> 

</div> 
</div> 

Я не могу связать любые данные в видео тег (который директива я построил) - так есть ли какие-либо предложения?

Заранее спасибо.

Answer 1

Это должно помочь, если вы ссылаетесь на другое видео в каждом повторении итерации ;-)

<div class="col-md-12">  
    <video src="{{guide.my_video_uri}}"> 
    </video> 
</div> 

src=".." Если не работает, попробуйте ng-src="..".

Answer 2

спасибо за предложение. Я на самом деле, попробовал это - видео-тег немного вводит в заблуждение; так как это настраиваемая директива, называемая «видео».

<video video="{{ guide.video }}"> 
</video> 

это просто выводит сообщение об ошибке: Не удается получить /% 7B% 7B% 20videoUrl% 20% 7D% 7D

Answer 3

директива приносит в YouTube встраивает - который я использую для тестирования первого. Намерение состояло в том, чтобы впоследствии настроить trustAsResourceUrl на другую форму встраивания. Ниже приведен код директивы (я изменил тег с видео на видеоплеер)

guideApp.directive('videoPlayer', function ($sce) { 

'use strict'; 

return { 

    restrict: 'E', 
    scope: { video: '=' }, 
    replace: true, 
    template: '<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" width="100%" height="100%" src="{{ videoUrl }}" frameborder="0" allowfullscreen></iframe></div>', 
    link: function (scope) { 
     scope.$watch('videoPlayer', function (videoLink) { 
      if (videoLink) { 
       scope.videoUrl = $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + videoLink); 
      } 

     }); 

    } 
}; 

});