Цель моего уроки - создание простого и уникального видео плеера для сайта.
Идея: видео плеер для сайта, который будет воспроизводить видео из папки, куда закачивают видео пользователи.
Реализация: 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 пишем
Идем обратно на сцену и данному муви клипу даем инстанс наме = 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<myXML.firstChild.childNodes.length; 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
<?xml varsion="1.0" encoding="utf-8"?>
<video>
<vid>
<id>1</id>
<name>1.flv</name>
<url>1_video_123456.flv</url>
</vid>
<vid>
<id>2</id>
<name>2.flv</name>
<url>2_video_123456.flv</url>
</vid>
</video>
Вот и все.
Автор: я, вроде бы мой первый урок по флеш
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
<?php
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 '<?xml varsion="1.0" encoding="utf-8"?><video>'; //Первая строчка нашего XML
do { //Цикл
echo '<vid><id>'.$check['id'].'</id><name>'.$check['name'].'</name><url>'.$check['url'].'</url></vid>';
}
while ($check = mysql_fetch_array($query)); //Условие, если действует, то цикл повторим
echo '</video>'; //Закрываем начальный тег
?>
Далее нам надо создать скрипт который будет закачивать файлы на сервер, я сделал первую стадию загрузки с помощью flash... не изобретаем велосипед, идем сюда ->
Из урока берем, только то что связано с флешем.
Теперь файл к которому будет обращаться флеш.
Code
<?php
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."')"); //Заносим все значения в БД
}
?>
прикрепление: video.rar ( 166.26к )
© 2009 Портал веб-мастеров.