Главная » Файлы » Прочие скрипты » Яваскрипты |
Делаем кроссбраузерный 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(); /* вызовет обработчик события загрузки */ Надеюсь это хоть немного помогло Вам | |
Просмотров: 1202 | Загрузок: 273 | Комментарии: 5 | |
Всего комментариев: 5 | ||||||
| ||||||