Зарегистрироваться | Забыли пароль


Для начинающих

bottom

Уроки

bottom

Полезное

bottom

Файлы

bottom

Ссылки

bottom

Главная страница » Уроки по Flash

Flash видеоплеер SS4UPlayer для сайта

В этом уроке мы будем вставлять на сайт flash видеоплеер с плейлистом. Если у Вас есть несколько видео роликов, которые нужно показать пользователю, то вставлять для каждого свой плеер получится не очень красиво и довольно неудобно. Поэтому в этом случае удобнее всего использовать плеер с плейлистом, в котором будут прописаны все наши видеоклипы и пользователь легко сможет посмотреть, то, что его интересует. Сразу скажу недостаток этого плеера в том, что если размеры плеера слишком маленькие и видеороликов много, то они просто не вмещаются, а полоса прокрутки почему-то не появляется. Самое оптимальное использовать до 6 видеороликов.

Пример

Теперь перейдем к практике. Для начала скачиваем все исходные файлы и копируем их на наш сайт (видео-файлы из исходников удалил, чтобы место не занимали). Теперь подключим необходимый скрипт:

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

Теперь вставляем код самого плеера. Вставляться он будет при помощи javascript:

<script type="text/javascript">
var flashvars = {};
flashvars.playList = "resources/playlist.xml";
var params = {};
params.scale = "noscale";
params.allowfullscreen = "true";
params.salign = "tl";
params.bgcolor = "000000";
var attributes = {};
var stageW = 500; // ширина плеера
var stageH = 450; // высота плеера
swfobject.embedSWF("resources/SS4UPlayer.swf", "progressive", stageW, stageH, "9.0.0", false, flashvars, params, attributes);
</script>
<div
id="SS4UPlayer" class="clearfix">
<div
id="progressive" class="clearfix grid_8 center">
<a
href="http://www.adobe.com/go/getflashplayer">
Установите флеш плеер
</a>
</div>
</div>

Теперь немного расскажу об основных параметрах, которые нужно изменять.
flashvars.playList – здесь прописывается путь до нашего плейлиста
params.bgcolor – фоновый цвет плеера
var stageW – ширина плеера
var stageH – высота плеера
swfobject.embedSWF – здесь указывается путь до самого плеера

Далее идет блок, который будет отображаться, если у пользователя не включен javascript или не установлен флеш плеер. Со вставкой плеера разобрались, теперь нужно отредактировать плейлист playlist.xml. Открыв его текстовым редактором, мы увидим примерно следующее:

В самом начале прописаны настройки, которые можно не изменять, кроме imagePath (указывает на изображение, которое показывается до воспроизведения) и находятся между <serverdata></serverdata>. InfoTitle и InfoDescription в этих параметрах пишется заголовок и краткое описание, отображающиеся при нажатии на кнопку информации. Правда русския язык здесь почему-то не поддерживается. Далее идут сам плейлист, который указывает на видео и картинки.

<filesList LQvideo="../videos/clips/Toy Story 2 - short1.flv" previewTitle="История игрушек клип 1" currentFile="earth1" previewImage="images/earth/1.jpeg"></filesList>

Где
LQvideo – путь до видео
previewTitle – название, которое отображается при включении плейлиста
previewImage – путь до мини-изображения в плейлисте

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

<object
type="application/x-shockwave-flash"
data="resources/SS4UPlayer.swf"
width="800"
height="480"
id="basic">
<param
name="movie" value="resources/SS4UPlayer.swf">
<param
name="quality" value="high">
<param
name="scale" value="noScale">
<param
name="allowfullscreen" value="true">
<param
name="salign" value="tl">
<param
name="allowScriptAccess" value="always">
<param
name="allownetworking" value="all">
<param
name="flashvars" value="server=null&imagePath=images/ss/toy_story.jpg&videoPath=../videos/clips/toy story 1.flv">
</object>

Где

data и <param name="movie" value="resources/SS4UPlayer.swf"> - путь до плеера
width – ширина плеера
height – высота плеера
В <param name="flashvars" value="server=null&imagePath=images/earth/toy_story.jpg&videoPath=../videos/clips/toy story 1.flv"> указывается путь до картинки-заставки и до видео-файла.

Ну вот и все пользуйтесь.

Автор: Евгений Бочкарев · Урок добавлен: 11 Августа 2010 в 16:03 · Просмотров: 393

Рекомендую
  • Currently 0.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 0.0/5 (всего 0 голоса)

Понравился сайт? Внесите свой вклад в его развитие?
R314489888859
41001346159934




   Комментарии к уроку

12
Ваш комментарий может быть первым...
 
34
12

   Добавить комментарий


Ваше имя:


Текст комментария:

Получать уведомления по Email могут только зарегистрированные пользователи. Регистрация
Введите цифры с картинки


 
34