Videogular Not Loading

我試圖在我的網站上實現Videogular，但沒有下載GitHub項目的所有東西。我只想使用videogular.js，插件和默認主題。但是，當我加載頁面時，它的默認HTML5視頻播放器和視頻對象未實現。Videogular Not Loading

我的HTML代碼如下所示：

<html ng-app="myapp"> 
    <head> 
     <script src="angular.min.js"></script> 
     <script src="jquery-2.0.3.min.js"></script> 
     <script src="videogular/videogular.js"></script> 
     <script src="videogular/plugins/controls.js" type="text/javascript"></script> 
     <script src="videogular/plugins/overlay-play.js" type="text/javascript"></script> 
     <script src="videogular/plugins/buffering.js" type="text/javascript"></script> 
     <script src="videogular/plugins/poster.js" type="text/javascript"></script> 
     <script src="videoserve.js"></script> 
     <link rel="stylesheet" type="text/css" href="test.css"> 
    </head> 
    <body ng-controller="MyController"> 
     <div id="videoDiv"> 
      <videogular vg-responsive="config.responsive" vg-autoPlay="config.autoPlay"> 
       <video class='videoPlayer' controls preload='metadata'> 
        <source src='assets/videos/Test 1080p HD.mp4' type='video/mp4'> 
       </video> 
       <vg-poster-image vg-url='config.plugins.poster.url' vg-stretch="config.stretch.value"></vg-poster-image> 
       <vg-buffering></vg-buffering> 
      </videogular> 
     </div> 
    </body> 
</html>

我的js文件的樣子：

var app = angular.module('myapp', [ 
]); 

app.controller('MyController', function($scope) { 
    $scope.stretchModes = [ 
     {label: "None", value: "none"}, 
     {label: "Fit", value: "fit"}, 
     {label: "Fill", value: "fill"} 
    ]; 

    $scope.config = { 
     width: 740, 
     height: 380, 
     autoHide: false, 
     autoPlay: true, 
     responsive: false, 
     stretch: $scope.stretchModes[0], 
     transclude: true, 
     theme: { 
       url: "videogular/default/videogular.css", 
       playIcon: "&#xe000;", 
       pauseIcon: "&#xe001;", 
       volumeLevel3Icon: "&#xe002;", 
       volumeLevel2Icon: "&#xe003;", 
       volumeLevel1Icon: "&#xe004;", 
       volumeLevel0Icon: "&#xe005;", 
       muteIcon: "&#xe006;", 
       enterFullScreenIcon: "&#xe007;", 
       exitFullScreenIcon: "&#xe008;" 
      }, 
     plugins: { 
      poster: { 
       url: "assets/images/logo.png" 
      } 
     } 
    }; 
});

我真的沒有看到任何我失蹤。我有配置對象的範圍和一個主題集（這顯然是強制性的）。有人看到我不能做的事嗎？

編輯：沒關係，事實證明，我忘了包括ngSantize，它的js文件到我的html標題。

來源

2014-02-09 GPinskiy

您需要將視頻模塊添加到模塊初始化中。

var app = angular.module('myapp', [ 
      'ngSanitize', 
      "com.2fdevs.videogular", 
      "com.2fdevs.videogular.plugins.controls", 
      "com.2fdevs.videogular.plugins.overlayplay", 
      "com.2fdevs.videogular.plugins.buffering", 
      "com.2fdevs.videogular.plugins.poster" 
     ] 
    );

來源

2014-02-11 09:18:28 elecash

嗯，我確實忘了添加模塊，謝謝。不過，我現在正在收到'[$ injector：modulerr]'錯誤。 – GPinskiy

沒關係，忘記添加ngSanatize – GPinskiy

感謝upvote無論如何:) – elecash

Videogular Not Loading

回答

相關問題