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

     }); 

    } 
}; 

});