forked from chris-allan/video-js-test
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathrup-sample-small-controls.html
73 lines (61 loc) · 3.6 KB
/
rup-sample-small-controls.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
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>http://rup-movie.glencoesoftware.com/video/10.1084/jem.20132336/video-1</title>
<!-- Change URLs to wherever Video.js files will be hosted -->
<link href="video-js/video-js-small.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<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="video-js/video.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
videojs.options.flash.swf = "video-js/video-js.swf";
</script>
</head>
<body>
<article class="hw-gen-page pagetype-content hw-pub-id-datasupp">
<figure class="video-js-box center" style="width:150px;"><!--Chris/Andreas: Can we make the width auto-match whatever the width of the video is at full-size here?-->
<video id="video-1" class="video-js vjs-default-skin vjs-big-play-centered vjs-big-play-button center" controls preload="none"
poster="http://static.rup-movie.glencoesoftware.com/jpg/10.1084/898/6288d83a2327213e0c715117afe6a94e61732572/JEM_20132336_V1.jpg"
data-setup='{
"controls": true,
"autoplay": false,
"preload": "none"
}'
width='150'
height='150'>
<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>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 type="text/javascript">
var aspect = 400 / 400;
var eh = $(window).height();
var ew = $(window).width();
var width = Math.min(ew, 150, eh * aspect);
var height = Math.min(eh, 150, ew / aspect);
var video = $("video");
video.attr('width', width).attr('height', height);
video.find('object').attr('width', width).attr('height', height);
video.siblings(
'img').css('width', width + 'px').css('height', height + "px");
VideoJS.setupAllWhenReady();
</script>
</body>
</html>