В данном уроке
будет рассмотрена работа с плеером "JW Player". Сайт, с которым будем
работь -
"longtailvideo"
Получение
плеера для сайта, и установка.
На сайте
"longtailvideo"
находим ссылку на FLV
плеер.
На странице скачивания плеера вводим контактный
E-Mail. Ставим флажок, соглашаясь
с лицензией и нажимаем кнопку "Download"
Сохраняем плеер в любую папку:
Переходим в папку с сохраненным архивом и
распаковываем его.
На веб-узле создаем любую папку, например "Player_flv",
и помещаем в нее распакованные файлы.
Для работы нам понадобятся файлы:
-
player-viral.swf
-
swfobject.js
-
yt.swf
Все остальные файлы можно удалить, т.к. они
демонстрационные и не нужны будут при работе плеера на сайте.
Осталось самая малость - найти видео,
вставить код плеера на сайт и просматривать видео на своём сайте.
Сборка плеера на свой сайт.
Переходим на сборку -jw-player-setup-wizard
В низу станицы, на 4-ом шаге видим код:
Выделяем весь код и копируем его в блокнот.
Изменяем параметры кода.
Ниже представлен сам код, Синим цветом обозначены параметры, которые необходимо
изменить, красным цветом показаны комментарии.
<script type='text/javascript' src='http://Ваш_Сайт/Папка_с_плеером/swfobject.js'></script>
<div id='mediaspace'>Этот
текст можно заменить на свой, он будет отображаться, если у
пользователя не работает плеер.</div>
<script type='text/javascript'>
var s1 = new SWFObject('http://Ваш_Сайт/Папка_с_плеером/player-viral.swf','ply','470','320','9','#ffffff');
Это старока с параметрами ширины и высоты
плеера
s1.addParam('allowfullscreen','true');
Строка с параметром полноэкранного режима.
s1.addParam('allowscriptaccess','always');
s1.addParam('wmode','opaque');
Необязательная строка.
s1.addParam('flashvars','file=http://content.longtailvideo.com/videos/flvplayer.flv');
Путь к FlV файлу.
s1.write('mediaspace');
Параметрт должен соответствовать параметру
"<div id="
</script> |
Примечание!
При нескольких видео\аудио
файлов на одной странице, параметры "<div id="
и "s1.write" должны быть разные для
каждого плеера.
Совет:
Для использования разных параметров можно вводить
адрес на FLV файл. Он все равно у всех файлов разный
:-). Другой способ- это изменять цифрами,
например - первый файл:
-
<div id='mediaspace1'>
-
s1.write('mediaspace1')
Второй файл:
-
<div id='mediaspace2'>
-
s1.write('mediaspace2')
Третий файл:
-
<div id='mediaspace3'>
-
s1.write('mediaspace3')
И т.д.
Вставление плеера на Веб-узел:
Переходим в Веб-узел\станица
Video.htm
Пишем название нашего видео файла.
И ниже переходим к добавлению
html
кода:
Совет! Для центровки плеера необходимо
сделать следующее:
Создать таблицу 1x1,
присвоить ей ширину, равную ширине плеера:
После этого код вставлять в таблицу.
Далее вставляем код плеера со всеми параметрами:
В данном коде используется видео с
видеообменника "Bkontakte.ru".
О
том, как брать видео с этого обменника, написано на этой странице.
Так же в коде предложено пользователю при
нерабочем плеере скачать Flash плеер, и\или использовать
браузер Opera.
Внимание! При просмотре страницы во
FronPage вы получите такую картинку:
Для того, чтобы посмотреть результат, необходимо
разместить страницы на сервере и посмотреть в разных браузерах. (желательно!)
Конечный результат:
Вставляем следующее видео.
Выделяем всю таблицу и копируем её:
Пишем название следующего видео и вставляем
таблицу из буфера.
На нижней панели нажимаем
"С разделением"
В визуальной части выбираем таблицу - в виде
кода она тоже выделиться:
Нажмите, чтобы увеличить.
Обратите внимание, что параметр "<div id="
автоматически принял значение "mediaspace2". В коде Вам необходимо
изменить параметр "s1.write" на тот же, что и автоматически изменился
"<div id=" (Они должны быть одинаковыми!!!). А так же Вам необходимо
изменить путь к видео файлу.
Посмотреть результат вставления нескольких видео
на страницу можно
здесь.
