Создание flash видео плеера

в 0:33, , рубрики: Action Script, flash, Flash-платформа, YouTube, видео, плеер для сайта, Работа с видео, метки: , , ,

Доброго времени суток!
Ниже я расскажу о том как создать flash видео плеер для сайта. В этой статье в качестве ролика будет использоваться ролик с YouTube. Если будут люди которым интересно узнать как создать плеер для роликов не с YouTube — напишу статью и о нём.
В итоге плеер будет иметь следующий вид:
Создание flash видео плеера
Желающих почитать про создание своего плеера прошу под кат.
Под катом несколько скриншотов.

Дизайн

При написании плеера я буду использовать Adobe Flash CS4 и Action Script 3.
Для начала нам необходим дизайн плеера. Его можно придумать самому либо взять готовый. Я выбрал второй вариант и нашёл дизайн на сайте 365psd.com и немного его изменил.
Далее вырезаем элементы управления. В моём случае это кнопка разворачивания на весь экран, кнопки воспроизведения и громкости. Паузу и кнопку отключённого звука я дорисовал сам. Полосу перемотки и её заднего фона я нарисовал свои.

Код

Шаг 1: Подготовка

Приступим к коду.
Создадим новый проект в Adobe Flash. Переместим все наши элементы управления(кнопки громкости, паузы, воспроизведения...) на сцену. Преобразовываем все кнопки в символы — кнопки(правой кнопкой мыши по картинке — преобразовать в символ — вводим название и выбираем в выпадающем меню пункт «Кнопка»). Так же при преобразовании в символ отмечаем галкой «Экспорт для ActionScript»:
Создание flash видео плеера
Плеер из массива FlashVars будет получать YouTube ID ролика и его воспроизводить внутри плеера.

Шаг второй: первые строчки

К первому кадру добавляем следующий код:

import flash.utils.Timer;
import flash.events.TimerEvent;

var player:Object;
var played=false;
var yt_id=this.loaderInfo.parameters["yt_id"];
var q='nohd';
var clw, clh, w, h, time;
time=0;
var min:int=0;
//Объявляем основные переменные

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
//Загружаем файл для работы с API проигрывателя YouTube.

var cbar:MovieClip = new c_bar();
var playbtn:SimpleButton = new play_btn();
var pausebtn:SimpleButton = new pause_btn();
var volume_:SimpleButton = new v();
var mute:SimpleButton = new vm();
var fs:SimpleButton = new fullscreen();
var lg:MovieClip = new logo();
var timenow:MovieClip = new time_now();
var timenow_i:MovieClip = new time_now_i();
var hd:SimpleButton = new hd_btn();
var nohd:SimpleButton = new no_hd();
//Объявляем переменные, в которые "грузим" наши кнопки и остальные элементы.
//Имена и классы могут быть разные. Имя класса мы задавали в шаге ранее("Подготовка")

var myTimer:Timer = new Timer(1000);
myTimer.addEventListener("timer", tik);
//Создаём таймер

stage.addEventListener(KeyboardEvent.KEY_DOWN, keys);
stage.addEventListener(FullScreenEvent.FULL_SCREEN, fs_event);

volume_.addEventListener(MouseEvent.CLICK, tooglemute); //Изменение громкости
mute.addEventListener(MouseEvent.CLICK, tooglemute); //Изменение громкости
pausebtn.addEventListener(MouseEvent.CLICK, toogleplay); //Изменение воспроизведения-пауза
fs.addEventListener(MouseEvent.CLICK, tooglefs);//Изменение размера ролика
timenow.addEventListener(MouseEvent.CLICK, goto);//Перемотка по ролику
timenow_i.addEventListener(MouseEvent.CLICK, goto);//Так же перемотка

nohd.addEventListener(MouseEvent.CLICK, hdtoogle);//Изменение качества
hd.addEventListener(MouseEvent.CLICK, hdtoogle);//Изменение качества
//Вешаем на элементы обработчики.

var tf:TextField = new TextField();
tf.x=200;
tf.y=423;
tf.text="";
tf.textColor=0xFFFFFF;
tf.text="0:0";
//Добавляем текстовое поле для отображения времени

Шаг 3: Обработчики

В моём случае мне нужно 11 обработчиков событий. Если вы добавляете другие элементы управления, то у вас их будет другое количество.
Первый обработчик, и, наверное, самый главный — onLoaderInit. он служит для определения загрузки файла www.youtube.com/apiplayer?version=3 с которым мы и будем дальше работать. Я же в него добавил задание всех атрибутов для элементов и их добавление на сцену. Мой код следующий:

function onLoaderInit(event:Event):void {
	loader.content.width=720;
	loader.content.height=480;
        //Задаём свойства для API проигрывателя
        addChild(loader);
	loader.content.addEventListener("onReady", onPlayerReady);
	loader.content.addEventListener("onStateChange", onPlayerStateChange);
        //Добавляем файл http://www.youtube.com/apiplayer?version=3 на сцену и добавляем новые обработчики событий.

	cbar.x=110;
	cbar.y=407;
	
	playbtn.x=127;
	playbtn.y=422;
	
	pausebtn.x=127;
	pausebtn.y=422;
	
	volume_.y=425;
	volume_.x=172;
	
	mute.y=425;
	mute.x=172;
	
	fs.y=422;
	fs.x=573;
	
	hd.y=427;
	hd.x=536;
	
	nohd.y=427;
	nohd.x=536;
	
	lg.x=5;
	lg.y=5;

	timenow.y=427;
	timenow.x=240;
	
	timenow_i.y=427;
	timenow_i.x=240;
	timenow_i.width=0;
        //Выше мы задали свойства для элементов управления
	playbtn.addEventListener(MouseEvent.CLICK, toogleplay);
	//добавляем новый обработчик для кнопки воспроизведения

	addChild(cbar);
	addChild(volume_);
	addChild(fs);
	addChild(tf);
	addChild(playbtn);
	addChild(lg);
	addChild(timenow);
	addChild(timenow_i);
	addChild(nohd);
        //Добавляем все нужные элементы на сцену.
}

Следующая функция: функция которая выполниться при готовности нашего API. Её код достаточно прост: 

function onPlayerReady(event:Event):void {
        player = loader.content;
	player.loadVideoById(yt_id, 0);
	//Загружаем сам ролик передав функции loadVideoById ID ролика, который мы передаём проигрывателю
	var w=this.stage.stageWidth;
	var h=this.stage.stageHeight;
	
	player.setSize(w,h);
	player.width=720;
	player.height=480;
        //Получение и задание ширины и высоты для самого ролика
	
	player.setPlaybackQuality('medium');
        //Меняем качество
	
	removeChild(playbtn);
	addChild(pausebtn);
	
	played=true;
	myTimer.start();
	//Прячем кнопку воспроизведения, показываем кнопку паузы. Запускаем таймер.
}

Следующая функция: воспроизведение и остановка на паузу: 

function toogleplay(event:Event):void{
	if(played){
		player.pauseVideo();
		played=false;
		
		removeChild(pausebtn);
		addChild(playbtn);
		
		myTimer.stop();
	} else {
		player.playVideo();
		played=true;
		
		removeChild(playbtn);
		addChild(pausebtn);
		myTimer.start();
	}
}

В функции выше ничего сложного нет, её комментировать я не буду.
Функция включения и выключения звука:

function tooglemute(event:Event):void{
	if(player.isMuted()){
		player.unMute();
		//С помощью этого запроса мы убираем беззвучный режим
		addChild(volume_);
		removeChild(mute);
	} else {
		player.mute();
		//С помощью этого запроса мы добавляем беззвучный режим
		addChild(mute);
		removeChild(volume_);
	}
}

Следующая функция — разворачивание на весь экран и сворачивание:

function tooglefs(event:Event):void{	
	if(stage.displayState==StageDisplayState.NORMAL){
		stage.displayState=StageDisplayState.FULL_SCREEN;
		stage.scaleMode=StageScaleMode.NO_SCALE;
		
		w=this.stage.stageWidth;
		h=this.stage.stageHeight;
		
		clw=(w-player.width)/2;
		clh=(h-player.height)/2;
		
		//set new position for elements
		cbar.y=-clh+h-100;
		playbtn.y=-clh+h-85;
		pausebtn.y=-clh+h-85;
		volume_.y=-clh+h-85;
		mute.y=-clh+h-85;
		tf.y=-clh+h-85;
		timenow.y=-clh+h-81;
		timenow_i.y=-clh+h-81;
		fs.y=-clh+h-88;
		lg.x=-clw+5;
		lg.y=-clh+5;
		nohd.y=-clh+h-83;
		hd.y=-clh+h-83;
	}else{
		stage.displayState=StageDisplayState.NORMAL;
		
		w=720;
		h=480;
		
		clw=0;
		clh=0;
		
		//reset elements position
		cbar.y=407;
		playbtn.y=422;
		pausebtn.y=422;
		volume_.y=425;
		mute.y=425;
		fs.y=422;
		lg.x=5;
		lg.y=5;
		tf.y=423;
		timenow.y=427;
		timenow_i.y=427;
		hd.y=427;
		nohd.y=427;
	}
	
	player.x=-clw;
	player.y=-clh;
	player.setSize(w,h);
}

В этой функции мы в зависимости от режима(на весь экран или же нет) задаём новые свойства для элементов и меняем размер проигрывателя.

Далее я писал перемотку:

function goto(event:Event):void{
	var onePixOnOneSec=player.getDuration()/timenow.width;
	if(onePixOnOneSec<1){
		onePixOnOneSec=1;
	}
	var goto_=Math.round(onePixOnOneSec * (this.mouseX-timenow.x));
	player.seekTo(goto_);
	//Определение сколько секунд в одном пискеле и переход к нужной секунде
	
	timenow_i.width=this.mouseX-timenow.x;
	//Меняем размер полоски, показывающей сколько мы просмотрели
	
	var sec;
	
	if(goto_<60){
		min=0;
		sec=String(Math.floor(goto_));
	} else if (goto_>=60){
		var now=goto_;
		trace(now);
		var newnow=String(now/60);
		var split=newnow.split(".");
		min=split[0];
		sec=Math.floor(now-min*60);
	}
	tf.text=min+":"+sec;
	//Обновляем время
}

Далее переключение качества:

function hdtoogle(event:Event):void{
	if(q=='nohd'){
		var maxq=player.getAvailableQualityLevels();
		player.setPlaybackQuality(maxq[0]);
		//В первой строчке мы получаем все возможные качества для ролика
		//Во второй - задаём наивысшее
		
		removeChild(nohd);
		addChild(hd);
		//Прячем ненужные элементы и показываем нужные
		q="hd";
	} else {
		player.setPlaybackQuality('medium');
		//Задаём среднее качество
		removeChild(hd);
		addChild(nohd);
		//Прячем ненужные элементы и показываем нужные
		q="nohd";
	}
}

Следующую функцию я написал для таймера: 

function tik(event:TimerEvent):void{
	var c_time=player.getCurrentTime();
	var onePixOnOneSec=player.getDuration()/timenow.width;
	timenow_i.width=Math.round(c_time/onePixOnOneSec);
	var sec;
	
	if(c_time<60){
		min=0;
		sec=String(Math.floor(c_time));
	} else if (c_time>=60){
		var now=c_time;
		trace(now);
		var newnow=String(now/60);
		var split=newnow.split(".");
		min=split[0];
		sec=Math.floor(now-min*60);
	}
	tf.text=min+":"+sec;
}

Эта функция частично повторяет перемотку. В этой я поменял пару переменных, остальное осталось почти таким же.

function onPlayerStateChange(event:Event):void {
    var state_=Object(event).data;
    //Получение состояния ролика. 0 - он закончился, 1 - начался.
	if(state_==0){
		addChild(playbtn);
		removeChild(pausebtn);
		player.stopVideo();
	} else if (state_==1){
		addChild(pausebtn);
		removeChild(playbtn);
	}
}

Эта функция отвечает за конец и начало ролика. Она достаточно проста.

Далее я добавил остановку и продолжение при нажатии на пробел:

function keys(event:KeyboardEvent):void{
	if(event.keyCode==Keyboard.SPACE){
		if(played){
			player.pauseVideo();
			played=false;
			
			removeChild(pausebtn);
			addChild(playbtn);
			
			myTimer.stop();
		} else {
			player.playVideo();
			played=true;
			
			removeChild(playbtn);
			addChild(pausebtn);
			myTimer.start();
		}
	}
}

Код полностью повторяет обработчик для кнопки «Пауза» и «Воспроизведение».

Далее я принялся за отладку плеера. Всё работало хорошо, однако если развернуть на весь экран плеер и потом нажать на клавишу «Esc» то ролик уменьшался, но размеры и атрибуты элементов не изменялись. Для решения этой проблемы была дописана функция:

function fs_eventt(event:FullScreenEvent):void{
    if (!event.fullScreen) { 
		w=720;
		h=480;
		
		clw=0;
		clh=0;
		
		//reset elements position
		cbar.y=407;
		playbtn.y=422;
		pausebtn.y=422;
		volume_.y=425;
		mute.y=425;
		fs.y=422;
		lg.x=5;
		lg.y=5;
		tf.y=423;
		timenow.y=427;
		timenow_i.y=427;
		hd.y=427;
		nohd.y=427;
		
		player.x=-clw;
		player.y=-clh;
		player.setSize(w,h);
    }
}

Эта функция так же почти полностью копирует функцию сворачивания плеера.

Завершение

В завершение я приложу два скриншота полученного плеера: на весь экран и в «свёрнутом» виде.
«Свёрнутый»:
Создание flash видео плеера
На весь экран:
Создание flash видео плеера

Если у вас возникнут пожелания, советы или уточнения — буду раз их выслушать.

Так же ссылки на дополнительные материалы по YouTube API:

Автор: AlexRudkowskij

  1. Сергей:
    26.09.2013 в 08:54

    напишите статью о том, как создавать плеер не для ютюба.
    в этой статье не очень понятно какие элементы надо поместить на сцену

    Ответить

* - обязательные к заполнению поля

Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js