Video
/
streamfest
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
streamfest/player.template

115 lines
3.8 KiB
Plaintext
Raw Normal View History

Initial version
2014-10-29 13:58:47 +02:00
<!DOCTYPE html>
<html>
<head>
<title>OpenFest Live Streaming</title>
Add a charset attribute
2014-10-29 15:49:51 +02:00
<meta charset="utf8">
Specity the viewport
2014-10-29 15:53:11 +02:00
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Initial version
2014-10-29 13:58:47 +02:00
<link href="video-js.min.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
<style type="text/css">
body, html {
height: 100%;
padding: 0;
margin: 0;
Automate player creation
2014-10-29 15:11:21 +02:00
background-color: #FFFFFF;
Initial version
2014-10-29 13:58:47 +02:00
}
.wrapper {
position: relative;
width: 100%;
top: 50%;
transform: translateY(-50%);
ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
margin: 0 auto;
}
.four-by-three.aspect-ratio { padding-bottom: 75% }
.sixteen-by-nine.aspect-ratio { padding-bottom: 56.25% }
.content {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
padding: 0;
}
/* Positioning for the main box */
.main-box {
Touch the CSS to fit in the layout of the site
2014-10-29 15:13:05 +02:00
width: 100%;
Initial version
2014-10-29 13:58:47 +02:00
max-width: 700px;
}
.video-js { height: 100% }
.vjs-fullscreen { padding-top: 0px; }
</style>
</head>
<body>
<div class="wrapper main-box">
<div class="sixteen-by-nine aspect-ratio"></div>
<div class="content">
Automate player creation
2014-10-29 15:11:21 +02:00
<video class="video-js vjs-default-skin" controls preload="none" width="auto" height="auto" poster="openfest-poster.png" data-setup="{}">
<source src="http://grendel.ludost.net/openfest/hls/{{stream}}.m3u8" type="application/x-mpegURL" />
<source src="rtmp://grendel.ludost.net/openfest/{{stream}}" type='rtmp/flv' />
Initial version
2014-10-29 13:58:47 +02:00
<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>
</body>
</html>
Add embed code and tweak the Makefile
2014-10-29 15:47:23 +02:00
<!-- Embed with:
<iframe src="http://grendel.ludost.net/openfest/{{stream}}.html" style="border: none; height: 364px; width: 100%; overflow: none;" allowfullscreen>
<p>Браузърът Ви не поддържа iframes</p>
</iframe>
<section>
<p>Дискусия в IRC във <a href="irc://irc.freenode.net/OpenFest">#OpenFest на irc.freenode.net</a> и в Twitter с хештаг <a href="https://twitter.com/hashtag/openfest?f=realtime&src=hash">#OpenFest</a>
</section>
<section>
<p>Гледане в друг медия плейър:</p>
<p>
<a href="rtmp://grendel.ludost.net/openfest/{{stream}}">rtmp://grendel.ludost.net/openfest/{{stream}}</a> (RTMP поток, поддържан от VLC и по-добрите медия плейъри)
</p>
<p>
<a href="http://grendel.ludost.net/test/hls/{{stream}}.m3u8">http://grendel.ludost.net/openfest/hls/{{stream}}.m3u8</a> (HLS поток, поддържан от Android, iOS, както и VLC)
</p>
</section>
-->
<!-- English Version
<iframe src="http://grendel.ludost.net/openfest/{{stream}}.html" style="border: none; height: 364px; width: 100%; overflow: none;" allowfullscreen>
<p>Your browser does not support iframes</p>
</iframe>
<section>
<p>Discussion in <a href="irc://irc.freenode.net/OpenFest">#OpenFest on irc.freenode.net</a> and in Twitter under hashtag <a href="https://twitter.com/hashtag/openfest?f=realtime&src=hash">#OpenFest</a>
</section>
<section>
<p>Watch in a media player of your choice:</p>
<p>
<a href="rtmp://grendel.ludost.net/openfest/{{stream}}">rtmp://grendel.ludost.net/openfest/{{stream}}</a> (RTMP stream, supported by VLC, MPlayer, etc.)
</p>
<p>
<a href="http://grendel.ludost.net/test/hls/{{stream}}.m3u8">http://grendel.ludost.net/openfest/hls/{{stream}}.m3u8</a> (HLS stream, supported by Android, iOS, VLC, MPlayer...)
</p>
</section>
-->