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>
<script>
      ons.bootstrap();
</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;
    col        

Answers


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'):

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

Or you can use ons.bootstrap instead:

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


Tittu Vaghese February 2016

Its Fixed by initializing onsen in Angular way,

var module = ons.bootstrap('myApp',
        [
            "ngSanitize",
            "com.2fdevs.videogular",
            "com.2fdevs.videogular.plugins.controls",
        ]);

Post Status

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

Search




Leave an answer