0

我正在我的 Angular 应用程序中实现 videogular，这是我的第一个 Angular 网站。我已经按照示例http://www.videogular.com/tutorials/how-to-start/中所示的所有内容进行了操作，但是 UI 上没有出现任何内容，也没有在控制台中发现任何错误。（我已经使用 nugget 包管理器安装了 videogular）。

控制器代码：

 $scope.config = {
 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" }
 ],
 tracks: [
 {
 src: "http://www.videogular.com/assets/subs/pale-blue-dot.vtt",
 kind: "subtitles",
 srclang: "en",
 label: "English",
 default: ""
 }
 ],
 theme: "~/Content/videogular.css",
 plugins: {
 poster: "http://www.videogular.com/assets/images/videogular.png"
 }
 };

HTML 视图：

<div class="videogular-container">
                            <videogular vg-theme="http://www.videogular.com/styles/themes/default/latest/videogular.css">
                                <vg-media vg-src="config.sources"></vg-media>
                               <vg-controls>
                                    <vg-play-pause-button></vg-play-pause-button>
                                    <vg-time-display>{{ currentTime | date:'mm:ss' }}</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' }}</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-poster vg-url='config.plugins.poster'></vg-poster>
                            </videogular>
</div>

添加的依赖项：

'ngSanitize'、'com.2fdevs.videogular'、'com.2fdevs.videogular.plugins.controls'、'com.2fdevs.videogular.plugins.overlayplay'、'com.2fdevs.videogular.plugins.poster'

请告诉我这里有什么问题

4

1 回答 1

2

从文档 vg-theme中期待一个范围名称变量，但您正在传递一个字符串文字。

vgTheme string 具有范围名称变量的字符串。该指令将在您的页面标题中注入一个 CSS 链接。此参数是必需的。

将其更改为使用config.theme（确保您的 $scope.theme 路径是正确的）

更新：vg-media 还需要像这样指定 vg-tracks

<vg-media vg-src="controller.config.sources"
                  vg-tracks="controller.config.tracks">
        </vg-media>

您能否仔细检查您是否为 videogular 指令提供了所有必需的输入？

于 2015-05-15T22:03:00.947 回答