-
Notifications
You must be signed in to change notification settings - Fork 424
/
index.html
executable file
·200 lines (173 loc) · 10.6 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>BigVideo.js - The jQuery Plugin for Big Background Video</title>
<meta name="description" content="BigVideo.js - The jQuery Plugin for Big Background Video" />
<meta name="author" content="John Polacek" />
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:900&text=ABCDEFGHIJKLMNOPQRSTUVWXYZ' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bigvideo.css">
<link rel="author" href="https://plus.google.com/107766061849006545830"/>
</head>
<body>
<a href="https://github.com/dfcb/BigVideo.js">
<img style="position: fixed; top: 0; right: 0; border: 0; z-index: 11;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" alt="Fork me on GitHub" />
</a>
<div class="nav box" id="nav">
<a href="#overview" class="nav-link">Overview</a>
<a href="#setup" class="nav-link">Setup</a>
<a href="#ambient" class="nav-link">Ambient Video</a>
<a href="#playlists" class="nav-link">Playlists</a>
<a href="#videojs" class="nav-link">Video.js</a>
<a href="#tips" class="nav-link">Tips</a>
<div class="toggle-btn">
<label><input type="checkbox" checked id="video-toggle" /> Video Playing</label>
</div>
</div>
<div class="main">
<div id="overview" class="box">
<h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>
<h2>The jQuery Plugin for Big Background Video (and Images)</h2>
<div class="credit">
<h3>Created by John Polacek at Draftfcb Chicago</h3>
<a href="https://twitter.com/johnpolacek" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @johnpolacek</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<p>This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). Or use it as a player to show video playlist. BigVideo.js can also show big background images, which is nice to have for showing big background images for devices that don’t have autoplay for ambient video.</p>
<p>BigVideo.js is built on top of <a href="http://videojs.com" target="_blank">Video.js</a> from <a href="http://zencoder.com" target="_blank">zencoder</a>. So big thanks to them!</p>
<p>You can read about how to use BigVideo.js below. Also, check out the <a href="http://tympanus.net/codrops/2012/09/19/fullscreen-video-slideshow-with-bigvideo-js/">tutorial I wrote for Codrops</a>.</p>
<p class="download-links">
<strong>DOWNLOAD:</strong> <a class="download" href="https://github.com/dfcb/BigVideo.js/zipball/master">zip</a> <a class="download" href="https://github.com/dfcb/BigVideo.js/tarball/master">tar</a>
</p>
</div>
<div id="setup" class="box">
<h2>Setup</h2>
<p>BigVideo.js uses the Video.js api. It also requires jQuery, jQuery UI (for the slider control) and the <a href="https://github.com/desandro/imagesloaded" target="_blank">jQuery imagesloaded</a> plugin. Make sure you include all these libraries when using BigVideo.js.</p>
<p>To simply play a video that takes up the entire browser window (like in <a href="example-simple.html" target="_blank">this example</a>), do this:</p>
<p><blockquote><pre>
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});</pre></blockquote></p>
<p>For best results in Firefox, create an Ogg version of your video and configure BigVideo.js as below or in <a href="example-ogg.html" target="_blank">this example</a>. <small>(note: works for WebM also)</small></p>
<p><blockquote><pre>
$(function() {
var BV = new $.BigVideo({useFlashForFirefox:false});
BV.init();
BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});
});</pre></blockquote></p>
</div>
<div id="ambient" class="box">
<h2>Ambient Video</h2>
<p>To play silent video in the background of a page (like in <a href="example-ambient.html" target="_blank">this example</a>), use BigVideo’s ambient setting:</p>
<p><blockquote><pre>
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
});</pre></blockquote></p>
<p>Or play a series of ambient background videos (like in <a href="example-ambient-loop.html" target="_blank">this example</a>)</p>
<p><blockquote><pre>
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true});
});</pre></blockquote></p>
<p>Keep in mind that mobile devices do not allow video autoplay. To account for this, use <a href="http://modernizr.com" target="_blank">Modernizr</a> to detect for touchscreen devices, then send a large poster image for BigVideo to use instead (like in <a href="example-ambient-touch.html" target="_blank">this example</a>).</p>
<p><blockquote><pre>
var BV = new $.BigVideo();
BV.init();
if (Modernizr.touch) {
BV.show('video-poster.jpg');
} else {
BV.show('video.mp4',{ambient:true});
}</pre></blockquote></p>
</div>
<div id="playlists" class="box">
<h2>Playlists</h2>
<p>You can create a playlist like this:</p>
<div class="playlist">
<a href="vids/dock.mp4" class="playlist-btn">Video #1</a>
<a href="vids/river.mp4" class="playlist-btn">Video #2</a>
<a href="vids/frontier.mp4" class="playlist-btn">Video #3</a>
</div>
<p>For more on how to do this, including auto-hiding content and alternate fullscreen image content for touchscreen devices, take a look at <a href="example-playlist.html">this example</a>.
<p><small>Playlist clips courtesy of <a href="http://beachfrontprod.blogspot.com/" target="_blank">Beachfront B-Roll</a></small></p>
</div>
<div id="videojs" class="box">
<h2>Video.js</h2>
<p>Because BigVideo.js is built on top of <a href="http://videojs.com" target="_blank">Video.js</a>, you can use the <a href="http://videojs.com/docs/api/" target="_blank">Video.js api</a>. Access the Video.js player with the getPlayer() method.</p>
<p><blockquote><pre>
BV.getPlayer().pause();</pre></blockquote></p>
</div>
<div id="tips" class="box">
<h2>Tips</h2>
<p>For best results, I recommend using Vimeo. Sign up for <a href="https://vimeo.com/pro" target="_blank">Vimeo Pro</a>, then use their direct mp4 link to serve the video. Vimeo not only has solid bandwidth for delivering video, they do great compression. If you start with a high def source at a bitrate of 10mbps or more, it does such a nice job that you can probably get away with using the standard def source as your background video.</p>
<p>To find some great background video footage, try the links posted <a href="http://thecliparchive.com" target="_blank">here</a>, which is where I found out about all the excellent clips over at <a href="http://beachfrontprod.blogspot.com/" target="_blank">Beachfront B-Roll</a>.</p>
</div>
<p class="footer-text">We are the <a href="http://opensource.draftfcb.net">dev group at Draftfcb Chicago</a>. If you want to work on big digital ideas for big brands, get in touch with us at <a href="mailto:devrecruiting@draftfcb.com">devrecruiting@draftfcb.com</a>.</p>
<p class="footer-text">Check out <a href="http://opensource.draftfcb.net">more open source projects</a> from Draftfcb Chicago</p>
</div>
<!-- BigVideo Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/jquery.imagesloaded.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>
<!-- BigVideo -->
<script src="js/bigvideo.js"></script>
<!-- Demo -->
<script src="js/jquery.scrollTo.js"></script>
<script>
var BV;
$(function() {
// initialize BigVideo
BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
// Playlist button click starts video
$('.playlist-btn').on('click', function(e) {
e.preventDefault();
BV.show($(this).attr('href'));
})
// Video Play/Pause toggle
$('#video-toggle').on('click', function(e) {
if (this.checked) BV.getPlayer().play();
else BV.getPlayer().pause();
})
// set up navigation
$('.nav-link').on('click',function(e){
e.preventDefault();
scrollToSection($(this).attr('href'));
})
function scrollToSection(id) {
$(window)._scrollable().stop();
$(window).scrollTo(id, {
duration: 300,
offset: -50,
// easeInOutQuad
easing: function(x,t,b,c,d){if((t/=d/2)<1) return c/2*t*t+b;return -c/2*((--t)*(t-2)-1)+b;}
});
}
});
</script>
<!--
BigVideo.js Analytics to see how many people are visiting our project page.
Do not use this code on your site unless you want to show up on our Google Analytics account :)
-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34145020-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>