javascript - Videogular 未加载

我正在尝试在我的网站上实现 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 并且它是我的 html header 中的 js 文件。

最佳答案

您需要将 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"
        ]
    );

关于javascript - Videogular 未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21663888/

javascript - Videogular 未加载

上一篇：javascript - 为什么将 x 和 y 设置为 0 时 svg 文本消失？

下一篇：javascript - HTML5 Canvas 沿带坐标的路径拖动图像