forked from chris-allan/video-js-test
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmovie-s4.html
102 lines (94 loc) · 9.4 KB
/
movie-s4.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
<!DOCTYPE html>
<html class="no-js hippio-solo" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title class="pnas-title">Movie S4</title>
<script src="movie-s4_files/jquery-1.js"></script>
<script type="text/javascript" src="movie-s4_files/video_inline.js"></script>
<link href="movie-s4_files/video-js-unminified.css" rel="stylesheet" type="text/css" media="screen" title="Video JS" charset="utf-8">
<link rel="stylesheet" href="movie-s4_files/css.css">
</head>
<body style="margin: 0;">
<article class="hw-gen-page pagetype-content hw-pub-id-datasupp">
<figure style="
width: 600px;
background-color: #f3f5f7;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 15px;
padding: 20px 20px 55px;"
class="video-js-box center">
<div style="width: 229px; height: 720px;" poster="http://static.movie-usa.glencoesoftware.com/jpg/10.1073/218/b001e818d59801b2db3913201e205418ce43809e/pnas.1405209111.sm04.jpg" preload="none" class="video-js vjs-default-skin vjs-big-play-centered vjs-paused vjs-controls-enabled vjs-user-inactive" id="vjs_video_3"><video id="vjs_video_3_html5_api" class="vjs-tech" preload="none" poster="http://static.movie-usa.glencoesoftware.com/jpg/10.1073/218/b001e818d59801b2db3913201e205418ce43809e/pnas.1405209111.sm04.jpg">
<source src="movie-s4_files/pnas.webm" type="video/webm; codecs="vp8.0, vorbis"">
<source src="movie-s4_files/pnas.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">
<source src="movie-s4_files/pnas.dms" type="video/ogg; codecs="theora, vorbis"">
<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><div></div><div style="background-image: url("http://static.movie-usa.glencoesoftware.com/jpg/10.1073/218/b001e818d59801b2db3913201e205418ce43809e/pnas.1405209111.sm04.jpg"); background-size: 180px 720px; background-position: 24px 0px;" tabindex="-1" class="vjs-poster"></div><div class="vjs-text-track-display"></div><div class="vjs-loading-spinner"></div><div aria-label="play video" tabindex="0" aria-live="polite" role="button" class="vjs-big-play-button"><span aria-hidden="true"></span></div><div class="vjs-control-bar"><div tabindex="0" aria-live="polite" role="button" class="vjs-play-control vjs-control "><div class="vjs-control-content"><span class="vjs-control-text">Play</span></div></div><div class="vjs-current-time vjs-time-controls vjs-control"><div aria-live="off" class="vjs-current-time-display"><span class="vjs-control-text">Current Time </span>0:00</div></div><div class="vjs-time-divider"><div><span>/</span></div></div><div class="vjs-duration vjs-time-controls vjs-control"><div aria-live="off" class="vjs-duration-display"><span class="vjs-control-text">Duration Time</span> 0:00</div></div><div class="vjs-remaining-time vjs-time-controls vjs-control"><div aria-live="off" class="vjs-remaining-time-display"><span class="vjs-control-text">Remaining Time</span> -0:00</div></div><div class="vjs-live-controls vjs-control"><div aria-live="off" class="vjs-live-display"><span class="vjs-control-text">Stream Type</span>LIVE</div></div><div class="vjs-progress-control vjs-control"><div aria-valuetext="0:00" aria-label="video progress bar" class="vjs-progress-holder vjs-slider" tabindex="0" aria-valuemax="100" aria-valuemin="0" aria-valuenow="NaN" role="slider"><div class="vjs-load-progress"><span class="vjs-control-text"><span>Loaded</span>: 0%</span></div><div class="vjs-play-progress"><span class="vjs-control-text"><span>Progress</span>: 0%</span></div><div aria-live="off" class="vjs-seek-handle vjs-slider-handle"><span class="vjs-control-text">00:00</span></div></div></div><div tabindex="0" aria-live="polite" role="button" class="vjs-fullscreen-control vjs-control "><div class="vjs-control-content"><span class="vjs-control-text">Fullscreen</span></div></div><div class="vjs-volume-control vjs-control"><div aria-valuetext="100%" aria-label="volume level" class="vjs-volume-bar vjs-slider" tabindex="0" aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" role="slider"><div class="vjs-volume-level"><span class="vjs-control-text"></span></div><div class="vjs-volume-handle vjs-slider-handle"><span class="vjs-control-text">00:00</span></div></div></div><div tabindex="0" aria-live="polite" role="button" class="vjs-mute-control vjs-control"><div><span class="vjs-control-text">Mute</span></div></div><div role="button" aria-haspopup="true" class="vjs-playback-rate vjs-menu-button vjs-control vjs-hidden"><div class="vjs-control-content"><span class="vjs-control-text">Playback Rate</span></div><div class="vjs-playback-rate-value">1</div><div class="vjs-menu"><ul class="vjs-menu-content"></ul></div></div><div aria-label="Subtitles Menu" style="display: none;" aria-haspopup="true" tabindex="0" aria-live="polite" role="button" class="vjs-subtitles-button vjs-menu-button vjs-control "><div class="vjs-control-content"><span class="vjs-control-text">Subtitles</span><div class="vjs-menu"><ul class="vjs-menu-content"><li aria-selected="true" tabindex="0" aria-live="polite" role="button" class="vjs-menu-item vjs-selected">subtitles off</li></ul></div></div></div><div aria-label="Captions Menu" style="display: none;" aria-haspopup="true" tabindex="0" aria-live="polite" role="button" class="vjs-captions-button vjs-menu-button vjs-control "><div class="vjs-control-content"><span class="vjs-control-text">Captions</span><div class="vjs-menu"><ul class="vjs-menu-content"><li aria-selected="true" tabindex="0" aria-live="polite" role="button" class="vjs-menu-item vjs-selected">captions off</li></ul></div></div></div><div aria-label="Chapters Menu" aria-haspopup="true" style="display: none;" tabindex="0" aria-live="polite" role="button" class="vjs-chapters-button vjs-menu-button vjs-control "><div class="vjs-control-content"><span class="vjs-control-text">Chapters</span><div class="vjs-menu"><ul class="vjs-menu-content"><li class="vjs-menu-title">Chapters</li></ul></div></div></div></div><div class="vjs-error-display"><div></div></div></div>
<figcaption class="legend">
<h2 class="figure-title pnas-title">Movie S4</h2>
<p> Confocal time-lapse movie showing individual contraction of multiple
cells in response to a local stream of ATP. Cell membranes are labeled
by a membrane-targeted GFP. Because the apical surfaces of the explant
are not flat, we collected confocal stacks at 25-s intervals. Single
frames of the movie are the product of a maximal projection of each of
these stacks.</p>
</figcaption>
<figcaption class="citation">
<h1 class="manuscript-title"><a href="http://dx.doi.org/10.1073/pnas.1405209111">Mechanochemical actuators of embryonic epithelial contractility</a></h1>
<p class="authors">YongTae Kim, Melis Hazar, Deepthi S. Vijayraghavan,
Jiho Song, Timothy R. Jackson, Sagar D. Joshi, William C. Messner, Lance
A. Davidson, and Philip R. LeDuc</p>
<p class="doi-info">PNAS. 2014. 111:14366-14371 DOI: <a href="http://dx.doi.org/10.1073/pnas.1405209111">10.1073/pnas.1405209111</a></p>
</figcaption>
<div class="call-to-action"><a class="solo-page-action-button dipper button-left" download="" href="http://static.movie-usa.glencoesoftware.com/source/10.1073/218/b001e818d59801b2db3913201e205418ce43809e/pnas.1405209111.sm04.mov">Download Original Video</a></div>
<div class="call-to-action"><a class="solo-page-action-button dipper button-right" href="http://www.pnas.org/lookup/suppl/doi:10.1073/pnas.1405209111/-/DCSupplemental">Browse All Videos »</a></div>
</figure>
</article>
<footer>
<p>powered by <a href="http://www.datainpress.com/" target="_blank">Data InPress</a></p>
</footer>
<script type="text/javascript"><!--
// timeout for video controls auto-hide, in ms
videojs.options.inactivityTimeout = 200;
var aspect = 256 / 1024;
var eh = $(window).height() - 30; // leave some vertical whitespace
var ew = $(window).width() - 20; // leave some horizontal whitespace
var width = Math.min(1200, ew, 256, eh * aspect);
var height = Math.min(720, eh, 1024, ew / aspect);
width = Math.max(width, 200);
height = Math.max(height, 100);
// column width at least 600 pixels
$(".video-js-box").css('width', Math.max(width, 600) + 'px');
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');
video.toggleClass("hippio-wide", width >= 400).toggleClass("hippio-narrow", width <= 200);
video.toggleClass("hippio-large", width >= 400 && height >= 400)
.toggleClass("hippio-small", width <= 200 || height <= 200);
videojs(video[0]);
// calculate poster image size to whole pixel to avoid
// Firefox on MacOS rendering bug
var posterwidth = width;
var posterheight = height;
if (width / height < aspect) {
posterheight = Math.ceil(width / aspect);
} else {
posterwidth = Math.ceil(height * aspect);
}
video.siblings('.vjs-poster')
.css('background-size', posterwidth + 'px ' + posterheight + 'px')
.css('background-position',
Math.floor((width - posterwidth) / 2) + 'px ' +
Math.floor((height - posterheight) / 2) + 'px');
// custom PNAS title detection if title not set explicitly
var legend = $("figcaption.legend p");
var parts = legend.html().split(".");
var pnas_title = parts[0];
if (pnas_title.match(/^Movie/)) {
$(".pnas-title").text(pnas_title);
legend.html(parts.slice(1).join('.'));
}
//-->
</script>
</body></html>