与Onsen UI一起使用时，Videogular控制器不起作用

蒂图·瓦格斯（Tittu Vaghese）

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

<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'不是一个函数，未定义

弗兰·上帝

您要使用两次加载AngularJS ons.bootstrap，然后使用加载AngularJS angular.module('DemoAppVideo', [])，因此第二部分可能没有。在这里阅读有关ons.bootstrap功能的信息。

基本上，您可以按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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-11-1

我来说两句

0 条评论

登录后参与评论

上一篇：何时在2D动画中通过SwingTimer使用Thread.sleep

jQuery的Onsen UI Navigator

与Onsen UI一起使用时，Videogular控制器不起作用

与Onsen UI一起使用时，Videogular控制器不起作用

构建类似于Jarvis的本地语言应用程序

在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？

Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用

SQL Server中的非确定性数据类型

使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中

Swift 2.1-对单个单元格使用UITableView

Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

HttpClient中的角度变化检测

如何了解DFT结果

错误：找不到存根。请确保已调用spring-cloud-contract：convert

Embers js中的更改侦听器上的组合框

在Wagtail管理员中，如何禁用图像和文档的摘要项？

如何避免每次重新编译所有文件？

Java中的循环开关案例

ng升级性能注意事项

Swift中的指针替代品？

如何使用geoChoroplethChart和dc.js在Mapchart的路径上添加标签或自定义值？

使用分隔符将成对相邻的数组元素相互连接

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

ggplot：对齐多个分面图-所有大小不同的分面

完全禁用暂停（在内核级别？-必须与使用的DE和登录状态无关！）