SS4UPlayer - флеш-видеоплеер для сайта

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Небольшое вступление

Всем, наверняка, известно, что для просмотра флеш-контента на сайтах в Интернете необходим установленный флеш-плеер. Наибольшую популярность приобрел в настоящее время Adobe Flash Player, который загружается и периодически обновляется с официального сайта и т.д. Но, речь сейчас не о нем.

Нас интересует вариант флеш-плеера именно для своего сайта и для показа именно своего личного флеш-материала.

В этом уроке мы рассмотрим два варианта SS4UPlayer-а, который можно легко вмонтировать в дизайн любого сайта. Один вариант - базовый, то есть, плеер проигрывает одиночный клип и на этом его возможности исчерпываются. Другой же вариант - это flash-видеоплеер с плейлистом. Всем прекрасно понятны неоспоримые преимущества такого варианта, когда в одном плеере можно смотреть несколько видеоклипов. Клипы будут последовательно проигрываться после запуска флеш-плеера пользователем, а также имеется возможность выборочного просмотра. Итак, приступим...

SS4UPlayer с плейлистом

SS4UPlayer с плейлистом

Примечание: в скачанном архиве Вы обнаружите папки и файлы, имеющие отношение к обоим вариантам.

Установка на сайт

1. Скачайте учебный материал, распакуйте в отдельную папку на компьютере. В папке SS4UPlayer должны находиться:

• Папка images с вложенной папкой earth, где находятся изображения;
• Папка js со скриптом;
• Папка resources с двумя вложенными файлами: SS4UPlayer.swf и playlist.xml;
• Папка videos с вложенной папкой clips, где должны располагаться видео файлы;
• Файл basic.html;
• Файл playlist.html.

2. В папку images/earth подберите изображения, которые будут выполнять роль заставки, а также картинки-превью для плей-листа;

3. Папка videos/clips пуста, поэтому её нужно заполнить своими видеофайлами в формате .flv. Оптимальное количество файлов - 5-6 штук (в демо - 6). Можно, конечно, и больше, если Вы сумеете вместить в рамки размеров плеера столько картинок-превьюшек. Здесь бы не помешала полоса прокрутки, но, к сожалению, она не появляется.

4. Переходим к файлам.

В текстовом редакторе открываем файл playlist.html. В разделе head подключаем скрипт:

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

В раздел body при помощи javascript вставляем код плеера из файла playlist.html:

		
<!--Player Setup-->
				
<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 = 680; // ширина плеера 					
var stageH = 440;  // высота плеера 		
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="//www.adobe.com/go/getflashplayer">
<img src="//www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Установите флеш плеер">
</a>
</div>
</div>

          Путь до плей-листа.

          Разрешен полноэкранный режим (true), запрещен (false).

          Фоновый цвет плеера.

          Габаритные размеры плеера.

          Путь к файлу самого плеера SS4UPlayer.swf.

Далее следует блок, который будет отображаться, если у пользователя не включен javascript или не установлен флеш плеер.

5. Переходим к редактированию файла плейлиста playlist.xml. Настройки в самом начале можно не изменять, кроме imagePath (указывает на изображение - заставку):

<serverdata server="null" imagePath="images/earth/001.jpg" 

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

Между тегами <PlayList> расположен плей-лист, в котором прописываются пути к картинкам и видео:

<filesList LQvideo="../videos/clips/1.flv" previewTitle="Название клипа" currentFile="earth1" previewImage="images/earth/1.jpg"></filesList>

          Путь до файла видео.

          Анонс очередного видеоклипа, который появляется при включении плей-листа.

          Путь до картинки-превью в плей-листе.

После выполнения всех пунктов короткой инструкции, откройте в браузере файл playlist.html и увидите плоды трудов своих праведных. Плеер будет работать успешно, как на компьютере, так и на сервере сайта.

Вариант с плей-листом разобрали, переходим к базовому варианту.

SS4UPlayer. Базовый вариант

Базовый вариант

1. Как Вы уже поняли, базовый вариант включает те же вспомогательные файлы, что и вариант с плей-листом. Только для запуска базового варианта нужно открыть файл basic.html. Код плеера выглядит так:

<!--Player Setup-->

<object
type="application/x-shockwave-flash"
data="resources/SS4UPlayer.swf" 
width="680"
height="420"
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/earth/003.jpg&videoPath=../videos/clips/1.flv">
</object>

          Путь до плеера.

          Ширина плеера.

          Высота плеера.

          Путь до картинки-заставки.

          Путь до видео-файла.

Как убрать логотип плеера?

Угадывая пожелания части пользовательской аудитории, не могу опустить этот вопрос. Я пытался найти решение, но пока остановился на промежуточном этапе. По всей видимости логотип заложен в коде самого плеера, т.е., в файле SS4UPlayer.swf, который является флеш-файлом (набор скомпилированных специальной программой в один файл, элементов графики, анимации, звуков и скриптовых сценариев). Я нашел возможность как его открыть. Скачал и установил программку SWiX 1.4.0.2318 RuPack Portable, открыл файл, но код там оказался слишком объёмным. Правда, он имеет подразделы для удобства, но это мне не помогло.

Если кто-то пожелает всё-таки решить этот вопрос до конца, предлагаю скачать и установить программу и с её помощью добиться устранения логотипа. Если получится, напишите, пожалуйста, в комментариях.

Это всё о замечательном флеш плеере SS4UPlayer. Спасибо за внимание. Посещайте мой сайт. Пока! Удачи! L.M.