'use strict';
angular.module('myApp',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"th.co.softever.videogular.plugins.quality"
]
)
.controller('HomeCtrl',
["$sce", function ($sce) {
this.config = {
preload: "none",
qualitySources: [
{
name: '720p',
sources: [
{src: $sce.trustAsResourceUrl("https://dl.dropboxusercontent.com/u/8274898/videogular/videogular720.mp4"), type: "video/mp4"}
],
dashIndex: 3
},
{
name: '480p',
sources: [
{src: $sce.trustAsResourceUrl("https://dl.dropboxusercontent.com/u/8274898/videogular/videogular480.mp4"), type: "video/mp4"}
],
dashIndex: 2
},
{
name: '360p',
sources: [
{src: $sce.trustAsResourceUrl("https://dl.dropboxusercontent.com/u/8274898/videogular/videogular360.mp4"), type: "video/mp4"}
],
dashIndex: 1
},
{
name: '240p',
sources: [
{src: $sce.trustAsResourceUrl("https://dl.dropboxusercontent.com/u/8274898/videogular/videogular240.mp4"), type: "video/mp4"}
],
dashIndex: 0
} /*,
{
name: 'Auto',
sources: [
{src: "https://dl.dropboxusercontent.com/u/8274898/videogular/dash/videogular.mpd"}
]
} */
],
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
},
plugins: {
controls: {
autoHide: false,
autoHideTime: 5000
}
}
};
this.currentQualitySource = this.config.qualitySources[this.config.qualitySources.length - 1];
}]
);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="sparta/dash.all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
<script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script>
<script src="sparta/vg-controls.js"></script>
<script src="sparta/vg-overlay-play.js"></script>
<script src="sparta/vg-poster.js"></script>
<script src="sparta/vg-buffering.js"></script>
<script src="sparta/vg-dash.js"></script>
<script src="sparta/mulit.js"></script>
<script src="sparta/vg-quality.js"></script>
<link rel="stylesheet" href="sparta/vg-quality.css">
</head>
<body ng-app="myApp">
<div ng-controller="HomeCtrl as controller" class="videogular-container">
<videogular vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.currentQualitySource.sources" vg-dash>
</vg-media>
<vg-controls vg-autohide="controller.config.plugins.controls.autoHide" vg-autohide-time="controller.config.plugins.controls.autoHideTime">
<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-time-display>{{ totalTime | date:'mm:ss' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<vg-quality quality-sources="controller.config.qualitySources" default-quality="controller.currentQualitySource"></vg-quality>
<vg-playback-button></vg-playback-button>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
</videogular>
</div>
</body>
</html>我想创建一个简单的视频播放器，为此我使用了 Videogular。因为我的要求包括拥有不同分辨率的视频，所以我使用了 vg-quality 插件，但是有了这个插件，我的其他控件没有出现，我无法跟踪问题
这是唯一的错误，而且视频没有播放，也没有任何控件出现在 chrome 浏览器中，mozilla 在鼠标右键单击播放按钮时显示视频，但实际控件仍然没有出现