Flowplayer

Сегодня я пролью свои лучи поноса ненависти на Flowplayer.

В двух словах — редкостная хуета! Дальше кодом… А забыл описать задачу. Нужен плеер в попапе, плейлист на странице в виде html (но если надо пара секунд переделать под ajax), у плеера есть две кнопки (вперед, назад) с превьюшками видео. Погнали.

Пример разметки одного элемента списка


<div style="float:left; text-align:center; margin:5px;">
	<a class="progress" href="${video_link}.flv" title="${title}">
		<img src="${thrumbnail_link}" alt="${title}">
	</a>
	<a class="progress" href="${video_link}.png" title="${title}">
		${title}
	</a>
</div>

Конфигурация плеера с комментариями


$(document).ready(function(){

	// конфигурация плеера
	var player = $f("player", 
	{
		// сам плеер 
		src : "/content/source/flowplayer/flowplayer-3.2.4.swf", 
		// и дополнительные параметры
		wmode: 'transparent'
	}, 
	{
		//debug : true,
		
		// стандартный клип
		clip : {
			// можно не указывать если полный путь прописан в html
			baseUrl: 'http://blip.tv/file/get/',
			// сразу при запуске не играем
			autoPlay: false,
			// но закачиваем
			autoBuffering: true,
			// растягиваем видео
			scaling : 'scale',
			// перед проигрыванием
			onBeforeBegin : function(clip){
				// если вместо видео картинка контролы не показываем
				if  (clip.type == "image"){
					this.getControls().hide();
				}
				
				// вычисляем позицию в списке воспроизведения
				var clip = this.getClip(),
					list = this.getPlaylist(),
					current = $.inArray(clip, list),
					left = current - 1  >= 0 ? current - 1 : list.length - 1,
					right = current + 1 <= list.length - 1 ? current + 1 : 0;
				
				// обновляем кнопки вперед-назад
				this.getPlugin("leftButton")
					.setHtml("<p>"+list[left].title+"</p>")
					.css({
						background : "transparent url("+list[left].thumbnail+") no-repeat 20 20",
					});
					
				this.getPlugin("rightButton")
					.setHtml("<p>"+list[right].title+"</p>")
					.css({
						background : "transparent url("+list[right].thumbnail+") no-repeat 20 20",
					});
			}
		},
		
		// список у нас береться из html
		// поэтому тут пусто
		playlist: [	],
		
		// рисуем кнопки
		// поскольку плеер очень убогий, для рисования кнопки
		// которая сначала видна чуть-чуть а при наведении мышьки 
		// расширяется и становиться видно превьюшку следующего видео
		// надо рисовать две кнопки одна маленькая, видна всегда и не меняется,
		// а вторая находиться поверх нее и собственно все события висят на ней
		plugins:  {
			
			// левая маленькая кнопка
			leftFake : {
				url: '/content/source/flowplayer/flowplayer.content-3.2.0.swf',
				top: 130,
				right : 0,
				width : 20,
				height : 100,
				zIndex : 1,
				opacity : 1,
				borderRadius : 0,
				background : "url(/content/source/flowplayer/mp_leftArrow.png) no-repeat 0 0"
			},
			
			// правая маленькая кнопка
			rightFake : {
				url: '/content/source/flowplayer/flowplayer.content-3.2.0.swf',
				top: 130,
				left : 0,
				width : 20,
				height : 100,
				zIndex : 1,
				opacity : 1,
				borderRadius : 0,
				background : "url(/content/source/flowplayer/mp_rightArrow.png) no-repeat 0 0"
			},
			
			controls: {
				//playlist: true,
		
				// ссылка на плагин
				url: '/content/source/flowplayer/flowplayer.controls-3.2.2.swf', 
				// показывать все элементы управления
				all: false,
				// играть
				play: false,
				// ползунок
				scrubber: true,
				// громкость
				volume: true,   
				// тонкая настройка ползунка и громкости
				scrubberHeightRatio: 0.3,
				scrubberBarHeightRatio: 0.2,
				volumeSliderHeightRatio: 0.2,
				// убирать с экрана при бездействии
				autoHide: 'always',
				// еще раз прячем контролы если смотрим на картинку,
				// потому что он (контрол) тупой и с первого раза не понял
				onBeforeShowed : function(){
					if (this.getPlayer().getClip().type == "image"){
						return false;
					}
				},
				onBeforeHidden : function(){
					if (this.getPlayer().getClip().type == "image"){
						return false;
					}
				}
			},

			// рисуем настоящую большую кнопку
			leftButton : {
				// ссылка на плагин
				url:'/content/source/flowplayer/flowplayer.content-3.2.0.swf',
				// какойто CSS
				top: 130,
				left:0,
				width: 20,
				height: 100,
				zIndex : 5,
				opacity: 1,
				padding : 20,
				borderRadius : 10,
				style: {
					p : {
						fontSize:14,
						fontWeight:"bold",
						color:"#000000"
					}
				},
				// задаем анимацию при наведении мыши
				onMouseOver: function() {
					this.animate({width:140}, 500);
				},
				onMouseOut: function() {
					this.animate({width:20}, 500); 
				},
				// играем следующий клип при клике
				onClick : function(){
					var clip = this.getPlayer().getClip(),
						list = this.getPlayer().getPlaylist(),
						current = $.inArray(clip, list),
						index = current - 1  >= 0 ? current - 1 : list.length - 1;
					
					this.getPlayer().play(index);
				}
			},
			
			// тут все тоже самое только для правой кнопки
			rightButton : {
				url: '/content/source/flowplayer/flowplayer.content-3.2.0.swf',
				top: 130,
				right: 0,
				width: 20,
				height: 100,
				zIndex : 5,
				opacity: 1,
				padding : 20,
				borderRadius : 10,
				style: {
					p : {
						fontSize:14,
						fontWeight:"bold",
						color:"#000000"
					}
				},
				onMouseOver: function() {
					this.animate({width:140}, 500);
				},
				onMouseOut: function() {
					this.animate({width:20}, 500); 
				},
				onClick : function(){
					var clip = this.getPlayer().getClip(),
						list = this.getPlayer().getPlaylist(),
						current = $.inArray(clip, list),
						index = current + 1 <= list.length - 1 ? current + 1 : 0;
			
					this.getPlayer().play(index)
				}, 
			},
		},
		
		// при наведении мыши на плеер показываем все кноки
		onMouseOver : function(){
			var plugins = ["leftButton","rightButton","leftFake","rightFake"];
			for(var i in plugins){
				this.getPlugin(plugins[i]).show();
			}
		},
		
		// а при бездействии - убираем
		onMouseOut : function(){
			var plugins = ["leftButton","rightButton","leftFake","rightFake"];
			for(var i in plugins){
				this.getPlugin(plugins[i]).hide();
			}
		},
		
		// ну и еще пара проверок при загрузке
		onLoad : function(){
			var list = this.getPlaylist(),
				left = list.length - 1,
				right = 1;
			
			// если короткий список воспроизведения не показываем кнопуки
			if (list.length<2){
				this.getPlugin("leftButton").hide();
				this.getPlugin("rightButton").hide();
			}else{
				this.getPlugin("leftButton")
					.setHtml("<p>"+list[left].title+"</p>")
					.css({
						background : "transparent url("+list[left].thumbnail+") no-repeat 20 20",
					});
					
				this.getPlugin("rightButton")
					.setHtml("<p>"+list[right].title+"</p>")
					.css({
						background : "transparent url("+list[right].thumbnail+") no-repeat 20 20",
					});
			}
		}		
	}),
	
	// обычный JUI диалог
	dialog = $("#videoDialog").dialog({
		//modal:true,
		title:"dialog title",
		resizable:false,
		bgiframe:true,
		draggable:true,
		autoOpen: false,
		width:600,
		height:400,
		minHeight:0,
		open:function(){
			// при открытии диалога загружаем плеер
			player.load();
			// и меняем плейлист
			// для вызова события onPlaylistReplace
			player.play(list);
		},
		close:function(){
			player.unload();
		}
	}),
	
	list = [],
	index = 0;
	
	// вызываеться при смене списка воспроизведения
	// например ajax'ом новый подгрузили
	player.onPlaylistReplace(function(list) {
		// чтото без таймаута не пашет :(
		setTimeout(function(){
			player.play(index);
		},100);
	});
	
	// при старте клипа меняем заголовок диалога
	player.onStart(function() {
		dialog.prev().find(".ui-dialog-title").text(this.getClip().title)
	});
	
	// меняет список воспроизведения
	function getNewPlaylist(){
		list = [];
		// парсит html
		$("#playlist").children().each(function(){
			var self = $(":first",this);
			list.push({
				"url": self.attr("href"),
				"title": self.attr("title"),
				"thumbnail" : self.find("img").attr("src")
			});
		});
		
		// гасим ссылки
		$("#playlist a").click(function(){
			$(this).parent().click();
			return false;
		});
		
		// открываем плеер и играем нужное видео
		$("#playlist").children().click(function(){
			if (!dialog.dialog("isOpen")){
				dialog.dialog("open");
			}
			index = $(this).index();
		});
		
	}
	
	// загружаем список в плеер
	getNewPlaylist();

});

И немного пощупать что получилось

 

9 Комментарии “Flowplayer

  1. хм, у меня кликнув по ссылке под пальмой Firefox норовит загрузить .flv файл — ты, вроде, что-то другое планировал?

  2. неа, ничего не изменилось… может что-то из моих расширений в огнелисе блокирует. отключид адблок — нифига не изменилось.
    зашел оперой — увидел наконец над картинками окошко flowplayer. однако так и не понял, что надо делать — при нажатии на любую картинку идет загрузка .flv файла, при нажатии на play а окне плеера вываливается черная полоска с текстом 303: failed to load resource

  3. все понятно. скрипт действительно не работал только в IE.
    в остальных браузерах (chrome, opera) почему-то не работает jQuery UI.

Комментарии закрыты