Цель моего уроки - создание простого и уникального видео плеера для сайта. Идея: видео плеер для сайта, который будет воспроизводить видео из папки, куда закачивают видео пользователи. Реализация: Flash + PhP + Mysql, во флеш используем компонент MediaDisplay
Для начала создадим кнопки... именно кнопки Кнопку паузы и кнопку плея разместим друг над другом. Теперь зададим нашим кнопка Instanse имена. Плей - b_play Пауза - b_pause Предыдущее видео - b_prev Стоп - b_stop Следующее видео - b_next
Теперь нам нужны контролеры звука, я сделал их 4. Максимум звука, Минимум звука, и два средненьких, вы же можете сделать их хоть 100. Так же зададим им инстанс имена. Для самого маленького контролера - b_vol_min Для того что повыше - b_vol_cet1 Еще выше - b_vol_cet2 И для самого высокого - b_vol_max
С кнопками разобрались (кстате на забыли перед назначением имен все символы сделать кнопками???)
Теперь мы строим два бара, 1ый - показывает прогресс загрузки видео, 2ой - прогресс просмотра видео. Рисуем прямоугольник Конвертируем его в муви клип. Теперь наша задача создать анимацию в 100 кадров. Копируем полоску на второй слой, меняем её цвет, к примеру на #0072bc; Линию на втором слое перемещаем так, что бы она была впритык к первой, в моем случае это выглядит так: Идем на 100ый кадр и на всех слоях создаем новый кадр, а линию со второго слоя перемещаем на _x = 0; _y = 0; Создаем Третий кадр, копируем туда линию с первого кадра, размещаем на _x = 0; _y = 0; И делаем этот слой маской для второго слоя. На первом кадре любого или даже нового слоя, в Actionscript пишем
CODE
stop();
Идем обратно на сцену и данному муви клипу даем инстанс наме = p_bar (прогресс бар) Копируем наш прогресс бар, меняем инстанс наме на = p_bar_2 Редактируем наш прогресс бар: Удаляем первый слой, а цвет линии второго слоя меняем, ну к примеру на розовый. На сцене надо наши прогресс бары разместить друг над другом. Создаем новые слой на сцене, делаем его самым нижним, на него разместим наш компонент MediaDisplay, инстанс наме = player. Ширину и высоту видео окна делаем на максимум. Слой с видео окном закрываем для редактирования. Создаем динамический текст на сцене, инстанс наме = video_info; Разместим все наши элементы на сцене. Приступим к программированию Весь код мы будем писать в первом кадре нового слоя или слоя со всем кнопками.
CODE
//Для начала создадим все нужные нам переменные var video_num; //переменная для контроля видео var array_length; //общее кол-во видео var video_progress; //прогресс видео var var_id = new Array(); //Массивы для данных var var_name = new Array(); var var_url = new Array(); var myXML:XML = new XML(); //Объект XML
Создаем все переменные, а так же массивы и объект XML
CODE
b_pause._visible = false; //Скрываем паузу
Скрываем кнопку - паузу, так как наш плеер не начинает воспроизведение самостоятельно.
CODE
myXML.load("video.xml"); //Загружаем XML
Загружаем нащ XML, о том как строить XML - ниже
CODE
myXML.onLoad = function(success) { //После загрузки if (success) { //Если загрузка успешна xmlNode = this.firstChild; //Открываем первый тег ХМЛ for (var i=0; i var_id[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue; var_name[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue; var_url[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue; var_data[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue; } array_length = var_id.length; video_num = 0; video_info.text = "Ожидает: "+var_name[video_num]; } else { trace("Не могу загрузить xml файл"); } };
Тут мы вводим все данные в массивы
CODE
b_play.onRelease = function() { //Действие для кнопки - плей if (video_progress == null) { //Если до этого мы не нажали паузу, то this._visible = false; b_pause._visible = true; player.contentPath = "http://friend-list.ru/flash/uploads/video/"+var_url[video_num]; //Заставляем плеер играть видео, адресс в массыве которого равен video_num video_info.text = "Играет: "+var_name[video_num]; //Текст в видео инфо } else { //Если пауза была нажата player.play(video_progress); this._visible = false; b_pause._visible = true; video_info.text = "Играет: "+var_name[video_num];//Текст в видео инфо } } b_pause.onRelease = function() { //Действие для кнопки - пауза video_progress = player.playheadTime; //Запоминаем где мы остановились player.stop(); //Прекращаем воспроизведение this._visible = false; b_play._visible = true; video_info.text = "Пауза: "+var_name[video_num]; //Текст в видео инфо } b_stop.onRelease = function() { player.stop(); //Прекращаем воспроизведение b_play._visible = true; b_pause._visible = false; video_progress = 0.001; //Обнуляем значение паузы, с 0.001 избегаем баг нула } b_next.onRelease = function() { //Действие для кнопки - следующее видео if (array_length - 1 > video_num) { //Если у нас еще не последнее видео b_play._visible = false; b_pause._visible = true; video_progress = null; //Обнуляем значение паузы video_num++; //Значение видео делаем больше video_info.text = "Ожидает: "+var_name[video_num]; //Текст в видео инфо player.contentPath = "http://friend-list.ru/flash/uploads/video/"+var_url[video_num]; player.play(); } } b_prev.onRelease = function() { //Действие для кнопки - предыдущее видео if(video_num != 0) { //Если у нас не первое видео b_play._visible = false; b_pause._visible = true; video_progress = null; //Обнуляем значение паузы video_num--; video_info.text = "Ожидает: "+var_name[video_num]; //Текст в видео инфо player.contentPath = "http://friend-list.ru/flash/uploads/video/"+var_url[video_num]; player.play(); } } b_vol_max.onRelease = function() { //Действия для кнопки - звук на максимум player.volume = 100; } b_vol_cet1.onRelease = function() { //Действие для кнопки - среднее значение звука 2 player.volume = 40; } b_vol_cet2.onRelease = function() { //Действие для кнопки - среднее значение звука 1 player.volume = 60; } b_vol_min.onRelease = function() { //Действия для кнопки - звук на минимум player.volume = 10; } p_bar.onRelease = function() { //Действия для перемотки видео this.onePixOnOneSec = player.totalTime / this._width; //определяем значение 1пх. прогресс бара, на N сек. видео this.goTo = Math.round(this.onePixOnOneSec * this._xmouse); //Определяем значение N сек. видео, равное участку куда кликнул пользователь player.pause(); //Видео на паузу player.play(this.goTo); //Воспроизводим видео с места определенного мат. вычислениями }
Коды для кнопок. Немного про стоп и паузу. В кнопке стоп мы сделали паузу на 0.001 секунде.. почему же так а не null. Делаем так, потому что если обнулять паузу, то видео просто не играело. Пауза - да да, в компоненте видео можно сделать player.pause();... но с файлами avi у меня этот фокус не прокатил.
CODE
setInterval(function() { //Выполняем функцию раз в определеннео время var loaded = Math.round(player.bytesLoaded / player.bytesTotal * 100); var progres = Math.round(player.playheadTime / player.totalTime * 100); p_bar.gotoAndStop(loaded); p_bar_2.gotoAndStop(progres); if (progres == 100) { //Если выдео закончилось, пробуем перейти на след. видео if (array_length - 1 > video_num) { video_num++; player.contentPath = "http://friend-list.ru/flash/uploads/video/"+var_url[video_num]; player.stop(); //Прекращаем воспроизведение, так как мы ждем действий от пользователя } b_pause._visible = false; b_play._visible = true; video_progress = 0.001; //Обнуляем значение паузы video_info.text = "Ожидает: "+var_name[video_num]; //Текст в видео инфо } }, 100);
Код для динамического изменения прогресс баров...
Вид XML документа:
CODE
Вот и все. Автор: я, вроде бы мой первый урок по флеш P.S. У меня плеер воспроизводит не только flv, но и avi P.P.S. в коде я везде указывал путь к своему хосту, где лежат видео, вам собственно указывать, как надо вам, и совсем забыл, по мере улучшения возможностей плеера буду обновлять темку
Часть 2. PHP + MySQL = Xml + Flash
И так, продолжаем урок. Для начала создаем MySQL Базу данных (БД). Я использую PhPMyAdmin для создания и работы с бд. Тут кому как удобно, разница не велика. Называем нашу бд video, кол-во полей делаем равным 3. id - тип integet(int, целочисленное), макс. кол-во символов, к примеру 3, в параметрах указываем auto_increment(аi, автозаполнение), и делаем поле ключем. url - тип text(текст). name - тип text(текст). С БД - все. Теперь файл - создающий наш XML док.
CODE
mysql_connect("адрес к бд", "логин", "пароль"); //Создаем соединение с сервером MySQL mysql_select_db("имя бд"); //Выбираем БД mysql_query("SET NAMES utf8"); //Изменяем кодировку получаемых данных на utf-8, у вас это может быть любая другая, к примеру windows-1251 $query = mysql_query("SELECT * FROM video ORDER BY `video`.`id` DESC"); //Получаем все данные из таблицы видео, с условием выбора - с последнего $check = mysql_fetch_array($query); //Заносим все данные в массив echo ''; //Закрываем начальный тег ?>
Далее нам надо создать скрипт который будет закачивать файлы на сервер, я сделал первую стадию загрузки с помощью flash... не изобретаем велосипед, идем сюда -> клик, спасибо kyzi007 Из урока берем, только то что связано с флешем. Теперь файл к которому будет обращаться флеш.
CODE
mysql_connect("адрес к бд", "логин", "пароль"); //Создаем соединение с сервером MySQL mysql_select_db("имя бд"); //Выбираем БД mysql_query("SET NAMES utf8"); //Изменяем кодировку получаемых данных на utf-8, у вас это может быть любая другая, к примеру windows-1251 $query = mysql_query("SELECT * FROM video"); //Получаем все данные из видео $num_rows = mysql_num_rows($query); //Определяем кол-во строк в таблице $num_pict = $num_rows + 1; //+1 к тому значение $rand_name = $num_pict.'_video_'.rand(0,9).rand(0,9).rand(0,9).rand(0,9).rand(0,9).rand(0,9); //Создаем новое имя для файла $format_name = substr(basename($_FILES['Filedata']['name']), -3); //Определяем разреширение $pict_name = $rand_name.'.'.$format_name; //до конца доводим имя if ($_FILES['Filedata']['name']) { $upload_dir = "../uploads/video/"; //Папка куда переместим файл $upload_file = $upload_dir.$pict_name; //Создаем полный путь move_uploaded_file($_FILES['Filedata']['tmp_name'], $upload_file); //Перемещаем $query = mysql_query("INSERT INTO video (name, url) VALUES ('".basename($_FILES['Filedata']['name'])."', '".$pict_name."')"); //Заносим все значения в БД } ?>
Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"!
Design bY PainKiller.Net.Ru
