Search code examples
javascripthtmlangularjsvideogular

Videogular Not Loading

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.

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