Videogular Not Loading

angularjs, html, javascript, videogular

Solution

You need to add Videogular modules to your module initialization.

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"
        ]
    );

Problem

I'm trying to implement Videogular in my website, but without all the stuff that comes with downloading the GitHub project. I want to only use videogular.js, the plugins, and the default theme. When I load the page however, its the default HTML5 video player and Videogular is not implemented. My html code looks like: ``` <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> ``` And my js file looks like: ``` 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" } } }; }); ``` I don't really see anything that I'm missing. I have the config object in the scope and a theme set (which apparently is mandatory). Does anyone see something that I can't? EDIT: Never mind, turns out I forgot to include `ngSantize` and it's js file to my html header.

Original source