Question

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

控制器代码：

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

请告诉我这里有什么问题

Answer 1

从docs vg-theme期待一个范围名称变量，但是您传递的是字符串文字。

vgTheme字符串带有作用域名称变量的字符串。该指令将在页面的标题中注入一个CSS链接。此参数是必需的。

更改它以使用config.theme（确保您的$ scope.theme路径是正确的路径）

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

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

您是否可以仔细检查是否提供了视频指令所需的所有输入？

视频不加载任何视频或控件

1 个答案: