Во всех шаблонах следует вставить ваши адреса для плеера и чата. И возможно заменить код плеера совсем. Адрес аудио-потока (адрес сервера, порт, имя точки) встречается два раза: для flash-плеера и как ссылка для внешнего плеера. Обратите внимание, во втором случае присутствует расширение .m3u.

Кроме адресов, в шаблонах встречается текст. Например тема вещания, имя ведущего, описание и т.д. А ещё встречаются картинки — заготовки слайдов/фото ведущего (адрес картинки задаётся внутри <img src="/адрес"). Всё это тоже следует поменять.

Позже я планирую объединить шаблоны с генераторами, чтоб весь шаблон можно было легко и просто отредактировать прямо здесь.

Если есть пожелания — пишите, пока что они принимаются.

Возможности

Часть возможностей, имеющихся в вебинарных сервисах можно получить через чат.

Многие чаты позволяют вставлять активные ссылки. Так вы сможете показывать слушателям материал вебинара по ходу трансляции.

Некоторые чаты сразу показывают картинки, когда вы вставляете ссылку на изображение. Это тоже пригодится. Полезны также «рисунки», которые есть в чате BlaB! .

Есть возможность показывать и слайды презентации, но вручную. Я покажу, как это можно сделать.

1. Простой шаблон + HTML5 audio

Чуть обновлённая версия шаблона из книги. В дополнение к flash-плееру можно открыть HTML5 audio.

Код шаблона

1

<html><head><title>Комната вещания!</title>
    <meta charset="utf-8">
</head><body>
<h1>Тема вещания</h1>

<!-- комната -->
<div style="text-align:center">
    <!-- код плеера -->
    <embed wmode="transparent" quality="high"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
        src="http://www.ericzhang.com/music/?url=http://адрес-сервера:порт/имя&amp;amp;autostart=true"
        width="150" height="50">
    </embed><br/>
    <script>function openMyPlayer() {var s = document.getElementById('hiddenPlayer').style; s.display=s.display!='block'?'block':'none';}</script>
    <a href="#" onclick="openMyPlayer()">Альтернативный плеер (HTML5)</a><br/>
    <div id="hiddenPlayer" style="display:none">
      <audio controls preload="none">
        <source src="http://адрес-сервера:порт/имя.m3u" />
      </audio>
    </div>
    <br/>
    Ссылка для воспроизведения в плеере:
    <a href="http://адрес-сервера:порт/имя.m3u">test.m3u</a><br/>
    Рекомендуем использовать <b>Winamp</b> или <b>VLC</b>.
</div>

<!-- чат -->
<iframe src="полный адрес страницы чата" frameborder=0 width="100%" height="600">Чат</iframe>

<!-- конец комнаты -->
</body></html>

Info

Последующие шаблоны построены на базе Bootstrap.

2. Информация и плеер слева

Шаблон 2

В этом шаблоне блок с информацией и плеер вынесены в левый столбец, а чат занимает оставшуюся часть экрана. Замените текст в заголовке, описание в левом столбце и фотографию ведущего там же.

Код шаблона

2

<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">
    <title>Комната вещания</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style type="text/css">
/* Sticky footer styles ------------------------------------------ */
html,body {height: 100%;}
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px;
  padding: 0 0 60px;
}
#footer {height: 60px; background-color: #f5f5f5;}
/* Custom page CSS----------------------------------------------- */
#wrap > .container {  padding: 60px 15px 0;}
.container .credit {  margin: 20px 0;}
#footer > .container {  padding-left: 15px;  padding-right: 15px;}
    </style>
</head><body>
<div id="wrap">
  <!-- Верх -->
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Тема: Как сделать вещание</a>
      </div>
      <div class="collapse navbar-collapse">
      </div>
    </div>
  </div>
  <!-- Страница -->
  <div class="container">
    <div class="row">
      <!-- Левый блок -->
      <div class="col-sm-3 well">
        <p>9 мая 2014 г.</p>
        <p class="lead">Тема: Как сделать вещание</p>
        <p>Ведущий: Иванов Иван</p>
        <p><img class="img-responsive img-thumbnail" src="http://lorempixel.com/400/400" /></p>
        <hr/>
        <p class="text-center">
        <!-- код плеера -->
        <embed wmode="transparent" quality="high"
            src="http://www.ericzhang.com/music/?url=http://адрес-сервера:порт/имя&amp;amp;autostart=true"
            pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"
            width="150" height="50">
        </embed>
<br>
        Ссылка для обычного плеера:
        <a href="http://адрес-сервера:порт/имя.m3u">test.m3u</a><br/>
        Рекомендуем использовать <b>Winamp</b> или <b>VLC</b>.
        <!-- конец плеера -->
        </p>
      </div>
      <!-- Правый блок -->
      <div class="col-sm-9">
        <iframe src="полный адрес страницы чата" frameborder=0 width="100%" height="600px">Чат</iframe>
      </div>
    </div>
  </div>
</div>
<div id="footer"><div class="container">
  <p class="text-muted credit">&copy; 2014 <a href="http://вещай.рф" target="_blank">http://вещай.рф</a>.</p>
</div></div>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body></html>

3. 50/50

Шаблон 3

Комната разделена на две половины. Справа — плеер и чат. А слева — подробная информация о вещании и о ведущем. Сюда же можно вставить слайды и другие материалы для вещания.

Код шаблона

3

<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">
    <title>Комната вещания</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style type="text/css">
/* Sticky footer styles ------------------------------------------ */
html,body {height: 100%;}
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px;
  padding: 0 0 60px;
}
#footer {height: 60px; background-color: #f5f5f5;}
/* Custom page CSS----------------------------------------------- */
#wrap > .container {  padding: 60px 15px 0;}
.container .credit {  margin: 20px 0;}
#footer > .container {  padding-left: 15px;  padding-right: 15px;}
    </style>
</head><body>
<div id="wrap">
  <!-- Верх -->
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Тема: Как сделать вещание</a>
      </div>
      <div class="collapse navbar-collapse">
      </div>
    </div>
  </div>
  <!-- Страница -->
  <div class="container">
    <div class="row">
      <!-- Левый блок -->
      <div class="col-sm-6 text-center">
        <p>9 мая 2014 г.</p>
        <p class="lead">Тема: Как сделать вещание</p>
        <p>Ведущий: Иванов Иван</p>
        <p>Слайд</p>
        <p><img class="img-responsive img-rounded" src="http://lorempixel.com/700/500" /></p>
      </div>
      <!-- Правый блок -->
      <div class="col-sm-6">
        <div style="float:left; padding-right:8px">
        <!-- код плеера -->
        <embed wmode="transparent" quality="high"
            src="http://www.ericzhang.com/music/?url=http://адрес-сервера:порт/имя&amp;amp;autostart=true"
            pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"
            width="150" height="50">
        </embed>
        </div>
        Ссылка для обычного плеера:
        <a href="http://адрес-сервера:порт/имя.m3u">test.m3u</a>
        Рекомендуем использовать <b>Winamp</b> или <b>VLC</b>.
        <!-- конец плеера -->
        <iframe src="полный адрес страницы чата" frameborder=0 width="100%" height="550px">Чат</iframe>
      </div>
    </div>
  </div>
</div>

<div id="footer"><div class="container">
  <p class="text-muted credit">&copy; 2014 <a href="http://вещай.рф" target="_blank">http://вещай.рф</a>.</p>
</div></div>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body></html>

В левую половину вы можете вставить презентацию с сервиса slideshare или другого подобного. Когда нужно показать очередной её экран, просто скажите слушателям, что пора перейти на следующую страницу. Или на определённую страницу.

4. Комната с вкладками

Шаблон 4 Шаблон 4

Сложный шаблон с несколькими вкладками. Информация о вещании расположена отдельно, чат — отдельно. Также есть вкладки с инструкцией и правилами. Все тексты, включая имена вкладок, вы можете поменять по своему усмотрению.

Код шаблона

4

<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">
    <title>Комната вещания</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style type="text/css">
/* Sticky footer styles ------------------------------------------ */
html,body {height: 100%;}
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px;
  padding: 0 0 60px;
}
#footer {height: 60px; background-color: #f5f5f5;}
/* Custom page CSS----------------------------------------------- */
#wrap > .container {  padding: 60px 15px 0;}
.container .credit {  margin: 20px 0;}
#footer > .container {  padding-left: 15px;  padding-right: 15px;}
    </style>
</head><body>
<div id="wrap">
  <!-- Верх -->
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Тема: Как сделать вещание</a>
      </div>
      <div class="collapse navbar-collapse">
      </div>
    </div>
  </div>
  <!-- Страница -->

  <div class="container">
        <div class="well text-center">

        <!-- код плеера -->
        <embed wmode="transparent" quality="high"
            src="http://www.ericzhang.com/music/?url=http://адрес-сервера:порт/имя&amp;amp;autostart=true"
            pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"
            width="150" height="50">
        </embed>
        <br/>
        Ссылка для обычного плеера:
        <a href="http:///адрес-сервера:порт/имя.m3u">test.m3u</a>
        Рекомендуем использовать <b>Winamp</b> или <b>VLC</b>.
        <!-- конец плеера --> 
       </div>

  <div class="container">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#home">Вещание</a></li>
        <li><a href="#howto">Инструкция</a></li>
        <li><a href="#chat">Чат</a></li>
        <li><a href="#rules">Правила</a></li>
    </ul>

    <div class="tab-content">

<!-- первая вкладка -->
      <div class="tab-pane active" id="home">
<div class="alert alert-warning fade in">
  <button type="button" class="close" data-dismiss="alert">×</button>
  Если вы здесь впервые, ознакомьтесь с инструкцией, как участвовать в вебинаре. И обязательно прочитайте правила, действующие в нашей комнате вещания.
</div>
          <div class="pull-left well text-center">
            <p>Ведущий:</p>
            <p><img class="img-responsive img-circle img-thumbnail" src="http://lorempixel.com/80/80" width="80" /></p>
            <p>Алексей Алексеев</p>
          </div>
<div class="text-center">
  <p>9 мая 2014 г.</p>
  <p class="lead">Тема: Как сделать вещание</p>
  <p>Сегодня в программе вещания:...</p>
  <p class="text-center"><img class="img-responsive img-rounded" src="http://lorempixel.com/1200/300" /></p>
</div>
      </div>
<!-- конец -->

<!-- вторая вкладка -->
        <div class="tab-pane" id="howto">
<p>Описание с картинками как зайти в чат, как включить плеер итд...</p>
        </div>
<!-- конец -->

<!-- третья вкладка -->
        <div class="tab-pane" id="chat">
<iframe src="полный адрес страницы чата" frameborder=0 width="100%" height="550px">Чат</iframe>
        </div>
<!-- конец -->

<!-- четвёртая вкладка -->
        <div class="tab-pane" id="rules">
<p>У нас действуют следующие правила:</p>
<ul>
<li>Уважительно относимся к ведущему и другим участникам</li>
<li>Без разрешения ссылки на сторонние сайты в чат не кидаем</li>
<li>...</li>
<li>итд</li>
</ul>
        </div>
<!-- конец -->

    </div>
  </div>

  </div>
</div>

<div id="footer"><div class="container">
  <p class="text-muted credit">&copy; 2014 <a href="http://вещай.рф" target="_blank">http://вещай.рф</a>.</p>
</div></div>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
  $('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
  });
});
</script>
</body></html>

С помощью вкладок вы можете показывать слайды. Если у вас их не много. Просто разместите в содержимом каждой вкладки картинку или текст. Дайте вкладкам имена. А во время вещания сможете говорить слушателям, какую вкладку следует открыть в данный момент.

Собственный шаблон

Если у вас есть какой-либо опыт в создании веб-страниц, вы можете создать любой шаблон комнаты своими руками. Сделайте его в любом редакторе, оставив место для плеера и чата. Для простоты, можете вставить на место предполагаемого плеера и чата картинки с нужными размерами. И запомните их имена или задайте заголовок.

Потом откройте код страницы, и найдите, где находятся картинки-заготовки. Код может выглядеть примерно так:

… много кода …
    <img src="player.jpg" width="…" height="…" title="это плеер" />
… много кода …
    <img src="chat.jpg" width="…" height="…" title="это чат" />
… много кода …

И замените тэги img соответственно на код плеера и iframe для чата:

… много кода …
    <!--Код плеера-->
    …
… много кода …
    <iframe src="адрес чата" width="…" height="…"></iframe>
… много кода …

Делайте это внимательно, чтобы не затронуть окружающий код.