如何使用angularJs将视频制作为闪屏

时间:2016-02-18 06:05:36

标签: angularjs splash-screen

我正在使用AngularJS和Material Design框架。我想在splashscreen中播放视频。 我不知道该怎么做。我搜索但找不到任何东西!请告诉我如何写这个或给我发一个教程。

1 个答案:

答案 0 :(得分:1)

我遇到了同样的问题。看看http://www.videogular.com/tutorials/how-to-start/它解决了我的问题。

'use strict';
angular.module('myApp',
		[
			"ngSanitize",
			"com.2fdevs.videogular",
			"com.2fdevs.videogular.plugins.controls",
			"com.2fdevs.videogular.plugins.overlayplay",
			"com.2fdevs.videogular.plugins.poster"
		]
	)
	.controller('HomeCtrl',
		["$sce", function ($sce) {
			this.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: "bower_components/videogular-themes-default/videogular.css",
				plugins: {
					poster: "http://www.videogular.com/assets/images/videogular.png"
				}
			};
		}]
	);
<div ng-app="myApp">
	<div ng-controller="HomeCtrl as controller">
		<videogular vg-theme="controller.config.theme">
			<vg-media vg-src="controller.config.sources"
					vg-tracks="controller.config.tracks">
			</vg-media>
		</videogular>
	</div>
</div>