Question

我正在尝试使用OnSen UI（https://onsen.io）和Videogular（http://www.videogular.com/）制作视频播放器应用程序。当我一起使用视频控制器的视频控制器不起作用。以下是我的代码。

<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>

我收到错误代码。 “错误：[ng：areq]参数'HomeCtrl'不是函数，未定义

Answer 1

您正在使用ons.bootstrap加载AngularJS两次，然后加载angular.module('DemoAppVideo', [])，因此可能不会使用第二部分。阅读ons.bootstrap函数here。

基本上，你可以采用Angular方式（记得添加'onsen'）：

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

或者您可以改为使用ons.bootstrap：

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

Answer 2

通过以Angular方式初始化onsen来修复它，

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

与onsen UI一起使用时，视频控制器无法正常工作

2 个答案: