129 lines
6.1 KiB
HTML
129 lines
6.1 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en" dir="ltr">
|
|
<head>
|
|
<!--
|
|
version: 0.2
|
|
date: 2020 12 16
|
|
author: jorge@hangar.org
|
|
-->
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>live - hangar.org</title>
|
|
<link rel="stylesheet" href="https://grafica.hangar.org/assets/vendor/fontawesome-free-5.15.1-web/css/all.min.css">
|
|
<link rel="stylesheet" href="https://grafica.hangar.org/assets/css/foundation.min.css">
|
|
<link rel="stylesheet" href="./assets/css/video-js.min.css">
|
|
<link rel="stylesheet" href="https://grafica.hangar.org/assets/css/hangar-static-app.css">
|
|
<!-- header icons anf favicons -->
|
|
<link rel="apple-touch-icon" sizes="57x57" href="https://grafica.hangar.org/assets/favicons/apple-icon-57x57.png">
|
|
<link rel="apple-touch-icon" sizes="60x60" href="https://grafica.hangar.org/assets/favicons/apple-icon-60x60.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="https://grafica.hangar.org/assets/favicons/apple-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="76x76" href="https://grafica.hangar.org/assets/favicons/apple-icon-76x76.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="https://grafica.hangar.org/assets/favicons/apple-icon-114x114.png">
|
|
<link rel="apple-touch-icon" sizes="120x120" href="https://grafica.hangar.org/assets/favicons/apple-icon-120x120.png">
|
|
<link rel="apple-touch-icon" sizes="144x144" href="https://grafica.hangar.org/assets/favicons/apple-icon-144x144.png">
|
|
<link rel="apple-touch-icon" sizes="152x152" href="https://grafica.hangar.org/assets/favicons/apple-icon-152x152.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="https://grafica.hangar.org/assets/favicons/apple-icon-180x180.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="https://grafica.hangar.org/assets/favicons/android-icon-192x192.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="https://grafica.hangar.org/assets/favicons/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="96x96" href="https://grafica.hangar.org/assets/favicons/favicon-96x96.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="https://grafica.hangar.org/assets/favicons/favicon-16x16.png">
|
|
<link rel="manifest" href="https://grafica.hangar.org/assets/favicons/manifest.json">
|
|
<meta name="msapplication-TileColor" content="#ffffff">
|
|
<meta name="msapplication-TileImage" content="https://grafica.hangar.org/assets/img/ms-icon-144x144.png">
|
|
<meta name="theme-color" content="#ffffff">
|
|
<!-- end header icons anf favicons -->
|
|
<style type="text/css">
|
|
</style>
|
|
</head>
|
|
<body class="live-streaming">
|
|
<!-- change color switcher -->
|
|
<input type="checkbox" id=changecolor class="colorswitch">
|
|
<label for=changecolor class="colorswitch">
|
|
<span class="slider"></span>
|
|
</label>
|
|
<!-- change view switcher-->
|
|
<input type="checkbox" id=changeview class="viewswitch">
|
|
<label for=changeview class="viewswitch">
|
|
<span class="slider"></span>
|
|
</label>
|
|
<div id="wrapper" class="colorswitch-invert viewswitch-change">
|
|
<a name="top"></a>
|
|
<header class="grid-container">
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="cell small-12 flex-container flex-dir-column">
|
|
<div class="primary flex-child-shrink">
|
|
<h2 class="logo"><a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo">Hangar</a></h2>
|
|
<h1>live streaming</h1>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="cell small-12">
|
|
<h3> Un subtítulo queda muy bien</h3>
|
|
<p>Podemos poner el texto que queramos aqui <a href="#" title="titol del enllaç">enlaces incluidos</a> si nos interesa.</p>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</header>
|
|
<main class="grid-container viewswitch-container">
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="cell small-12 flex-container flex-dir-column">
|
|
<div class="primary flex-child-auto">
|
|
<content class="video-webchat">
|
|
<video id="video" class="video-js" controls preload="auto" data-setup="{}"></video>
|
|
<div id="webchat" class="embedchat">
|
|
<iframe id="chatframe" src="https://live.hangar.org/chat/#live-hangar"></iframe>
|
|
</div>
|
|
</content>
|
|
|
|
<aside id="instructions" style="display:none;">
|
|
<p>
|
|
To create a new stream, pick a unique name for it, and set your broadcast
|
|
software to stream to <code>rtmp://live.hangar.org/input-hangar/</code> with stream key <code>stream_name</code>.
|
|
</p>
|
|
<p>
|
|
You will then be able to watch the live stream at
|
|
<code>https://live.hangar.org/#<b>stream_name</b></code>.
|
|
</p>
|
|
<p>
|
|
You can also point your favourite video player directly to
|
|
<code>https://live.hangar.org/hls/<b>stream_name</b>.m3u8</code>.
|
|
Use this url also for html embedding.
|
|
</p>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer class="grid-container">
|
|
<div class="grid-x grid-padding-x">
|
|
<div class="cell small-12 flex-container flex-dir-column">
|
|
<div class="text-center flex-child-shrink">
|
|
<p>
|
|
another <a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo small icon">Hangar</a> website.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<script src="./assets/js/jquery-slim.min.js"></script>
|
|
<script src="./assets/js/video.min.js"></script>
|
|
<script>
|
|
$(function() {
|
|
if (window.location.hash) {
|
|
var name = window.location.hash.substr(1);
|
|
console.log('playing "' + name + '"');
|
|
$('#title').text('live.hangar.org - ' + name);
|
|
var v = videojs('video');
|
|
v.src({type: 'application/x-mpegURL', src: '/hls/' + name + '.m3u8'});
|
|
} else {
|
|
$('#video').hide();
|
|
$('#webchat').hide();
|
|
$('#instructions').show();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|