hangar-tech/grafica-hangar-org
hangar-tech
/
grafica-hangar-org
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modified pages for live streaming, now you can add text between title and video

This commit is contained in:
jorge 2021-03-05 13:40:56 +01:00
parent bd7e745a85
commit 312ac4b808
2 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index-live-chat.html
View File

@ -55,7 +55,7 @@
<div class="primary flex-child-shrink"> <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> <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> <h1>live streaming</h1>
</div> </div>
</div> </div>
<!-- <!--
<div class="cell small-12"> <div class="cell small-12">
@ -118,8 +118,8 @@
var v = videojs('video'); var v = videojs('video');
v.src({type: 'application/x-mpegURL', src: '/hls/' + name + '.m3u8'}); v.src({type: 'application/x-mpegURL', src: '/hls/' + name + '.m3u8'});
} else { } else {
$('#v-ideo').hide(); $('#video').hide();
$('#w-ebchat').hide(); $('#webchat').hide();
$('#instructions').show(); $('#instructions').show();
} }
}); });

61
index-live.html
View File

@ -2,9 +2,9 @@
<html class="no-js" lang="en" dir="ltr"> <html class="no-js" lang="en" dir="ltr">
<head> <head>
<!-- <!--
version 0.1 version: 0.2
date: 2020 11 27 date: 2020 12 16
author jorge@hangar.org author: jorge@hangar.org
--> -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="x-ua-compatible" content="ie=edge">
@ -12,7 +12,7 @@
<title>live - hangar.org</title> <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/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="https://grafica.hangar.org/assets/css/foundation.min.css">
<link rel="stylesheet" href="https://grafica.hangar.org/assets/css/video-js.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"> <link rel="stylesheet" href="https://grafica.hangar.org/assets/css/hangar-static-app.css">
<!-- header icons anf favicons --> <!-- 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="57x57" href="https://grafica.hangar.org/assets/favicons/apple-icon-57x57.png">
@ -37,36 +37,45 @@
</style> </style>
</head> </head>
<body class="live-streaming"> <body class="live-streaming">
<!-- change color switcher -->
<input type="checkbox" id=changecolor class="colorswitch"> <input type="checkbox" id=changecolor class="colorswitch">
<label for=changecolor class="colorswitch"> <label for=changecolor class="colorswitch">
<span class="slider"></span> <span class="slider"></span>
</label> </label>
<!-- change view switcher-->
<!--
<input type="checkbox" id=changeview class="viewswitch"> <input type="checkbox" id=changeview class="viewswitch">
<label for=changeview class="viewswitch"> <label for=changeview class="viewswitch">
<span class="slider"></span> <span class="slider"></span>
</label> </label>
<div id="wrapper" class="colorswitch-invert"> -->
<div id="wrapper" class="colorswitch-invert viewswitch-change">
<a name="top"></a> <a name="top"></a>
<div class="grid-container"> <header class="grid-container">
<div class="grid-x grid-padding-x"> <div class="grid-x grid-padding-x">
<div class="cell small-12 flex-container flex-dir-column"> <div class="cell small-12 flex-container flex-dir-column">
<header class="primary flex-child-shrink"> <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> <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> <h1>live streaming</h1>
</header> </div>
</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> </div>
</div> </header>
<div class="grid-container viewswitch-container"> <main class="grid-container viewswitch-container">
<div class="grid-x grid-padding-x"> <div class="grid-x grid-padding-x">
<div class="cell small-12 flex-container flex-dir-column"> <div class="cell small-12 flex-container flex-dir-column">
<content class="primary flex-child-auto"> <div class="primary flex-child-auto">
<video id="video" class="video-js" controls preload="auto" data-setup="{}"></video> <content class="video-webchat">
<div id="webchat" class="embedchat"> <video id="video" class="video-js" controls preload="auto" data-setup="{}"></video>
<iframe id="chatframe" src="https://live.hangar.org/chat/#live-hangar"></iframe> </content>
</div>
<div id="instructions" style="display:none;"> <aside id="instructions" style="display:none;">
<p> <p>
To create a new stream, pick a unique name for it, and set your broadcast 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>. software to stream to <code>rtmp://live.hangar.org/input-hangar/</code> with stream key <code>stream_name</code>.
@ -80,29 +89,25 @@
<code>https://live.hangar.org/hls/<b>stream_name</b>.m3u8</code>. <code>https://live.hangar.org/hls/<b>stream_name</b>.m3u8</code>.
Use this url also for html embedding. Use this url also for html embedding.
</p> </p>
</div>
<aside class="">
<p>
</p>
</aside> </aside>
</content> </div>
</div> </div>
</div> </div>
</div> </main>
<div class="grid-container"> <footer class="grid-container">
<div class="grid-x grid-padding-x"> <div class="grid-x grid-padding-x">
<div class="cell small-12 flex-container flex-dir-column"> <div class="cell small-12 flex-container flex-dir-column">
<footer class="text-center flex-child-shrink"> <div class="text-center flex-child-shrink">
<p> <p>
another <a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo small icon">Hangar</a> website. another <a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo small icon">Hangar</a> website.
</p> </p>
</footer> </div>
</div> </div>
</div> </div>
</div> </footer>
</div> </div>
<script src="https://grafica.hangar.org/assets/js/jquery-slim.min.js"></script> <script src="./assets/js/jquery-slim.min.js"></script>
<script src="https://grafica.hangar.org/assets/js/video.min.js"></script> <script src="./assets/js/video.min.js"></script>
<script> <script>
$(function() { $(function() {
if (window.location.hash) { if (window.location.hash) {