streamfest/player.template


<!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>

-->