This repository has been archived by the owner on Feb 2, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
80 lines (72 loc) · 3.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJs Video Background - codekraft studio</title>
<meta name="author" content="codekraft-studio">
<meta name="description" content="Expect us, we are coming, the new full qualified web developers duo.">
<meta name="Robots" content="ALL,INDEX">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta property="og:title" content="codekraft-studio, cutting edge programming!" />
<meta property="og:description" content="Expect us, we are coming, the new full qualified web developers duo" />
<meta property="og:image" content="http://core.codekraft.it/www.codekraft.it/quadkode.jpg" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.codekraft.it/" />
<meta property="og:site_name" content="codekraft-studio, cutting edge programming!" />
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="./dist/angular-video-background.min.css" media="screen" title="no title" charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style media="screen">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-controller="mainCtrl" ng-cloak>
<video-background
class="bg-video"
autoplay="true"
on-stop="isPlaying = false"
on-play="isPlaying = true"
key-controls="true"
control-box="auto"
autopause="true"
source="myVideo">
</video-background>
<article role="main" class="center-block" ng-class="{ active: isPlaying }">
<a href="https://github.com/codekraft-studio/angular-video-background"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
<header>
<div class="hcont">
<div class="title">
<h1>angular-video-background</h1>
<h2>use any video as background with many options</h2>
</div>
<div class="block">
<p>You can show any video you want inside your page and have fun with keyboard controls!</p>
<p>Press <b>space</b> to play/pause the video and <b>ESC</b> to stop it.</p>
</div>
<div class="buttons">
<a href="https://github.com/codekraft-studio/angular-video-background/archive/master.zip" class="btn">Get it</a>
<a href="https://github.com/codekraft-studio/angular-video-background/blob/master/README.md" class="btn">Docs</a>
</div>
</div>
</header>
</article>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js"></script>
<script type="text/javascript" src="./dist/angular-video-background.js"></script>
<script>
// create basic module
angular.module('app', ['video-background'])
.controller('mainCtrl', function($scope) {
$scope.myVideo = {
mp4: 'https://ak8.picdn.net/shutterstock/videos/7726558/preview/stock-footage-floating-lanterns-in-yee-peng-festival-loy-krathong-celebration-in-chiangmai-thailand-uprisen-wid.mp4'
}
});
// bootstrap example
angular.element(document).ready(function() {
angular.bootstrap(document, ['app'])
});
</script>
</html>