Home Ask Login Register

Developers Planet

Your answer is one click away!

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

Quote of the day: live life