我正在实现一个使用 Videogular 播放视频的站点,因为它与站点内的其他 AngularJS 很好地集成在一起。所需的每个文件似乎都位于路径中的正确位置,但最终结果仅显示总时间、已用时间和已用时间条。
现在我现在控制在那里,就好像我将鼠标悬停在音量控制应该是音量出现的位置。
我正在 Chrome 版本 32.0.1700.107 中进行测试。我想我完全按照演示进行了操作。
这就是我引用特定样式表的方式
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/offcanvas.css">
<link rel="stylesheet" href="css/videogular/videogular.css">
<link rel="stylesheet" href="css/app2.css"/>
这就是我拉入js文件的方式。未显示包含 jquery、bootstrap 和 offcanvas js 文件。
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="js/videogular/videogular.js" type="text/javascript"></script>
<script src="js/videogular/plugins/controls.js" type="text/javascript"></script>
<script src="js/videogular/plugins/overlay-play.js" type="text/javascript"></script>
<script src="js/videogular/plugins/buffering.js" type="text/javascript"></script>
<script src="js/videogular/plugins/poster.js" type="text/javascript"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
我什至使用与演示相同的配置
$scope.config = {
width: 640,
height: 360,
autoHide: false,
autoPlay: true,
responsive: true,
theme: {
url: "css/videogular/videogular.css",
playIcon: "",
pauseIcon: "",
volumeLevel3Icon: "",
volumeLevel2Icon: "",
volumeLevel1Icon: "",
volumeLevel0Icon: "",
muteIcon: "",
enterFullScreenIcon: "",
exitFullScreenIcon: ""
}
最后我的目录结构是这样的:
- 应用程序
- css
- 视频
- 字体
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
- videogular.css
- 字体
- 图像
- js
- 视频
- 插件
- 缓冲.js
- 控件.js
- 覆盖播放.js
- 海报.js
- videogular.js
- 库
- 部分
- 视频
- 意见
- 视频
- 插件
- 缓冲
- 缓冲.html
- 控制
- 控件.html
- 全屏按钮.html
- 静音按钮.html
- 播放暂停button.html
- 音量bar.html
- 重叠播放
- 覆盖播放.html
- 缓冲
- 插件
- 视频
- 索引.html
现在我确定我错过了一些东西,但我看不到它。有什么帮助吗?