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

     }); 

    } 
}; 

});