forked from boazsender/Remixer
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·81 lines (70 loc) · 4.07 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
<!DOCTYPE html>
<html>
<head>
<meta>
<!--
__ ___ _____ _____ _ _
\ \ / (_) / ____| / ____| | | |
\ \ / / _ _____ __ | (___ ___ _ _ _ __ ___ ___ | | _ _| | |_ _ _ _ __ ___
\ \/ / | |/ _ \ \ /\ / / \___ \ / _ \| | | | '__/ __|/ _ \ | | | | | | | __| | | | '__/ _ \
\ / | | __/\ V V / ____) | (_) | |_| | | | (__| __/ | |____| |_| | | |_| |_| | | | __/
\/ |_|\___| \_/\_/ |_____/ \___/ \__,_|_| \___|\___| \_____|\__,_|_|\__|\__,_|_| \___|
-->
<title>The HTML5 Video Remixer</title>
<!-- See a working version of this demo at GenderRemixer.com -->
<link rel="stylesheet" href="styles/bootstrap-1.2.0.min.css">
<link rel="stylesheet" href="styles/style.css" />
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery-ui-1.8.16.custom.min.js"></script>
<script src="scripts/remixer.js"></script>
</head>
<body>
<div id="wrapper"class='clearfix'>
<header>
<h1>The HTML5 Video Remixer Project</h1>
</header>
<figure id="bin1" class='well' >
<h1 id="boys">Source A</h1>
<!-- Replace the following file paths with your own -->
<!-- All webM videos and png thumbnails should use the same file names in the same folder -->
<img class="bin1 thumb" src="http://www.genderremixer.com/html5/media/boys_battleground.png"/>
<img class="bin1 thumb" src="http://www.genderremixer.com/html5/media/boys_gijoe.png"/>
<img class="bin1 thumb" src="http://www.genderremixer.com/html5/media/boys_modmachines.png"/>
<img class="bin1 thumb" src="http://www.genderremixer.com/html5/media/boys_legocastle.png"/>
<img class="bin1 thumb" src="http://www.genderremixer.com/html5/media/boys_playpirates.png"/>
<img class="bin1 thumb" src="http://www.genderremixer.com/html5/media/boys_clonewars.png"/>
<img class="bin1 thumb" src="http://www.genderremixer.com/html5/media/boys_battleship.png"/>
<img class="bin1 thumb" src="http://www.genderremixer.com/html5/media/boys_transformblaster.png"/>
<img class="bin1 thumb" src="http://www.genderremixer.com/html5/media/boys_ubuildbattleship.png"/>
<img class="bin1 thumb" src="http://www.genderremixer.com/html5/media/boys_nerfstampede.png"/>
</figure>
<figure id="canvas" class='well'>
<div class='droppables clearfix'>
<section id="audioSource" ></section>
<section id="videoSource"></section>
</div>
<div id='controls' class="controls class">
<a href="#" id="makeMashup" class="btn large success">Mashup</a>
<a href="#" id="swapVideos" class="btn large primary">Swap</a>
<a href="#" id="clearVideos" class="btn large danger">Clear</a>
</div>
<section id="mashup"></section>
</figure>
<figure id="bin2" class='well' >
<h1 id="girls">Source B</h1>
<!-- Replace the following file paths with your own -->
<!-- All webM videos and png thumbnails should use the same file names in the same folder -->
<img class="bin2 thumb" src="http://www.genderremixer.com/html5/media/girls_pollypocket.png"/>
<img class="bin2 thumb" src="http://www.genderremixer.com/html5/media/girls_barbieglitter.png"/>
<img class="bin2 thumb" src="http://www.genderremixer.com/html5/media/girls_bettyspeghetty.png"/>
<img class="bin2 thumb" src="http://www.genderremixer.com/html5/media/girls_babyalive.png"/>
<img class="bin2 thumb" src="http://www.genderremixer.com/html5/media/girls_4everkidzdoll.png"/>
<img class="bin2 thumb" src="http://www.genderremixer.com/html5/media/girls_cgcnds.png"/>
<img class="bin2 thumb" src="http://www.genderremixer.com/html5/media/girls_barbieprincess.png"/>
<img class="bin2 thumb" src="http://www.genderremixer.com/html5/media/girls_miopup.png"/>
<img class="bin2 thumb" src="http://www.genderremixer.com/html5/media/girls_mylittlepony.png"/>
<img class="bin2 thumb" src="http://www.genderremixer.com/html5/media/girls_lilpetshop.png"/>
</figure>
</div>
</body>
</html>