-
Notifications
You must be signed in to change notification settings - Fork 87
/
index.html
152 lines (151 loc) · 6.12 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en-GB" dir="ltr">
<head>
<title>jQuery Video Background plugin</title>
<meta charset="utf-8">
<link href="themes/ui-darkness/jquery-ui-1.8.12.custom.css" rel="stylesheet" media="screen">
<link href="themes/jquery.videobackground.css" rel="stylesheet" media="screen">
<style>
/*
* Page specific styling.
*
*/
body {
margin: 0;
font-family: arial, helvetica, sans-serif;
}
a {
color: #FFF;
}
h2 {
font-size: 20px;
font-weight: normal;
}
li {
list-style: none;
}
dl {
}
dt {
float: left;
width: 160px;
}
dd {
margin: 0 0 10px 160px;
}
/*
* If developing a full page background the styles from .video-background will be required.
* The classname itself is unimportant.
*
*/
.video-background {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
z-index: 0;
}
.video-background video {
min-height: 100%;
min-width:100%;
}
#page {
position: relative;
z-index: 1;
width: 960px;
color: #FFF;
background: transparent url(themes/background.png) repeat top left;
border-radius: 5px;
margin: 0 auto;
}
#main {
padding: 10px;
margin: 10px 0;
}
</style>
<script src="external/jquery.js"></script>
<script src="script/jquery.videobackground.js"></script>
<script>
$(document).ready(function() {
$('dl').toggle();
$('h2').bind('click', function(event) {
event.preventDefault();
$(this).next('dl').slideToggle(500, function() {
$('.video-background').videobackground('resize');
});
});
$('body').prepend('<div class="video-background"></div>');
$('.video-background').videobackground({
videoSource: [['video/big-buck-bunny.mp4', 'video/mp4'],
['video/big-buck-bunny.webm', 'video/webm'],
['video/big-buck-bunny.ogv', 'video/ogg']],
controlPosition: '#main',
poster: 'video/big-buck-bunny.jpg',
loadedCallback: function() {
$(this).videobackground('mute');
}
});
});
</script>
</head>
<body>
<div id="page">
<div id="page-group">
<div id="header" class="header" role="banner" ></div>
<div id="content">
<div id="main" role="main">
<h1>jQuery Video Background plugin</h1>
<p>Code available for download on <a href="http://github.com/georgepaterson/jquery-videobackground">Github</a>.</p>
<p>Example of the jQuery Video Background plugin. Will place a resizable video in to the background of the page or designated element. Browsers that don't support the HTML5 video element will get an image if a poster image was provided.</p>
<p>If the containing element's width and height does not match the aspect ration of the video, the video will not alter it's aspect ratio but will render based on the largest dimension.</p>
<h2><a href="#">Public methods</a></h2>
<dl>
<dt>play:</dt>
<dd>Trigger a play/pause event on the chosen video background. Will play if the video is already paused. Will pause if the video is already playing.</dd>
<dt>mute:</dt>
<dd>Trigger a mute/unmute event on the chosen video background. Will unmute if the video is already muted. Will mute if the video is unmuted.</dd>
<dt>destroy:</dt>
<dd>Will destroy the chosen video background. Unbinds events bound when the video background is initialised and removes HTML attached to the DOM by the plugin. If a controlPosition parameter is set this will also have to be set to safely remove all HTML elements from the DOM.</dd>
<dt>resize:</dt>
<dd>When invoked this will resize the video background to the height of the document or window. The video background height affects the height of the document which affects the video background's ability to negatively resize.</dd>
</dl>
<h2><a href="#">Plugin parameters</a></h2>
<dl>
<dt>videoSource:</dt>
<dd>Either an array of strings of video URL's or a two-dimensional array containing video URL's and type. No default.</li>
<dt>poster:</dt>
<dd>The URL string of the image used for the video poster attribute. No default.</dd>
<dt>autoplay:</dt>
<dd>Video autoplay attribute boolean. Default is true.</dd>
<dt>preload:</dt>
<dd>Video prelod attribute string. Default is none.</dd>
<dt>loop:</dt>
<dd>Video loop attribute boolean. Default is false.</dd>
<dt>controlPosition:</dt>
<dd>Position of the video controls, will append the controls to choose DOM element. Default is null. If null will append controls to the element the video background has been applied to.</dd>
<dt>controlText:</dt>
<dd>An array of text options for the video control elements.</dd>
<dt>resize:</dt>
<dd>Boolean which will trigger the video background to resize to match the browser height. Set to false is video background is used on another element. Default is true.</dd>
<dt>preloadHtml:</dt>
<dd>If required, a user controlled HTML string can be injected in to the control area of the page while the video is preloading. It will be over written by the video controls when the video is ready to play.</dd>
<dt>preloadCallback:</dt>
<dd>Allows a function to be triggered when the video preload is initiated.</dd>
<dt>loadedCallback:</dt>
<dd>Allows a function to be triggered when the video is loaded.</dd>
<dt>resizeTo:</dt>
<dd>Allows the video background to resize to either the document or the window. Default is document.</dd>
</dl>
<p>Video trailer from <a href="http://www.bigbuckbunny.org/">http://www.bigbuckbunny.org/</a>. An open source <a href="http://www.blender.org/">Blender</a> project.</p>
<p>Please use the <a href="https://github.com/georgepaterson/jquery-videobackground/issues">GitHub issue tracker</a> for bug reports and feature requests.</p>
</div>
<div id="aside" class="aside" role="complementary">
</div>
</div>
</div>
<div id="footer" class="footer" role="contentinfo"></div>
</div>
</body>
</html>