Главная » Файлы » Прочие скрипты » Яваскрипты

Делаем кроссбраузерный HTML 5 плеер
[ Скачать с сервера (3.5 Kb) ] 10.07.14, 16:08:18



Думаю многие знают как сделать свой плеер на HTML 5 Audio. Информации на эту тему в интернете полно, в этом материале я постараюсь показать как сделать этот плеер кроссбраузерным. Для этого нам понадобится flash(флеш).

Давайте создадим объект нашего плеера и пропишем метод init, который будет вставлять флеш если это необходимо:
Код
var player = {  
swf: '/swf/audio.swf', //ссылка на флеш файл из архива  
el: null  
  };  

  player.init = function(){  
var a = new Audio();//создаем объект HTML 5 Audio  

/*  
Проверяем поддержку браузером нужного нам формата песни(в моем примере проверка поддержки мп3)
Если браузер читает формат MP3 используем html5  
Если нет - флеш
*/  
if(a != null && a.canPlayType && a.canPlayType("audio/mpeg")){  
this.useAudio();  
}  
else{  
this.useFlash();  
}  
  };

Мы создали объект с двумя свойствами: swf - ссылка на флеш файл, el пригодится попозже - и методом init.
Теперь займемся функцией useFlash
Код
player.useFlash = function(){  
//Проверяем наличие флеш-плагина в браузере  
if(!this.hasFlash()){  
/*  
тут можно вывести пользователю предложение скачать флеш плагин
или какое-то предупреждение  
*/  

return;  
}  

var wrap = document.createElement('div');  
wrap.setAttribute("id", "player_flash");  
wrap.style.cssText = 'position:fixed;width:1px;height:1px;top:-1000px;left:-1000px;';  
wrap.innerHTML = '<embed type="application/x-shockwave-flash" id="player_swf" name="player" width="1" height="2" quality="high" flashvars="onError=player.onError&onLoadComplete=player.onLoadComplete&onLoadProgress=player.onLoadProgress&onPlayFinish=player.onPlayFinish&onPlayProgress=player.onPlayProgress" swliveconnect="true" allowscriptaccess="always" wmode="opaque" src="'+this.swf+'">';  

document.body.appendChild(wrap);  

//в свойство нашего объекта записываем элемент embed  
this.el = document.getElementById('player_swf');  
  };  

  //Ф-я проверки поддержки флеш браузером  
  player.hasFlash = function(){  
  if (navigator.plugins && navigator.plugins.length && navigator.plugins['Shockwave Flash']) {  
return true;  
} else if (navigator.mimeTypes && navigator.mimeTypes.length) {  
var mimeType = navigator.mimeTypes['application/x-shockwave-flash'];  
return mimeType && mimeType.enabledPlugin;  
} else {  
try {  
var ax = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');  
return true;  
} catch (e) {}  
}  
return false;  
  };

Теперь разберем строку:
Код
flashvars="onError=player.onError&onLoadComplete=player.onLoadComplete&onLoadProgress=player.onLoadProgress&onPlayFinish=player.onPlayFinish&onPlayProgress=player.onPlayProgress"

Здесь мы прописываем названия функций, которые будут вызваны при наступлении того или иного события.
Событие - ошибка:
Код
onError=player.onError

Код обработчика на жс:
Код
player.onError = function(err){  
alert(err);  
  };


Событие - конец загрузки песни:
Код
onLoadComplete=player.onLoadComplete

Код обработчика на жс:
Код
player.onLoadComplete = function(duration){  
/*  
duration - длина песни в миллисекундах  
*/  
}


Событие - прогрузка песни:
Код
onLoadProgress=player.onLoadProgress

Код обработчика на жс:
Код
player.onLoadProgress = function(loaded, total){  
//формулы для перевода в проценты  
var percent = Math.ceil(loaded / total*100);  
percent = Math.min(100, Math.max(0, percent));  
/*  
можно сообразить прогресс бар  
*/  
  }


Событие - конец воспроизведения:
Код
onPlayFinish=player.onPlayFinish

Код обработчика на жс:
Код
player.onPlayFinish = function(){  
/*  
можно сделать переключение песни или что-нибудь другое  
*/  
  }

Событие - прогресс воспроизведения:
Код
onPlayProgress=player.onPlayProgress

Код обработчика на жс:
Код
player.onPlayProgress = function(currentTime, duration){  
/*  
currentTime - текущее время воспроизведения в миллисекундах  
duration - длина песни  

можно сделать прогресс бар  
*/  
  };


Также существуют методы флеш-элемента. В функции player.useFlash мы флеш-элемент embed записали в свойство el нашего объекта и теперь player.el нам пригодится для работы:
Код
var flash = player.el;//html элемент embed  

flash.loadAudio(url);  
/*  
начинает загрузку песни url  
*/  

flash.playAudio(time);  
/*  
воспроизводит песню  
если передан параметр time, то начинает воспроизведение с временной отметки равной time  
*/  

flash.pauseAudio();  
/*  
ставит аудио на паузу  
*/  

flash.stopAudio();  
/*  
останавливает воспроизведение  
*/  

flash.paused();//проверяет играет ли песня или нет  

flash.setVolume(vol);
/*
  изменяет громкость аудио
  значения должны быть в пределах 0-1
*/

flash.getVolume();
/*
  возвращает громкость воспроизведения
*/

flash.callPlayProgress();  
/*  
вызовет обработчик события воспроизведения  
*/  

flash.callLoadProgress();  
/*  
вызовет обработчик события загрузки  
*/


Надеюсь это хоть немного помогло Вам
Категория: Яваскрипты | Добавил: Lisnes | Теги: Html, кроссбраузерный, плеер, делаем
Просмотров: 1202 | Загрузок: 273 | Комментарии: 5 | Рейтинг: 1.0/5
Всего комментариев: 5
0
Если возникнут проблемы или какие-то вопросы, пишите в ЛС.

0
Не плохо бы демо сделать

0
Я думал, что всё неплохо описал. На днях демкой займусь.

0
Да ты всё хорошо описал:)

0
Спасибо, интересный материал. Сам хотел выложить пару плееров, но не думаю, что они пользуются спросом smile

Имя *:
Email: