XPUB
/
project.xpub.nl
65
1
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

live + live-with-etherpad

Browse Source
master
Michael Murtaugh 5 years ago
parent 61ef6231b8
commit 03fac1c131
4 changed files with 138 additions and 32 deletions
Show Stats Download Patch File Download Diff File

61
collectiveioning/live-with-etherpad.css
Unescape Escape View File

@ -0,0 +1,61 @@
body {
margin: 0;
overflow: hidden;
background: black;
color: white;
}
#content {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
display: flex;
flex-direction: row;
}
#left {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
#video {
background: gray;
overflow: hidden;
/*width: 480px;*/
/*height: 270px;*/
/* https://css-tricks.com/aspect-ratio-boxes/ */
/* height + padding-top = 16:9 */
height: 0;
padding-top: 56.25%;
/* flex: 1 1 auto;
*/ position: relative;
}
#video .content {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
video {
width: 100%;
height: 100%;
}
#blabla {
/*width: 480px;*/
flex: 1 1 auto;
}
#pad {
flex: 1 1 auto;
}
#pad iframe {
width: 100%;
height: 100%;
}
.video-js{
width: 100% !important;
height: 100% !important;
}

49
collectiveioning/live-with-etherpad.html
Unescape Escape View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<title>XPUB: Collectiveioning</title>
<link rel="stylesheet" type="text/css" href="live-with-etherpad.css">
<!-- 1. CDN -->
<!-- <link href="https://unpkg.com/video.js@5.16.0/dist/video-js.css" rel="stylesheet"> -->
<!-- <script src="https://unpkg.com/video.js@5.16.0/dist/video.js"></script> -->
<!-- <script src="https://unpkg.com/videojs-contrib-hls@4.1.1/dist/videojs-contrib-hls.js"></script> -->
<!-- or 2. LOCAL -->
<link href="videojs/video-js.css" rel="stylesheet">
<script src="videojs/video.js"></script>
<script src="videojs/videojs-contrib-hls.js"></script>
</head>
<body>
<div id="content">
<div id="left">
<div id="video">
<div class="content">
<video controls id="master" class="video-js vjs-default-skin vjs-fullscreen" poster="live_poster.png" controls data-setup="{}">
<source src="https://live.lilimit.com:8081/hls1/Aymeric.m3u8" type="application/x-mpegURL" >
<!-- <source src="test.mp4" > -->
</video>
</div>
</div>
<div id="blabla">
<p>Collectiveioning --- text here</p>
</div>
</div>
<div id="pad"><iframe src="https://pad.xpub.nl/p/Collectiveioning"></iframe></div>
</div>
<script>
var player = videojs('master');
player.play();
//player.auto('true'); // this seems to be wrong (no auto method)
player.autoplay(true);
//player.on("fullscreenchange", (a, b, c) => {
// console.log("fullscreen change", a, b, c);
// var ret = player.isFullscreen();
// console.log("isFullscreen", ret);
//})
</script>
</body>
</html>

35
collectiveioning/live.css
Unescape Escape View File

@ -5,31 +5,27 @@ body {
color: white;
}
#content {
#page {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
display: flex;
flex-direction: row;
}
#left {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
#video {
background: gray;
overflow: hidden;
flex: 10 1 auto;
/*width: 480px;*/
/*height: 270px;*/
/* https://css-tricks.com/aspect-ratio-boxes/ */
/* height + padding-top = 16:9 */
height: 0;
padding-top: 56.25%;
/* flex: 1 1 auto;
*/ position: relative;
}
.ratio169{
height: 0;
padding-top: 56.25%;
}
#video .content {
position: absolute;
top: 0; left: 0;
@ -44,18 +40,19 @@ video {
#blabla {
/*width: 480px;*/
flex: 1 1 auto;
}
#pad {
flex: 1 1 auto;
}
#pad iframe {
width: 100%;
height: 100%;
min-height: auto;
}
.video-js{
width: 100% !important;
height: 100% !important;
}
a {
color: #4F4;
text-decoration: none;
}
a:hover {
background: #4F4;
color: black;
}

25
collectiveioning/live.html
Unescape Escape View File

@ -18,21 +18,20 @@
</head>
<body>
<div id="content">
<div id="left">
<div id="video">
<div class="content">
<video controls id="master" class="video-js vjs-default-skin vjs-fullscreen" poster="live_poster.png" controls data-setup="{}">
<source src="https://live.lilimit.com:8081/hls1/Aymeric.m3u8" type="application/x-mpegURL" >
<!-- <source src="test.mp4" > -->
</video>
</div>
</div>
<div id="blabla">
<p>Collectiveioning --- text here</p>
<div id="page">
<div id="video">
<div class="content">
<video controls id="master" class="video-js vjs-default-skin vjs-fullscreen" poster="live_poster.png" controls data-setup="{}">
<source src="https://live.lilimit.com:8081/hls1/Aymeric.m3u8" type="application/x-mpegURL" >
<!-- <source src="test.mp4" > -->
</video>
</div>
</div>
<div id="pad"><iframe src="https://pad.xpub.nl/p/Collectiveioning"></iframe></div>
<div id="blabla">
<p>/ko 'lek tiv yon ning/ The gathering of collective memory. A pre-literate notion of memory, in a communal way, something commemorative rather than putting a memory in a container. What we thought it was going to be changed completely. We are in that way changing our memory of what it was supposed to be. What are you able to collect? Memories? Objects? People? A collection of texts and people, collecting and composing each other? Somehow it's not even important that we have all the knowledge, what's important is the living, generative sense of the collection.
</p>
<p>Complement your stream with <a href="https://pad.xpub.nl/p/Collectiveioning" target="_blank">live chat on the etherpad</a></p>
</div>
</div>
<script>
var player = videojs('master');

Write Preview
Loading…
Cancel
Save