Tittu Vaghese February 2016

Videogular Controllers are not working when used along with onsen UI

I'm trying to make a video player application using OnSen UI (https://onsen.io) and Videogular (http://www.videogular.com/). When i used together the video controllers of videogular is not working. Following are my code.

<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="list_with_header.css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.min.js"></script>
<script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script>
<script src="http://static.videogular.com/scripts/controls/latest/vg-controls.js"></script>
<script src="http://static.videogular.com/scripts/overlay-play/latest/vg-overlay-play.js"></script>
<script src="http://static.videogular.com/scripts/poster/latest/vg-poster.js"></script>
<script src="http://static.videogular.com/scripts/buffering/latest/vg-buffering.js"></script>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
.playlist ul {
    list-style-type: none;
.playlist ul a {
    cursor: pointer;
    color: #428bca;
    text-decoration: none;
.playlist ul a:visited {
    color: #428bca;
.playlist ul a:hover {
    color: #428bca;
    text-decoration: underline;
.videogular-container {
    width: 100%;
    height: 320px;
    margin: auto;
    overflow: hidden;
.videogular-container .skipButton {
    position: absolute;
    padding: 10px;
    top: 10px;
    right: 10px;
    z-index: 99999;


Fran Dios February 2016

You are loading AngularJS twice with ons.bootstrap and then with angular.module('DemoAppVideo', []), so it's probably not taking the second part. Read about ons.bootstrap function here.

Basically, you can do it the Angular way (remember to add 'onsen'):

  // Assume 'ng-app' is defined as 'my-app'
  var module = angular.module('my-app', ['onsen', 'ngAnimate']);
  module.controller('AppController', function($scope) { });

Or you can use ons.bootstrap instead:

  // No need to define 'ng-app'
  var module = ons.bootstrap(['ngAnimate']);
  module.controller("AppController", function($scope){ });

Tittu Vaghese February 2016

Its Fixed by initializing onsen in Angular way,

var module = ons.bootstrap('myApp',

Post Status

Asked in February 2016
Viewed 2,640 times
Voted 9
Answered 2 times


Leave an answer