Раннее я публиковал урок изготовления 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 видео плеера:
Code
<data> <item url="1.flv" label="Первое видео" time ="4:02" /> <item url="2.flv" label="Второе видео" time ="5:11" /> </data>
Атрибут url – относительный либо абсолютный путь к .flv видео файлу. Рекомендую использовать относительные адреса, потому что с точки зрения flash плеера, http://GES.MOY.SU и http://www.GES.MOY.SU – разные домены, и если вы пропишете адрес без www, то, скорее всего, пользователь, который зашёл на www.GES.MOY.SU не сможет посмотреть видео, так как будут проблемы с политикой безопасности flash плеера. В атрибуте label хранится название видео, в атрибуте time – продолжительность видео, которое отображется в плейлисте рядом с названием. Итак, создайте файл playlist.xml, заполните его нужным образом и сохраните его в кодировке UTF-8 в ту же папку, располагается или будет располагаться флешка – видео проигрыватель. Для загрузки xml плейлиста в наш flash видеопроигрыватель в первый кадр флешки вставьте код
Code
Stage.scaleMode = 'noScale'; // для того, чтобы флешка могла работать с кириллическими символами System.useCodepage = false; // останавливаем флешку на первом кадре, // и ждём пока загрузится xml // после загрузки переводим нашу флешку на второй кадр, // с нашим видео плеером stop(); playlist = new XML(); playlist.ignoreWhite = true; playlist.onLoad = function() { _root.gotoAndStop(2); }
playlist.load("playlist.xml");
Далее переходим на второй кадр, вставляем код:
Code
// инициализация 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; };
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); }
Собственно всё, по идее должно работать Можно посмотреть пример flash видео плеера с плейлистом ниже, скачать плеер с исходником можно [Отсюда Прежде чем задать вопрос Администратору подумайте вопрос о чем? Администраторы вопросах не отвечает только создает тему! Вопросы долько в том случай о том вопрос будет проСтудии"RR"