AngularJS HTML5視頻ng-src爲空指令

我的應用程序從REST服務中加載多個對象。每個對象都包含一個代表視頻文件的Uri的屬性。我的應用程序以此爲源向用戶顯示多個視頻。AngularJS HTML5視頻ng-src爲空指令

因爲我需要當用戶播放視頻（事件），我加載使用角指令HTML5視頻標記捉：

app.directive("aVideo", function($http){ 
return {   
    template: '<video class="col-xs-12 col-sm-12 col-md-12" ng-src="[[[creativeViewModel.post.addTrustedUri()]]]" controls preload="metadata"</video>', 
    scope:{ 
     creative: "=", 
    }, 
    link: function(scope, element, attrs) {   
     $(element).find("video").on("play", function() { 
      $http.post('/post/' + scope.creative.post.doc_id + '/views?_csrf=' + csrfToken) 
      .success(function(data){ 

      }) 
      .error(function(error){    

      }); 
     });      
    }, 
}

}）;

因此，用於視頻的HTML標記是這樣的：

<div a-video creative="creativeViewModel"></div>

功能addTrustedUri是對象本身的一部分，如下：

addTrustedUri: function addTrustedUri() { 
      return $sce.trustAsResourceUrl(this.post.media); 
     },

然而，以下是返回給用戶瀏覽器的代碼：

<video class="col-xs-12 col-sm-12 col-md-12" ng-src="" controls="" preload="metadata" <="" video=""></video>

正如你所看到的，即使我使用$ sce.trustAsResourceUrl方法啓用它，ng-src屬性顯示爲空。請注意，正在加載視頻文件的域與應用的域不同（它是CDN）。

有關如何解決此問題的任何想法？

來源

2014-10-18 Luis Delgado

我知道這篇文章已經很長時間了，但是您找到了解決方案嗎？ – Bonswouar 2016-04-21 15:16:04

@Bonswouar在下面看到自己的答案。 – 2016-04-23 09:13:14

-1

您在模板中動態添加指令（ngSrc）。爲了有角度地識別表達式，您需要transclude: true，如directive下的角度文檔中所述。

來源

2014-10-18 23:35:26

感謝您的回覆。按照建議添加transclude參數不會改變行爲。它看起來好像角度拒絕讀取URL。 – 2014-10-19 08:57:38

對於那些對這個問題感興趣的人，我找不到適合這個問題的解決方法，但是我確實找到了一個可以接受的解決方法。以下是解決方法：

app.directive("aVideo", function($http, $sce){ 
    return { 
     template: '<a class="video-file"><img class="col-xs-12 col-sm-12 col-md-12 poster-file" ng-src="[[[post.creative.media.poster]]]"></img><span class="play-button-overlay"><img src="/img/video-play-3-256.png" /></span><div class="clearer"></div></a>',  
     scope:{ 
      post: "=", 
     }, 
     link: function(scope, element, attrs) { 
      $(element).find("img").on("click", function() { 
       $(element).find('img').remove(); 
       $(element).append('<video controls width="100%"></video>'); 
       var video = $(element).find('video'); 
       video.addClass('col-xs-12'); 
       video.attr('poster', $sce.trustAsUrl(scope.post.creative.media.poster)); 
       video.append("<source src='" + $sce.trustAsUrl(scope.post.tempUri) + "' type='" + scope.post.creative.media.contentType + "'></source>"); 
       video.append("<source src='" + $sce.trustAsUrl(scope.post.creative.media.webm) + "' type='video/webm'></source>"); 
       video[0].play(); 
      }); 
     }, 
    } 
});

基本上這是做的第一個顯示視頻元素作爲圖片。當用戶點擊img元素時，指令元素的link屬性起作用。在這裏，我添加一個視頻元素並強制添加mp4和webm格式的源元素，然後通過調用video.play()函數觸發視頻播放。

來源

2016-04-23 09:12:49

AngularJS HTML5視頻ng-src爲空指令

回答

相關問題