-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
92 lines (86 loc) · 4.15 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<title>CONNECTME Player</title>
<script src="lib/underscoreJS/underscore.min.js"></script>
<script src="src/utils.js"></script>
<script src="lib/videojs/video.js"></script>
<script src="lib/lime.js"></script>
<script src="lib/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="lib/backboneJS/backbone.js"></script>
<!-- Plugin dependencies -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link href="css/screen.css" rel="stylesheet">
<script type="text/javascript">
jQuery(document).ready(function(){
var cmfUrl = UTILS.getParameterByName("cmfUrl");
if(cmfUrl) {
jQuery('#cmf-url').val(cmfUrl);
}
cmfUrl = cmfUrl.replace(/\/$/, '') + '/';
function loadVideos() {
var container = jQuery('#videolist');
container.html("");
cmfUrl = jQuery('#cmf-url').val();
this.cmf = new CMF(cmfUrl);
// this.cmf.test();
function renderVideoThumbs(list){
var lang = jQuery('#lang').val();
var template = _.template(jQuery('.videolist-template').html());
container.html(template({list:list, cmfUrl: cmfUrl, lang: lang}));
}
this.cmf.getAnnotatedVideos(function(err, res){
if(err){
console.error("Error loading annotated videos", err);
alert("Error loading annotated videos: " + err);
return;
}
console.info('videos', res);
renderVideoThumbs(res);
});
}
jQuery('button#load').click(loadVideos);
loadVideos();
});
</script>
<script class="videolist-template" type="html">
<table>
<% _.each(list, function(video) { %>
<tr>
<td><a href="full.html?videoUrl=<%= video.instance.value %>&cmfUrl=<%=cmfUrl%>&lang=<%=lang%>" target="_blank"><%= video.title.value %></a></td>
<td><a href="full.html?videoUrl=<%= video.instance.value %>&cmfUrl=<%=cmfUrl%>&lang=<%=lang%>" target="_blank"><img src="<%= video.thumbnail.value %>" /></a></td>
<td><a href="simple.html?videoUrl=<%= video.instance.value %>&cmfUrl=<%=cmfUrl%>&lang=<%=lang%>" target="_blank">simple player</a></td>
</tr>
<% }); %>
</table>
</script>
</head>
<body>
<div id="header" class="header" align="left">
<a href="./"><img src="img/connectme_logo_web.png" width="204" height="40" border="0"/></a>
</div>
<div text-align="center" id="container">
<div id="widget-container-1" class="widget-container vertical"> </div>
<div class="mainwrapper" id="mainwrapper" align="center">
<div>
CMF URL: <input type="text" id="cmf-url" value="http://connectme.salzburgresearch.at/CMF" style="width: 300px;"/><br/>
Language code: <input type="text" id="lang" value="en" style="width: 30px;"/><br/>
<button id="load">Load</button>
</div>
Here you see the annotated videos for the above specified CMF end-point:
<div id="videolist"></div>
</div>
<div id="widget-container-2" class="widget-container vertical"> </div>
</div>
<div id="footer" align="center">
<div class="container" align="center">
<a target='_blank' href='http://www.sti2.org/'><img alt='STI Research' src='img/sti-research.png' border='0'/></a><a target="_blank" href="http://salzburgresearch.at"><img
alt="Salzburg Research Forschungsgesellschaft" src="img/salzburgresearch.png" border="0"/></a>
</div>
</div>
</div>
</body>
</html>