Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Создание видео плеера с плейлистом


Создание видео плеера с плейлистом
Мы сделаем flash плеер для видео со списком воспроизведения при помощи среды Adobe Flash и языка actionscript 2. Первый кадр, в котором будет грузиться сама флешка и xml список воспроизведения, оставим пустым, работать же будем во втором кадре. Сам список (плейлист) можно скопировать (или почитать как его сделать) в статье о mp3 плеере. Для «копирования» плейлиста нужно скопировать мувиклипы pl, scroll и item. Из урока с видео плеером необходимо скопировать компонент для проигрывания видео (myVideo), клип-индикатор воспроизведения и загрузки (position) и клип-регулятор громкости (vol). Ещё на сцене необходимо разместить кнопку с instance name p_btn (кнопка смены паузы/воспроизведения), над ней разместить клип-иконку паузы (pause_btn) и клип-иконку воспроизведения (play_btn).
Пример структуры xml файла, который описывает плейлист для нашего flash видео плеера:
<data>
<item url="1.flv" label="Первое видео" time ="4:02" />
<item url="2.flv" label="Второе видео" time ="5:11" />
</data><!--code2--><!--ecode2-->
Атрибут url – относительный либо абсолютный путь к .flv видео файлу. Рекомендую использовать относительные адреса, потому что с точки зрения flash плеера, http://flash-world.ru и http://www.flash-world.ru – разные домены, и если вы пропишете адрес без www, то, скорее всего, пользователь, который зашёл на www.flash-world.ru не сможет посмотреть видео, так как будут проблемы с политикой безопасности flash плеера.
В атрибуте label хранится название видео, в атрибуте time – продолжительность видео, которое отображется в плейлисте рядом с названием.
Итак, создайте файл playlist.xml, заполните его нужным образом и сохраните его в кодировке UTF-8 в ту же папку, располагается или будет располагаться флешка – видео проигрыватель. Для загрузки xml плейлиста в наш flash видеопроигрыватель в первый кадр флешки вставьте код
<!--code1-->
<!--ecode1-->Stage.scaleMode = 'noScale';
// для того, чтобы флешка могла работать с кириллическими символами
System.useCodepage = false;
// останавливаем флешку на первом кадре,
// и ждём пока загрузится xml
// после загрузки переводим нашу флешку на второй кадр,
// с нашим видео плеером
stop();
playlist = new XML();
playlist.ignoreWhite = true;
playlist.onload = function() {
    _root.gotoAndStop(2);
}

playlist.load("playlist.xml");<!--code2-->
<!--ecode2-->
Далее переходим на второй кадр, вставляем код:
<!--code1-->
<!--ecode1-->// инициализация
yy = 5; // размещать элементы плейлиста будем от 5
dif = 3; // расстояние по высоте между элементами в списке
url = []; // массив для хранения ссылок на видео-клипы
// перебираем все элементы xml файла плей-листа нашего mp3 плеера
for (i=0; i<playlist.firstChild.childNodes.length; i++) {
    mc = _root.pl.container.attachMovie('item', 'item'+i, i);
    // в список воспрозведения из библиотеки добавляем мувиклип item
    mc._x = 5; // немного сдвигаем его по оси _x
    mc._y = yy; // назначаем новую координату по _y
    yy += mc._height+dif; // считаем координаты для следующего элемента плей-листа
    dataHolder = playlist.firstChild.childNodes[i];
    // в каждый элемет плейлиста (списка) пишем несколько переменных,
    // которые хранятся в xml файле плейлиста
    mc.label = dataHolder.attributes.label; // название видео
    mc.time = dataHolder.attributes.time; // продожительность видео
    url[i] = dataHolder.attributes.url; // массив путей к flv видео файлам
    mc.i = i; // в каждый пункт списка пишем его номер
    mc.playing = false; // булева величина
    // false значит, что текущее данное видео не проигрывается в данный момент
}
// кодим скроллер
// для того, чтобы текст в динамических полях отображался, маску нужно применять программно.
pl.container.setMask(pl.m);// что мы и делаем =)
// если список умещается в контейнер, то полоса прокрутки (скроллер) нам не нужен.
if (pl.container._height < pl.m._height) { // проверяем
    scroll._visible = false; // если это так, скрываем скроллер
}

// если скроллер нам всё-таки нужен
// при нажатии на ползунок
scroll.bar.onPress = function() {
// начинаем его перетаскивать от самого верху (0) до низа-выоста ползунка
    scroll.bar.startDrag(false, 4, 0, 4, scroll._height-scroll.bar._height);
        scroll.onMouseMove = function () { // при движении курсора
        // двигаем контейнер со списком воспроизведения на нужное расстояние
        pl.container._y = 0-((pl.container._height-pl.m._height+10) * scroll.bar._y / (scroll._height-scroll.bar._height));
    }
}
// когда пользователь отпускает кнопку мыши, нужно остановить движение ползунка
scroll.bar.onRelease = scroll.bar.onReleaseOutside = function() {
    scroll.bar.stopDrag();
}
// конец формирования плейлиста и скроллера

// часть кода, которая отвечает за проигрывание видео
// инициализация
mediaPlaying = false; // изначально при заходе на страницу видео не воспроизводится
isPlaying = null; // номер видео, которое играет плеер в данный момент
// скрываем (делаем ширину равной 0) все индикаторы
progress_bar.flv_load._width = 0;// индикатор процесса загрузки видео файла
progress_bar.bar._width = 0;// индикатор прогресса воспроизведения flv файла
pause_btn._visible = false;// скрываем икноку пауза ||

function playVideo(numb) { // на вход принимается номер мувика, видео в котором нужно проиграть
// переводим активный элемент плейлиста в неактивное состояние
_root.pl.container['item'+isPlaying].fon.gotoAndStop(1);
isPlaying = numb;// переменной isPlaying присваиваем номер текущего видео
// переводим в активное состояние элемент плейлиста, по которому кликнули,
// который ссылается на видео, которое плеер воспроизводит в данный момент
_root.pl.container['item'+isPlaying].fon.gotoAndStop(2);

// создаём поток для воспроизведения видео (классы NetConnection и NetStream)
_root.nc = new NetConnection();
_root.nc.connect(null);
_root.my_ns = new NetStream(_root.nc);
myVideo.attachVideo(_root.my_ns);
// воспроизводим видео под номером numb,
// который передаётся при вызове функции playVideo
// берём ссылку на flv файл из массива url по индексу numb
_root.my_ns.play(url[numb]);

// т.к. видео воспроизводится, нужно присвоить переменной mediaPlaying значение true
mediaPlaying = true;
setPlayBtn(false); // скрываем кнопку play, показываем кнопку pause

// функция выполнится при поступлении мета-данных о видео файле
_root.my_ns.onMetaData = function(infoObject:Object) {
    // сохраняем продолжительность видео (в секундах) в переменную totalTime
    totalTime = infoObject.duration;
};

_root.my_ns.onStatus = function(info) {
    if (info.code == 'NetStream.Play.Stop') {
// когда воспроизведние закончится
// присваиваем перменной mediaPlaying значение false
        mediaPlaying = false;
// скрываем кнопку pause, делаем видимой кнопку воспроизведние
        setPlayBtn(true);
    }
}

onEnterFrame = function() {
/* в функции onEnterFrame мы будем считать соотношение размера
видео к его загруженой части, а также прогресс воспроизвдения
и изменять ширину соотвествующих индикаторов */
    if (mediaPlaying) {
// вызов функции setBar, которая меняет ширину индикатора воспроизвдения
        setBar();
    }
    //считаем проценты, меняем ширину полоски - индикатора загрузки видео во flash плеер
    total = _root.my_ns.bytesTotal;// полный размер flv файла
    loaded = _root.my_ns.bytesLoaded;// размер загруженой части видео
    percent = int(loaded/total);// округляем до целого числа отношение между ними
// меняем ширину полоски-индикатора загрузки по нехитрой формуле
    progress_bar.flv_load._width = (percent * progress_bar.fon._width);
// в переменной current хранится секунда, на которой сейчас воспроизведение
    current = _root.my_ns.time;
}

function setBar() {
// функция, которая отвечает за отображение прогресса воспроизведения
    percent = Math.floor(_root.my_ns.time/totalTime*100);
    progress_bar.bar._width = (percent/100 * progress_bar.fon._width);
}

// функция scrubbing отвечает за перемеотк видео на нужное время.
// как параметр передаётся процент времени, на который нужно
// перемотать видео (число от 1 до 100)
function scrubbing(p) {
        isEnd = false;
        setPlayBtn(false);
// "перескакиваем" на нужное место
_root.my_ns.seek(p*totalTime/100);
_root.my_ns.pause(false);
}

// нажатие на индикатор загрузки - перемтока видео на загруженый фрагмент видео
progress_bar.flv_load.onRelease = function() {
// вызываем функцию scrubbing с параметром - процент, на который нужно перемотать видео
    scrubbing(Math.floor((progress_bar._xmouse)/progress_bar._width*100));
}

}// конец onEnterFrame()

// функция setPlayBtn скрывает/прячет кнопки play и pause (пауза и воспроизведение)
// если она будет вызвана с параметром true, кнопка play станет видимой, pause - невидимой
// с параметром false - наоборот
function setPlayBtn(bool) {
    play_btn._visible = bool;
    pause_btn._visible = !bool;
}

// нажтие на кнопку вопроизведение/пауза
p_btn.onRelease = function() {
    if (pause_btn._visible) { // если сейчас плеер не на паузе
// ставим воспроизведение на паузу
        _root.my_ns.pause(true);
        setPlayBtn(true);
    } else { // если плеер на паузе
// "снимаем" плеер с паузы
        _root.my_ns.pause(false);
        setPlayBtn(false);
    }
    
}

// регулировка громкости
// создаём обьект класса Sound для управления всеми звуками в фильме
sound = new Sound();
// нажатие на регулятор громкости
vol.onRelease = function() {
// меняем ширину индикатора громкости
    vol.bar._width = vol._xmouse;
// устанавливаем громкость звука
    sound.setVolume(vol._xmouse/vol._width * 100);
}

Собственно всё, исходник можно скачать вот здесь:
Нажмите для скачивания flv_xml_player.rar!
Название: flv_xml_player.rar
Размер: 15.48 Mb


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.