0 Пользователей и 1 Гость просматривают эту тему.
  • 5 Ответов
  • 6183 Просмотров
*

Langoliers

  • Давно я тут
  • 621
  • 67 / 2
  • Если б Я изучал людей, то был бы паразитологом
HTML5 Player
« : 17.01.2012, 16:45:53 »
Приветствую! Уже давно я нашел бесплатный аудио плеер - http://www.speakker.com
Это не расширение для Joomla - это просто скрипт плеера на HTML5 и JQuery.
Но он прекрасно подойдет к любому сайту, так как прилипает к нижней части сайта.
Воспроизводит mp3 и ogg файлы.
Скачать можно с официального сайта.
Но я взял на себя смелость и немного изменил плеер, а так же разобрался с организацией плей листа, на что признаться потратил больше всего времени.
Вкратце:
- русифицировал кнопки соц сетей
- убрал нижнюю полосу, содержащую ссылку на сайт разработчика (не беспокойтесь ссылка осталась в коде, так что я пиратством не занимался)
- убрал не функционирующую ссылку загрузки файлов. (она предлагала загрузить файл плей листа)
Скриншот моей, измененной версии плеера:
Спойлер
[свернуть]
Итак, для создания плей листа большого плеера нам нужно создать вот такой php файл:
Спойлер
[свернуть]
Что есть что думаю понятно. Тип файла, заголовок (да, нужно вводить вручную, т.к. плеер не поддерживает теги к сожалению) и обложка.
Для того чтобы вывести большой плеер нам нужно вставить следующий код, предварительно разместив файлы плеера в index.php:
Код
<script type="text/javascript">
$(document).ready(function() {
    $().speakker({
        file: 'myplaylist.php',
        playlist: true,
        theme: 'light',
    });
});
</script>
Здесь настраиваются различные параметры, такие как тема, включение отключение плейлиста, а так же поддерживаются ссылки на википедию. Прочитать подробнее можно здесь.
Файлы необходимые для работоспособности плеера в архиве. Я думаю разобраться будет не сложно.
Цитировать
<script type="text/javascript" src="speakker/jquery.min.js"></script>
<link rel="stylesheet" href="css/speakker.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/mspeakker.css" type="text/css" media="screen">
<script type="text/javascript" src="js/projekktor.min.js"></script>
<script type="text/javascript" src="js/speakker.min.js"></script>
Для изменения текста выводимого в Твиттер и Фейсбук при "расшаривании" нужно исправить код в файле speakker.min.js  а именно:
Цитировать
d={plugins:((b.length>0)?["Display","Controlbar","Share"]:["Display","Controlbar","Share","Schedule"]),height:false,width:false,controls:true,continuous:true,poster:c.poster,enableFullscreen:false,plugin_share:{links:[{domId:"twitter",text:"I like new tracks.",code:"http://twitter.com/share?url={pageurl}&text={text}&via=yazow"},{domId:"facebook",text:"I like new tracks",code:"http://www.facebook.com/sharer.php?u={pageurl}&t={text}"}
после текста выводимого в твиттер можно вывести параметр "с помощью" я вывел свой твиттер, измините или уберите данный параметр &via=yazow
Скачать мою версию аудио плеера
« Последнее редактирование: 30.05.2012, 12:37:09 от Langoliers »
*

tefun

  • Живу я здесь
  • 2540
  • 130 / 1
  • Легче всего обмануть себя
Re: HTML5 Player
« Ответ #1 : 30.05.2012, 17:41:13 »
классная идея, вообще оч много фишек на jquery можно прицепить на joomla
на ruseller есть тоже муз. плееры
Langoliers +, красавелла *DRINK*
даже сам факт адаптации, оч приятен *DRINK*

и эта, вот видео по плееру нашел, саааамый простой
я так понимаю html5 имеет оч крутые возможности
то что постится на фОруме, не вырубается тапОрами
_______________________________________________
Мысли и женщины вместе не приходят М.Ж.
*

Langoliers

  • Давно я тут
  • 621
  • 67 / 2
  • Если б Я изучал людей, то был бы паразитологом
Re: HTML5 Player
« Ответ #2 : 30.05.2012, 19:19:04 »
классная идея, вообще оч много фишек на jquery можно прицепить на joomla
Вот думаю разобрать на части обновленную версию плеера и вывести его во фрейм... На след неделе займусь.
Цитировать
я так понимаю html5 имеет оч крутые возможности
Замена Flash более чем достойная.
*

anatolyz

  • Новичок
  • 3
  • 0 / 0
Re: HTML5 Player
« Ответ #3 : 17.06.2012, 12:59:41 »
Может кому-то пригодится.
Встроить HTML5 плеер можно используя следующий код.

<html>
<body><center>
<p>HTML5 Видео пример</p>
<video src=» » width=»640″ height=»360″ controls=»controls»></video>
</body>
</html>

Пример взял со страницы: http://itmultimedia.ru/html5-i-multimedia/
*

Langoliers

  • Давно я тут
  • 621
  • 67 / 2
  • Если б Я изучал людей, то был бы паразитологом
Re: HTML5 Player
« Ответ #4 : 17.06.2012, 16:42:05 »
Видео, на мой взгляд, гораздо выгоднее и удобнее загружать на YouTube и вставлять код видео уже с сервиса...
*

Феликс

  • Новичок
  • 6
  • 0 / 0
Re: HTML5 Player
« Ответ #5 : 07.10.2012, 12:00:35 »
Langoliers, дай пож-та корректную ссылку на твой адаптированный вариант!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться