forked from johnpolacek/BigVideo.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example-playlist.html
executable file
·108 lines (99 loc) · 4.91 KB
/
example-playlist.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
<!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">
<script src="js/modernizr-2.5.3.min.js"></script>
</head>
<body>
<div class="nav box">
<ul class="video-list">
<li><a href="vids/dock.mp4" class="playlist-btn">Video #1</a></li>
<li><a href="vids/river.mp4" class="playlist-btn">Video #2</a></li>
<li><a href="vids/frontier.mp4" class="playlist-btn">Video #3</a></li>
</ul>
</div>
<div class="main">
<div id="overview" class="box">
<h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>
<h2>Fullscreen Background Video Website With Playlist Example</h2>
<p>Take a look at the source for this example to see how to implement a BigVideo.js playlist on a website. In addition to the normal functionality of BigVideo.js, I’ve added an auto-hide script to this example, so the content fades out away when you stop moving the mouse (unless you are over the playlist nav). Take a look and feel free to implement that if it makes sense.</p>
<p>Keep in mind, you may have to adjust the styles in the bigvideo.css file to get this working right in your design. Making the site work for both desktop and mobile browsers is pretty tricky as well. Use Modernizr’s touch feature detection to set up rules for how BigVideo behaves for touchscreen devices that likely do not allow autoplay.</p>
</div>
</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>
$(function() {
// Use Modernizr to detect for touch devices,
// then serve them alternate background image content
var isTouch = Modernizr.touch;
// vars for auto hiding
var isShowingPlaylist = false;
var isHidden = false;
var autoHideTimer;
var $showContentButton = $('<div class="touchscreen-show-button box">Back</div>')
// initialize BigVideo
var BV = new $.BigVideo({forceAutoplay:isTouch});
BV.init();
// show background image
BV.show('img/background-dock.jpg');
// Playlist button click starts video, enables autohiding
$('.playlist-btn').on('click', function(e) {
e.preventDefault();
BV.show($(this).attr('href'));
autoHide(true);
isShowingPlaylist = true;
})
// Turn off autohiding when mouse is over the nav
// (not necessary for touchscreens)
if (!isTouch) {
$('.nav')
.on('mouseover', function() {
if (isShowingPlaylist) autoHide(false);
})
.on('mouseout', function() {
if (isShowingPlaylist) autoHide(true);
});
} else {
// add button to show content on touchscreen
$('body').prepend($showContentButton);
}
function autoHide(enable) {
if (enable) {
isHidden = true;
$('body').on('mousemove', function(event){
if (isHidden) {
isHidden = false;
$('.nav, .main').removeClass('transparent');
}
clearTimeout(autoHideTimer);
autoHideTimer = setTimeout(function() {
isHidden = true;
$('.nav, .main').addClass('transparent');
}, 1000);
});
} else {
clearTimeout(autoHideTimer);
$('body').off('mousemove');
$('.nav, .main').removeClass('transparent');
}
}
});
</script>
</body>
</html>