Question

我正在尝试在我的网站上实现Videogular，但没有下载GitHub项目所带来的所有东西。我只想使用videogular.js，插件和默认主题。但是，当我加载页面时，默认的HTML5视频播放器和Videogular都没有实现。

我的HTML代码如下：

<html ng-app="myapp">
    <head>
        <script src="angular.min.js"></script>
        <script src="jquery-2.0.3.min.js"></script>
        <script src="videogular/videogular.js"></script>
        <script src="videogular/plugins/controls.js" type="text/javascript"></script>
        <script src="videogular/plugins/overlay-play.js" type="text/javascript"></script>
        <script src="videogular/plugins/buffering.js" type="text/javascript"></script>
        <script src="videogular/plugins/poster.js" type="text/javascript"></script>
        <script src="videoserve.js"></script>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body ng-controller="MyController">
        <div id="videoDiv">
            <videogular vg-responsive="config.responsive" vg-autoPlay="config.autoPlay">
                <video class='videoPlayer' controls preload='metadata'>
                    <source src='assets/videos/Test 1080p HD.mp4' type='video/mp4'>
                </video>
                <vg-poster-image vg-url='config.plugins.poster.url' vg-stretch="config.stretch.value"></vg-poster-image>
                <vg-buffering></vg-buffering>
            </videogular>
        </div>
    </body>
</html>

我的js文件看起来像：

var app = angular.module('myapp', [
]);

app.controller('MyController', function($scope) {
    $scope.stretchModes = [
        {label: "None", value: "none"},
        {label: "Fit", value: "fit"},
        {label: "Fill", value: "fill"}
    ];

    $scope.config = {
        width: 740,
        height: 380,
        autoHide: false,
        autoPlay: true,
        responsive: false,
        stretch: $scope.stretchModes[0],
        transclude: true,
        theme: {
                url: "videogular/default/videogular.css",
                playIcon: "&#xe000;",
                pauseIcon: "&#xe001;",
                volumeLevel3Icon: "&#xe002;",
                volumeLevel2Icon: "&#xe003;",
                volumeLevel1Icon: "&#xe004;",
                volumeLevel0Icon: "&#xe005;",
                muteIcon: "&#xe006;",
                enterFullScreenIcon: "&#xe007;",
                exitFullScreenIcon: "&#xe008;"
            },
        plugins: {
            poster: {
                url: "assets/images/logo.png"
            }
        }
    };
});

我真的没有看到任何我想念的东西。我在范围和主题集中有配置对象（显然是强制性的）。有没有人看到我不能做的事情？

编辑：没关系，结果我忘记将ngSantize和js文件包含在我的html标题中。

Answer 1

您需要将Videogular模块添加到模块初始化中。

var app = angular.module('myapp', [
            'ngSanitize',
            "com.2fdevs.videogular",
            "com.2fdevs.videogular.plugins.controls",
            "com.2fdevs.videogular.plugins.overlayplay",
            "com.2fdevs.videogular.plugins.buffering",
            "com.2fdevs.videogular.plugins.poster"
        ]
    );

视频无法加载

1 个答案: