I am trying to implement Videogular on my website, but without anything related to downloading the GitHub project. I want to use only videogular.js, plugins and the default theme. However, when loading a page, its default HTML5 video player and Videogular are not implemented.
My html code looks like this:
<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 this:
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: "",
pauseIcon: "",
volumeLevel3Icon: "",
volumeLevel2Icon: "",
volumeLevel1Icon: "",
volumeLevel0Icon: "",
muteIcon: "",
enterFullScreenIcon: "",
exitFullScreenIcon: ""
},
plugins: {
poster: {
url: "assets/images/logo.png"
}
}
};
});
I do not see anything that I am missing. I have a configuration object in scope and a set of themes (which, apparently, is required). Does anyone see what I can’t?
EDIT: Don’t pay attention, it turns out I forgot to include ngSantizehis js file in the html header.