Тяжелые 90-е с модемным интернетом и низкими скоростями позади, сегодня многие пользователи уже не скачивают видео на компьютер, а смотрят его потоково – то есть прямо с сайта, плюсы на лицо: не захламляется компьютер, не нужно скачивать фильм целиком, чтобы понять сюжет, не нужно смотреть до конца и еще много всего. Кроме полнометражных фильмов иногда нужно разместить у себя на сайте какой-нибудь обучающий ролик или видеообращение к пользователям. Но для этого нужно или написать свой видео плеер для сайта или же загрузить видео сначала на какой-нибудь популярный видеообменник типа youtube и потом вставить код с него, правда таким образом вы затяните к себе на сайт еще кучу всего не нужного. Сегодня я расскажу как быстро и просто сделать свой собственный плеер для сайта.

Итак для начала нам потребуется 2 файла библиотек – flash.js для воспроизведения flash объектов на сайте и swfobject.js для работы с плеером. Подключаем:

<script type="text/javascript" src="flash.js"></script>
<script type="text/javascript" src="swfobject.js"></script>

Затем вставляем div в котором будем выводить наш плеер:

<div id="container"></div>

И наконец вставляем сам код плеера:

  <script type="text/javascript">
    var s1 = new SWFObject("player.swf","ply","320","260","9","#FFFFFF");
    s1.addParam("allowfullscreen","true");
    s1.addParam("allowscriptaccess","always");
    s1.addParam("wmode", "opaque");
    s1.addParam("flashvars","file=nagano-vodka.flv");
    s1.write("container");
  </script>

Теперь давайте подробней про сам код плеера:

var s1 = new SWFObject(”player.swf”,”ply”,”320″,”260″,”9″,”#FFFFFF”); – мы создаем новый объект, плеер, в качестве самого проигрывателя указываем файл “player.swf” с id равным “ply”, затем задаем ширину в 320px и высоту в 260px – обратите внимание, что мы задаем именно размеры плеера, а не видео – то есть если у нас видео например 320х240, то если мы задаем ширину в 320px – тогда видео будет в край – то есть не будет никаких черных полос по бокам, а высоту мы задаем на 260px – на 20px больше, это нужно для того, чтобы влезла панель управления роликом. Магической цифрой “9″ мы задаем версию флеш плеера, которая должна быть установлена у пользователя, чтобы все нормально работало и наконец фон мы задаем не хитрой последовательностью “#FFFFFF”.
s1.addParam(”allowfullscreen”,”true”); – этим параметром мы разрешаем fullscreen – то есть разворачивать видео на весь экран.
s1.addParam(”allowscriptaccess”,”always”); – открываем доступ скриптам
s1.addParam(”wmode”, “opaque”); – устанавливаем прозрачный режим фона
s1.addParam(”flashvars”,”file=nagano-vodka.flv”); – указываем источник, сам видео ролик.
s1.write(”container”); – выводим наш плеер вместе с роликом в наш div.

Теперь мы можем посмотреть пример видео плеера для сайта. Если вдруг что-то не получилось Вы можете скачать скрипт плеера для сайта и посмотреть что не так.