Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по 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 Просмотров: 15650

Условия копирования материалов сайта

Все комментарии
#-5 Сергей 18-10-2011 в 15:06
Не РАБОТАЕТ вылезает путь исходника, несмотря что я его заменил на свой путь
#-4 Елена 21-02-2013 в 08:33
Спасибо Вам преогромное!!! То, что надо.
Небольшой вопросик только: лого разработчика не убрать? (я не против авторских прав, но уж больной он огромный)
#-3 Евгений 21-02-2013 в 11:25
Думаю в этом плеере нет, но есть много других плееров без рекламы.
#-2 cupoma58 30-11-2014 в 15:10
mp3-файлы подключить можно ?
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


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

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки