Разделы сайта
Флеш примеры и уроки Флеш исходники Скачать флеш игры с исходниками Исходники флеш сайтов, скачать шаблоны flash сайты Флеш исходники, защита flash от декомпиляторов и декомпиляции, защитить flash от кражи Разное. Статьи flash уроки софт исходники

   
Скачать флеш исходники уроки примеры flash игры с исходниками

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

Флеш примеры и уроки
Создание видео плеера с плейлистом (xml)

Раннее я публиковал урок изготовления flash проигрывателя для mp3 файлов, который считывал список файлов для воспроизведения (плейлист, playlist) из внешнего xml файла, также я выкладывал урок изготовления флеш видео плеера, но без плейлиста (actionscript 2). Сейчас, исходя из этих уроков, мы сделаем flash плеер для видео со списком воспроизведения при помощи среды Adobe Flash и языка actionscript 2. Конечно, для начала желательно почитать эти уроки, так как я не буду подробно описывать создания плейлиста, работу с xml и потоковым видео (всё описано в вышеупомянутых уроках).
Первый кадр, в котором будет грузиться сама флешка и 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>

Атрибут 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 видеопроигрыватель в первый кадр флешки вставьте код
Stage.scaleMode = 'noScale';
// для того, чтобы флешка могла работать с кириллическими символами
System.useCodepage = false;
// останавливаем флешку на первом кадре,
// и ждём пока загрузится xml
// после загрузки переводим нашу флешку на второй кадр,
// с нашим видео плеером
stop();
playlist = new XML();
playlist.ignoreWhite = true;
playlist.onLoad = function() {
    _root.gotoAndStop(2);
}

playlist.load("playlist.xml");

Далее переходим на второй кадр, вставляем код:
// инициализация
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);
}

Собственно всё, по идее должно работать smile Можно посмотреть пример flash видео плеера с плейлистом ниже, скачать плеер с исходником можно отсюда








 (голосов: 25)

Почитать ещё:
 
#1 написал: marlen (15 ноября 2009 17:03)
swf сам по себе работает, но вот в окне браузера почему то не проигрывается!
#2 написал: admin (15 ноября 2009 17:43)
Как не проигрывается? То есть, вообще не отображается?
#3 написал: marlen (20 ноября 2009 22:43)
отображается интерфейс, названия взятые из xml, но сами flv не грузятся. в html публикации проекта имеется ввиду.
#4 написал: admin (20 ноября 2009 22:48)
Видимо, вы неправильно прописали пути к файлам на сервере в xml. Попробуйте использовать относительные адреса, начиная от корня сайта
#5 написал: Алексей (25 ноября 2009 16:09)
Доброго времени суток!

Подскажите как реализовать масштабирование.
И возможность прослушивания mp3 и просмотра JPEG, если это конечно возможно. Просто интересна возможность реализации многофункционального плеера.

P.S. Заранее благодарен.
#6 написал: admin (25 ноября 2009 16:20)
Здравствуйте, в принципе вы можете найти это в разделе уроки. В частности:
Flash галерея
Ещё одна галерея
Создание mp3 плеера
#7 написал: Алексей (25 ноября 2009 17:13)
Огромное спасибо!
#8 написал: Виктория (15 декабря 2009 01:42)
Здравствуйте!

У меня такой вопрос...Я попыталась сделать видео плеер, только возникла проблема, воспроизводится только звук, а видео не видно, не подскажете где может быть ошибка?
#9 написал: admin (15 декабря 2009 01:47)
Вы смотрели исходник к этому уроку?
По-моему, лучше взять исходник и дорабатывать уже его, чем писать плеер с нуля
#10 написал: Виктория (15 декабря 2009 03:01)
Я взяла Ваш исходник. И переделывала его.
#11 написал: admin (15 декабря 2009 03:04)
Может быть, вы удалили или переименовали компонент myVideo? Или скрыли его под другими мувиками?
#12 написал: Виктория (15 декабря 2009 03:14)
Я поменяла только xml файл. Вот так он выглядит у меня:

<data>


<item url="1.flv" label="Презентация RB5(часть 1)" time ="3:10" />
<item url="2.flv" label="Презентация RB5(часть 2)" time ="4:18" />
<item url="3.flv" label="Завод RB" time ="8:56" />
<item url="4.flv" label="Регламент 2009" time ="2:22" />
<item url="5.flv" label="ГП Сингапура-ночная гонка" time ="2:28" />
<item url="6.flv" label="Смешная Формула(часть 1)" time ="4:03" />
<item url="7.flv" label="Смешная Формула(часть 2)" time ="2:40" />



</data>

Может я что-нибудь не досмотрела в уроке...Но fla-файл я не трогала вобще.
#13 написал: admin (15 декабря 2009 03:22)
Может, что-то с flv файлами не так? Попробуйте другие какие-нибудь, хоть с контакта через http://videosaver.ru/ слейте. Если вы ничего не меняли в исходнике - даже не представляю в чём дело, у меня всё работает, да и никто кроме вас с подобной проблемой не сталкивался. Поробуйте ещё flash плеер переустановить чтоли no
#14 написал: Виктория (15 декабря 2009 03:26)
Ладно, спасибо)) Сейчас будемс пробовать...

Вобщем, я со своей проблемой разобралась. Характеристики видео файлов были немного не такими. Пришлось конвертировать и менять настройки. А вобще, за урок спасибо))
#15 написал: admin (15 декабря 2009 04:03)
Отлчино, рад что проблема всё-таки решилась smile
А вобще, за урок спасибо))

Пожалуйста feel
#16 написал: pavel (8 января 2010 16:55)
Добрый день. Очень хороший сайт у вас. Много интересного.

Могли бы вы предоставить пример, новостей на флеше с данными из xml.
Чтобы было минимум лишних красивостей.

Суть такая: Имеется xml с новостями (заголовок, текст новости) и все новости выводились бы во флеш.

Просто качая исходники флеш сайтов, весьма трудно выделить именно эту часть.

Заранее спасибо.
#17 написал: admin (8 января 2010 17:16)
Хорошо. Скоро будет.
#18 написал: pavel (9 января 2010 12:17)
спасибо, жду с нетерпением.
#19 написал: Олег (2 февраля 2010 11:03)
Урок супер!
Но хотел сделать плеер чтобы он открывался на компьютере но видео брал с сервера как это реализовать?
#20 написал: admin (2 февраля 2010 12:26)
К сожалению, политика безопасности flash плеера этого не позволяет. Флешки, запущеные с жёсткого диска, не имеют доступ в сеть.
#21 написал: Олег (2 февраля 2010 12:35)
А если я запущу её но с другого сайта?
#22 написал: admin (2 февраля 2010 12:46)
С другого сайта можно, но в корень сайта, на кором будет находится видео, нужно положить файл crossdomain.xml, в котором разрешить доступ с первого сайта. Например:
<cross-domain-policy>
<allow-access-from domain="flash-world.ru" to-ports="*" />
<allow-access-from domain="www.flash-world.ru" to-ports="*" />
</cross-domain-policy>
#23 написал: Олег (2 февраля 2010 12:56)
А по другому это нельзя реализовать? Так как хочу это приложения закинуть в контакт.
#24 написал: admin (2 февраля 2010 12:59)
Ну, какие проблемы? Кидаете приложение вконтакт, а на свой сайт, на котором хранятся видео, кидаете crossdomain.xml
#25 написал: Олег (2 февраля 2010 13:07)
Так не хочет оно грузить ни список ни видео http://vkontakte.ru/app1777768
#26 написал: admin (2 февраля 2010 13:11)
Какой адрес сайта с видео? crossdomain.xml положили?
#27 написал: Олег (2 февраля 2010 13:14)
playlist.load("http://14267.vpriko00.web5.ukraine.com.ua/playlist.xml&q
uot;);
#28 написал: admin (2 февраля 2010 13:19)
Угу, вы мои поcты вообще не читаете.
http://14267.vpriko00.web5.ukraine.com.ua/crossdomain.xml - почему нет ничего? Должно быть:
<cross-domain-policy>
<allow-access-from domain="vkontakte.ru" to-ports="*" />
<allow-access-from domain="*.vkontakte.ru" to-ports="*" />
<allow-access-from domain="vk.com" to-ports="*" />
<allow-access-from domain="*.vk.com" to-ports="*" />
</cross-domain-policy>
#29 написал: Олег (2 февраля 2010 13:34)
Названия показывает но не грузит видео
#30 написал: admin (2 февраля 2010 13:38)
Не удивительно, вы неправильно прописали пути к видео. Должно быть что-то вроде http://14267.vpriko00.web5.ukraine.com.ua/video/4.flv
Когда обновите, очистите кэш браузера перед тем, как ещё раз попробовать
Добавление комментария




Опечатались, когда набирали запрос? Не беда! :)
фвщиу адфыр ehjrb bc[jlybrb фсешщтыскшзе akti флаш flesh crfxfnm
Мир технологии flash. Флеш уроки, исходники, примеры, статьи, советы, игры.