Commit 694dbf81 authored by gijs's avatar gijs

Autostarting videos, moved grid to the top

parent 6dcd2ec7
......@@ -166,7 +166,36 @@
Five days preparation workshop : October 9 → 14 Commented performance : Saturday October 14, 8pm.
<a href="http://balsamine.be/">Balsamine theater, Félix Marchallaan 1, 1030 Schaarbeek</a>
</p>
<article class="panel" id="eight">
<h2 id="grid">Grid</h2>
<section class="content">
<p class="narrative">Drawing of the grid is the first element of the presentation. Developed as a group the scene start as the audience
is still coming in. Equiped with different coloured technical tapes, each one coordinates in solo or binomial
to place the different markers. The installation of the tape uses walking techniques inspired by the performance
of Esther Ferrer
<sup>
<a href="#note1">[1]</a>
</sup> or measured movements, rolled developed for the occasion. In the background we listen to Laurie Anderson
- O Superman.
</p>
<ol class="footnotes">
<li id="note1">Esther Ferrer,
<a href="https://www.youtube.com/watch?v=S6KflUAhQXI">Le chemin se fait en marchant</a>
</li>
</ol>
<p class="narrative">The grid has a proportion of 8 x 4 and allows us to overflow on the wall.</p>
<p class="narrative">After placement of the grid by the bodies, light focus on the plotter who starts 'marking the territory'. One's
filming next to it so that the audience can see the pen trajectory, plotter's dance projected on the side
wall. On page 8, the grid is drawn.
</p>
</section>
<section class="video">
<iframe src="https://player.vimeo.com/video/255352158?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
</section>
</article>
<article class="panel" id="one">
<section class="content">
<h2 id="dot">.</h2>
......@@ -196,6 +225,10 @@ endfig;
end
</code>
</section>
<section class="video">
<iframe src="https://player.vimeo.com/video/255353045?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
</section>
</article>
<article class="panel" id="three">
<section class="content">
......@@ -262,11 +295,8 @@ end
mix between the latinesque cornered letter and a rounded one, even more rounded in cursive .</p>
</section>
<section class="video">
<iframe src="https://player.vimeo.com/video/255353606" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>
<a href="https://vimeo.com/255353606">page6-curve</a> from
<a href="https://vimeo.com/user80784832">OSP</a> on
<a href="https://vimeo.com">Vimeo</a>.</p>
<iframe src="https://player.vimeo.com/video/255353606?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
</section>
</article>
<article class="panel" id="seven">
......@@ -298,32 +328,6 @@ end
</p>
</section>
</article>
<article class="panel" id="eight">
<h2 id="grid">Grid</h2>
<section class="content">
<p class="narrative">Drawing of the grid is the first element of the presentation. Developed as a group the scene start as the audience
is still coming in. Equiped with different coloured technical tapes, each one coordinates in solo or binomial
to place the different markers. The installation of the tape uses walking techniques inspired by the performance
of Esther Ferrer
<sup>
<a href="#note1">[1]</a>
</sup> or measured movements, rolled developed for the occasion. In the background we listen to Laurie Anderson
- O Superman.
</p>
<ol class="footnotes">
<li id="note1">Esther Ferrer,
<a href="https://www.youtube.com/watch?v=S6KflUAhQXI">Le chemin se fait en marchant</a>
</li>
</ol>
<p class="narrative">The grid has a proportion of 8 x 4 and allows us to overflow on the wall.</p>
<p class="narrative">After placement of the grid by the bodies, light focus on the plotter who starts 'marking the territory'. One's
filming next to it so that the audience can see the pen trajectory, plotter's dance projected on the side
wall. On page 8, the grid is drawn.
</p>
</section>
</article>
<style type="text/css">
@font-face {
......@@ -511,7 +515,50 @@ end
background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/8.svg");
}
</style>
<script src="player.js"></script>
<script>
function autoStartPlayer(selector) {
var video = document.querySelector(selector);
var player = new Vimeo.Player(video);
var windowHeight = window.innerHeight;
var auto = true;
var disableAuto = function () { auto = false };
var minVisible = (1 / 3);
player.on('play', disableAuto);
document.addEventListener('scroll', function () {
var rect = video.getBoundingClientRect();
var top = rect.top;
var visible = Math.min(1, ((top <= 0) ? rect.top + rect.height : windowHeight - top) / rect.height);
if (auto) {
if (visible < minVisible) {
player.getPaused().then(function (paused) {
if (!paused) {
player.off('pause');
player.pause();
player.on('play', disableAuto);
}
})
} else {
player.getPaused().then(function (paused) {
if (paused) {
player.off('play');
player.play();
player.on('pause', disableAuto);
}
})
}
}
}, true);
}
autoStartPlayer('#eight iframe');
autoStartPlayer('#two iframe');
autoStartPlayer('#six iframe');
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment