Les contrôleurs vidéo ne fonctionnent pas lorsqu'ils sont utilisés avec un onsen UI

Question

J'essaie de créer une application de lecteur vidéo en utilisant OnSen UI (https://onsen.io) et Videogular (http://www.videogular.com/). Quand j'ai utilisé ensemble les contrôleurs vidéo de la vidéo ne fonctionne pas. Voici mon 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; 
    color: white; 
    cursor: pointer; 
    background-color: #666666; 
    border: 2px #FFFFFF solid; 
    display: none; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -ms-border-radius: 10px; 
    border-radius: 10px; 
} 
@media (min-width: 1200px) { 
.videogular-container { 
    width: 1170px; 
    height: 658.125px; 
} 
.videogular-container.audio { 
    width: 1170px; 
    height: 50px; 
} 
} 
@media (min-width: 992px) and (max-width: 1199px) { 
.videogular-container { 
    width: 940px; 
    height: 528.75px; 
} 
.videogular-container.audio { 
    width: 940px; 
    height: 50px; 
} 
} 
@media (min-width: 768px) and (max-width: 991px) { 
.videogular-container { 
    width: 728px; 
    height: 409.5px; 
} 
.videogular-container.audio { 
    width: 728px; 
    height: 50px; 
} 
} 
</style> 
<script> 
'use strict'; 
angular.module('DemoAppVideo', 
     [ 
      "ngSanitize", 
      "com.2fdevs.videogular", 
      "com.2fdevs.videogular.plugins.controls", 
      "com.2fdevs.videogular.plugins.overlayplay", 
      "com.2fdevs.videogular.plugins.poster", 
      "com.2fdevs.videogular.plugins.buffering" 
     ] 
    ) 
    .controller('HomeCtrl', 
     ["$sce", "$timeout", function ($sce, $timeout) { 
      var controller = this; 
      controller.state = null; 
      controller.API = null; 
      controller.currentVideo = 0; 

      controller.onPlayerReady = function(API) { 
       controller.API = API; 
      }; 

      controller.onCompleteVideo = function() { 
       controller.isCompleted = true; 

       controller.currentVideo++; 

       if (controller.currentVideo >= controller.videos.length) controller.currentVideo = 0; 

       controller.setVideo(controller.currentVideo); 
      }; 

      controller.videos = [ 
      { 
       sources: [ 
        {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"}, 
        {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"}, 
        {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"} 
       ] 
      }, 
      { 
       sources: [ 
        {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov"), type: "video/mp4"}, 
        {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_stereo.ogg"), type: "video/ogg"} 
       ] 
      } 
     ]; 

      controller.config = { 
       preload: "none", 
       autoHide: false, 
       autoHideTime: 3000, 
       autoPlay: false, 
       sources: controller.videos[0].sources, 
       theme: { 
        url: "http://www.videogular.com/styles/themes/default/latest/videogular.css" 
       }, 
       plugins: { 
        poster: "http://www.videogular.com/assets/images/videogular.png" 
       } 
      }; 

      controller.setVideo = function(index) { 
       controller.API.stop(); 
       controller.currentVideo = index; 
       controller.config.sources = controller.videos[index].sources; 
       $timeout(controller.API.play.bind(controller.API), 100); 
      }; 
     }] 
    ); 

</script> 
<ons-tabbar> 
    <ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab> 
    <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab> 
    <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab> 
    <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab> 
</ons-tabbar> 

<ons-template id="home.html"> 
<ons-page> 
<ons-toolbar> 
<div class="left" style="line-height: 44px"> 
    <ons-back-button>Back</ons-back-button> 
</div> 
<div class="center">Artists</div> 
<div class="right" style="line-height: 44px"> Right </div> 
</ons-toolbar> 
<div ng-app="DemoAppVideo"> 
    <div ng-controller="HomeCtrl as controller"> 
    <div class="videogular-container"> 
     <videogular vg-player-ready="controller.onPlayerReady($API)" vg-complete="controller.onCompleteVideo()" vg-theme="controller.config.theme.url"> 
     <vg-media vg-src="controller.config.sources" 
         vg-tracks="controller.config.tracks"> </vg-media> 
     <vg-controls> 
      <vg-play-pause-button></vg-play-pause-button> 
      <vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display> 
      <vg-scrub-bar> 
      <vg-scrub-bar-current-time></vg-scrub-bar-current-time> 
      </vg-scrub-bar> 
      <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display> 
      <vg-volume> 
      <vg-mute-button></vg-mute-button> 
      <vg-volume-bar></vg-volume-bar> 
      </vg-volume> 
      <vg-fullscreen-button></vg-fullscreen-button> 
     </vg-controls> 
     <vg-overlay-play></vg-overlay-play> 
     <vg-buffering></vg-buffering> 
     <vg-poster vg-url='controller.config.plugins.poster'></vg-poster> 
     </videogular> 
    </div> 
    <div class="playlist"> 
     <ul> 
     <li><a ng-click="controller.setVideo(0)">Pale Blue Dot</a></li> 
     <li><a ng-click="controller.setVideo(1)">Big Buck Bunny</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 
</ons-page> 
</ons-template> 

Code d'erreur J'ai reçu. « Erreur: [ng: AREQ] Argument « HomeCtrl » est pas une fonction, se est définie

Answer 1

Vous chargez AngularJS deux fois avec ons.bootstrap puis avec angular.module('DemoAppVideo', []), il est donc probablement pas prendre la deuxième partie Lisez à propos ons.bootstrap. . fonction here

Fondamentalement, vous pouvez le faire de la façon angulaire (rappelez-vous d'ajouter 'onsen'):

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

Ou vous pouvez utiliser ons.bootstrap instea d:

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

Answer 2

Son fixes en initialisant onsen de manière angulaire,

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