streamfest/player.template

118 lines
4.0 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<title>OpenFest Live Streaming</title>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="video-js.min.css" rel="stylesheet" type="text/css">
<link href="videojs-sublime-skin.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;
background-color: #FFFFFF;
}
.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 {
width: 100%;
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">
<video class="video-js vjs-sublime-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="http://grendel.ludost.net/openfest/dash/{{stream}}.mpd" type="application/dash+xml" />
<source src="rtmp://grendel.ludost.net/openfest/{{stream}}" type='rtmp/flv' />
<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>
<!-- 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>
-->