forked from chris-allan/video-js-test
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·84 lines (61 loc) · 3.22 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
<!DOCTYPE html>
<html>
<head>
<title>Data InPress solo page</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body class="fully-responsive">
<article>
<figure>
<video id="video-1" class="responsive video-js vjs-default-skin vjs-big-play-centered vjs-big-play-button center" controls preload="none" width="400" height="400"
poster="http://static.rup-movie.glencoesoftware.com/jpg/10.1084/898/6288d83a2327213e0c715117afe6a94e61732572/JEM_20132336_V1.jpg"
data-setup='{
"controls": true,
"autoplay": false,
"preload": "none"
}'>
<source src="http://static.rup-movie.glencoesoftware.com/mp4/10.1084/898/6288d83a2327213e0c715117afe6a94e61732572/JEM_20132336_V1.mp4" type='video/mp4' />
<source src="http://static.rup-movie.glencoesoftware.com/webm/10.1084/898/6288d83a2327213e0c715117afe6a94e61732572/JEM_20132336_V1.webm" type='video/webm' />
<source src="http://static.rup-movie.glencoesoftware.com/ogv/10.1084/898/6288d83a2327213e0c715117afe6a94e61732572/JEM_20132336_V1.ogv" type='video/ogg' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<figcaption class="legend">
<h2 class="figure-title">Video 1</h2>
<p>This is the fully responsive version.</p>
<p>video page layout of Time-lapse video of bone marrow-derived eosinophils and a C. elegans dauer larva over the course of 80 min. Images were acquired once every 30 s and are displayed at a frame rate of 15/s. Collective migration toward the debris in the top right was not apparent. Stills from this video are shown in Fig. 1. Results represent three independent experiments. Bar, 50 um.</p>
</figcaption>
<figcaption class="citation">
<h1 class="manuscript-title"><a href="http://dx.doi.org/10.1083/jcb.201312002">Leukotriene B4 amplifies eosinophil accumulation in response to nematodes</a></h1>
<p class="authors">Michael L. Patnode, Jennifer K. Band, Matthew F. Krummel, Richard M. Locksley, Steven D. Rosen</p>
<p class="doi-info">JEM vol. 205 no. 5 643-661, doi: <a href="http://dx.doi.org/10.1083/jcb.201312002">10.1083/jcb.201312002</a></p>
</figcaption>
</figure>
</article>
<footer>
<p>powered by <a href="http://www.glencoesoftware.com/data-inpress.html" target="_blank">Data InPress</a></p>
</footer>
<script>$(function() {
var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed"),
$fluidEl = $("figure");
$allVideos.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidth = $fluidEl.width();
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
});
</script>
</body>
</html>