html5 плеер для аудио в BBcode редакторе (Первая ветка)

+25
3.4K
Заинтересовал вопрос поднятый здесь instantcms.ru/forum/thread21646-1.html о том что, что mp3 файлы вставляемые в блогах, комментариях, на стене, на форуме (где используется бб код) не воспроизводятся на мобильных.


Решил поправить.

Для тех кто сам не может решить вопрос, но хотел бы, рецепт такой.
в файле template.php в шапке, где то после

  1. // Подключаем стили шаблона
  2. $this->addHeadCSS('templates/'.TEMPLATE.'/css/styles.css');
вставить это:

  1. // Подключаем uppod html5 аудио плеер
  2. $this->addHeadJS('includes/uppodhtml5.js');
в файле /includes/bbcode/bbcode.lib.php

вместо

  1. // Функция - обработчик тега [audio]
  2. function audio_2html($elem) {
  3. $str = '<div class="bb_tag_audio">';
  4. $str .= '<object type="application/x-shockwave-flash" data="/includes/bbcode/player_mp3_mini.swf" width="200" height="20">
  5. <param name="movie" value="/includes/bbcode/player_mp3_mini.swf"></param>
  6. <param name="bgcolor" value="#666666"></param>
  7. <param name="loadingcolor" value="#FFFFFF"></param>
  8. <param name="buttoncolor" value="#000000"></param>
  9. <param name="slidercolor" value="#333333"></param>
  10. <param name="FlashVars" value="mp3='.$this->cleanAttrValue($elem['val'][0]['str']).'"></param>
  11. </object>';
  12. $str .= '</div>';
  13. return $str;
  14. }
вставить

  1. // Функция - обработчик тега [audio]
  2. function audio_2html($elem) {
  3. $str = '<div class="bb_tag_audio">';
  4. $str ='<div class="mp3player" id="audioplayer'.$this->cleanAttrValue($elem['val'][0]['str']).'"></div><script type="text/javascript">this.player = new Uppod({m:"audio",uid:"audioplayer'.$this->cleanAttrValue($elem['val'][0]['str']).'",file:"'.$this->cleanAttrValue($elem['val'][0]['str']).'"});</script>';
  5. $str .= '</div>';
  6. return $str;
  7. }
в файле стилей styles.css в конце вставить

  1. .mp3player{
  2. width:300px;
  3. max-width:100%;
  4. height:30px;
  5. box-shadow:3px 3px 3px silver;
  6. border:1px solid #036;}
Сам файл плеера instantcms.ru/users/files/download5239.html извлечь из архива и поместить в директорию /includes/

Результат такой
с компьютера

Иллюстрация

со смартфона

Иллюстрация

у меня воспроизводится нормально.

Вроде ничего не забыл. Идеи по улучшению — принимаются)
0
Niclav.C Niclav.C 11 лет назад #
Респект и уважуха!!! Нилыч!
- Все работает! Огромное спасибо! Даже добавить нечего: - Как часы швейцарские, работает твое решение!

Примечание: - один не большой ньанс, ранее добавленные аудио файлы - отображаются в "старом флеш плеере"((. Но новые, чеканятся и выводятся как надо.
+1
letsgo letsgo 11 лет назад #
Молодец Нил. Отличное решение. А для видео?)
Нил™ Нил™ 11 лет назад #
Комментарий удален
0
letsgo letsgo 11 лет назад #
зачем ютубовский плеер? Подцепить на uppod и свой брендовый скин. Гораздо лучше ведь.
Нил™ Нил™ 11 лет назад #
Комментарий удален
0
letsgo letsgo 11 лет назад #
1. Конечно неплохо было бы сделать.

По поводу брендирования. Элементарная вещь: включил посетитель видео, увидел ютуб, перешёл туда и всё. Второй момент - досмотрел до конца на сайте и перешёл на другие видео на ютуб. Третий момент - на сайте видео в своём плеере (не крутом а просто плеере удобном) с лого и ссылкой на свой сайт. 4 момент - вставка видео на другие сайты, тоже плюс сайту. Очевидно, что не теряются посетители, смотрят видео на сайте, больше к сайту доверия и желания зайти снова. То есть это не детская болезнь а необходимость, особенно в условиях конкуренции на рынке сайтостроения.

Но в своё время, я предложил когда сделать псевдо экран на видео, имел в виду, что если видео не требует брендирования, либо хостинг не позволяет транслировать, то лучше таки хотя бы так прикрывать.
Нил™ Нил™ 11 лет назад #
Комментарий удален
-1
letsgo letsgo 11 лет назад #
Вставляют. Вебмастера себе на сайт под контент. Люди на форумах и платформах общения. В соц сетях, не показывается, ибо там надо поддержку плеера получить от соц сети, но таки вставляется ссылка и далее посетитель может запомнить сайт.

Да и поисковик фиксирует свой плеер, тем более путь не видит к видео из своего плеера. Тоже в плюс. В общем я рекомендую свои плеера ставить.
0
Human Human 11 лет назад #
Отличное решение! Спасибо! ++++
0
Майкл Майкл 11 лет назад #
Что скажут админы?
0
Human Human 11 лет назад #
Такая проблема. После того как вставил mp3 себе на стену, при просмотре профиля, в самом низу появляется плагин биллинга. Как можно исправить?
0
Александр Александр 11 лет назад #
Спасибо большое интересный очень вариант. только

А как быть с лентой активности? в ней выпадает код объекта
что визуально не очень радует
Код PHP:
  1. this.player = new Uppod({m:"audio",uid:"audioplayerhttp://d.topmusic.uz/new/singles/vol26/artur_p

Еще от автора

Капча на сайт или разделы сайта
Если нужно, закрыть весь сайт или некоторые его разделы каптчей.
Пинг поисковых систем для первой ветки
Небольшая интеграция инструментов для пингования, чтобы сделать его чуть удобнее
Генератор карты сайта в формате txt на лету без крона
Вообще то где то тут уже есть вполне рабочие генераторы карты для первой ветки, но этот вариант тоже имеет право быть.
🍪Мы используем файлы cookie для работы сайта. Читать подробнее.