Question

＆＃13;

'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];
    }]
  );

＆＃13;

<!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>

＆＃13;

我想创建一个简单的视频播放器，为此我已经使用了Videogular。因为我的要求包含了不同的分辨率视频所以我使用了vg-quality插件但是使用这个插件我的其他控件没有来，我无法跟踪问题

这是唯一的错误，并且视频没有播放，也没有任何控件进入Chrome浏览器，mozilla正在用鼠标右键单击播放按钮显示视频，但实际控件仍然没有出现

Answer 1

Well Atlast我纠正了这个问题，工作示例就在这里

＆＃13;

'use strict';
angular.module('myApp',
		[
			"ngSanitize",
			"com.2fdevs.videogular",
			"com.2fdevs.videogular.plugins.controls",
			 "com.2fdevs.videogular.plugins.dash",
			"com.2fdevs.videogular.plugins.overlayplay",
			"com.2fdevs.videogular.plugins.poster",
			"com.2fdevs.videogular.plugins.buffering",
			"th.co.softever.videogular.plugins.quality"
		]
	)
	.controller('HomeCtrl',
		["$sce", function ($sce) {
			var controller = this;
			controller.API = null;

			

		

			controller.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"}
            ]
          }
          
        ],
				autoHide: false,
				autoHideTime: 3000,
				autoPlay: false,
				
				theme: {
					url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
				},
				plugins: {
					poster: "http://www.videogular.com/assets/images/videogular.png"
				}
			};

			this.currentQualitySource = this.config.qualitySources[this.config.qualitySources.length - 1];
		}]
	);

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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-overlay-play.js"></script>
<script src="sparta/vg-poster.js"></script>
<script src="sparta/vg-buffering.js"></script>
<script src="sparta/dash.all.js"></script>
<script src="sparta/vg-dash.js"></script>
<script src="sparta/main.js"></script>
<script src="sparta/vg-quality.js"></script>
<script src="http://static.videogular.com/scripts/controls/latest/vg-controls.js"></script>
<script src="sparta/vg-quality.js"></script>
<link rel="stylesheet" href="sparta/vg-quality.css">	
<link rel="stylesheet" href="sparta/vg-quality.css">
<link rel="stylesheet" href="sparta/videogular.css">
<style>
html, body {
	margin: 0;
	padding: 0;
}

.playlist ul {
	list-style-type: none;
}

.playlist ul a {
	cursor: pointer;
	color: #428bca;
	text-decoration: none;
}

.playlist ul a:visited {
	color: #428bca;
}

.playlist ul a:hover {
	color: #428bca;
	text-decoration: underline;
}

.videogular-container {
	width: 100%;
	height: 320px;
	margin: auto;
	overflow: hidden;
}

.videogular-container .skipButton {
	position: absolute;
	padding: 10px;
	top: 10px;
	right: 10px;
	z-index: 99999;
	color: white;
	cursor: pointer;
	background-color: #666666;
	border: 2px #FFFFFF solid;
	display: none;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
}

@media (min-width: 1200px) {
	.videogular-container {
		width: 1170px;
		height: 658.125px;
	}

	.videogular-container.audio {
		width: 1170px;
		height: 50px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.videogular-container {
		width: 940px;
		height: 528.75px;
	}

	.videogular-container.audio {
		width: 940px;
		height: 50px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.videogular-container {
		width: 728px;
		height: 409.5px;
	}

	.videogular-container.audio {
		width: 728px;
		height: 50px;
	}
}

</style>
</head>
<body>

<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller">
	<div class="videogular-container">
		<videogular  vg-theme="controller.config.theme.url">
			 <vg-media vg-src="controller.currentQualitySource.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-quality quality-sources="controller.config.qualitySources" default-quality="controller.currentQualitySource"></vg-quality>
				<vg-fullscreen-button></vg-fullscreen-button>
			</vg-controls>
			
			<vg-overlay-play></vg-overlay-play>
			<vg-buffering></vg-buffering>
			<vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
		</videogular>
	</div>
	
</div>
</div>
<style>
videogular my-replay-plugin {
	position: absolute;
	z-index: 50;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
 
videogular my-replay-plugin div {
	background-color: #000000;
	width: 100%;
	height: 100%;
}
 
videogular my-replay-plugin div span {
	color: white;
	cursor: pointer;
	font-family: 'trebuchet ms', verdana, arial;
	font-size: 36px;
	display: table;
	position: absolute;
	text-align: center;
	margin: auto;
	top: 0;
	bottom: 0;
	width: 100%;
}
</style>
</body>

</html>

＆＃13;

Videogular是vg-controls无法使用vg-quality插件

1 个答案: