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

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


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

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

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

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

вместо

Код 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. }
вставить

Код PHP:
  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 в конце вставить

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

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



со смартфона



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

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

Примечание: - один не большой ньанс, ранее добавленные аудио файлы - отображаются в "старом флеш плеере"((. Но новые, чеканятся и выводятся как надо.
letsgo 8 мая 2015 в 21:30 +1
Молодец Нил. Отличное решение. А для видео?)
Нил™ 8 мая 2015 в 21:32 +1
так видео вставляется в оригинальном ютубовском плеере, а он и так работает на мобильных. Только если мобильная версия сайта имеем смысл в css задать макс ширину в 100%.
letsgo 8 мая 2015 в 22:21 0
зачем ютубовский плеер? Подцепить на uppod и свой брендовый скин. Гораздо лучше ведь.
Нил™ 8 мая 2015 в 23:06 +1
ну uppod хорошо читает ссылки с ютуба вида https://youtu.be/tP_3yOtg3PQ и в принципе можно придумать тег Youtube. Но я не программист так то, просто некоторые вещи мне кажутся понятными) и за основу этого тега, если бы я начал извращаться, я бы взял конструкцию которая используется в аудио, там тоже речь идет о прямой ссылке на медиафайл, которые просто нужно вывести в плеере. но выкладывать это сюда я бы точно не стал)) и вообще предлагаю, подождать, может быть кто нибудь более разбирающийся вдохновится этой темой... и..
А как завернуть iframe youtube или вк в плеер юппод, вообще для меня тёмный лес)

по поводу брендирования плеера, кстати. Я когда появился компонент видео, тоже побежал на юппод, купил премиум, стал себе рисовать крутые (как мне казалось) скины, логотип сайта, ваще круто. Ну как то, наигрался. С выходом новых версий видеокомпонента, мой хостинг перестал соответствовать тех требованиям, и я не обновил компонент до той версии где html5, поэтому ради мобильной версии вообще отказался от своего плеера, вывожу на тех что дают видеохостинги. И с другой стороны мне кажется в этом тоже есть свои плюсы) Да и как то свой плеер для видео от ютуба, мне кажется это как бы подростковый период такой) А потом оскомину сбил и не круто. Свой плеер когда полностью свой сервер и тебе заливают видео. А видео со сторонних, лучше выводить в их плеере, и правообладатели сразу видят куда идти, и я настолько крут, что не стесняюсь показать источник видео) Я даже часто даю ссылки на каналы откуда взял видео, если считаю его каким то эксклюзивом, или считаю что лучше сослаться по другим причинам))) Это мое личное отношение.

А логотип сайта кстати отлично накладывается на любой плеер с помощью png картинки и CSS) У меня на ютуб плеере мой лого))))
letsgo 8 мая 2015 в 23:30 0
1. Конечно неплохо было бы сделать.

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

Но в своё время, я предложил когда сделать псевдо экран на видео, имел в виду, что если видео не требует брендирования, либо хостинг не позволяет транслировать, то лучше таки хотя бы так прикрывать.
Нил™ 9 мая 2015 в 02:19 0
в маркетинговом плане, гораздо больше толку было бы, если бы он (плеер) читался социальными сетями, когда пользователь делится видео с помощью социальной кнопки или копирует ссылку и вставляет в ленту. В это я верю. Кстати одно непродолжительное время было, что когда делился в "ОК" там появлялось что то вроде плеера с постером не из набора картинок имеющихся на странице а именно постер от видео, но само видео не воспроизводилось. Потом быстро это пропало, и теперь когда делишься видео, выглядит также как обычной статьей.
Вот это было бы полезно. А вставить код... вебмастер, носом землю будет рыть, что бы найти другой вариант, но не рекламировать меня, а рядовой юзер, 50% не знает что такое код и куда его вставить, остальные при желании кидают просто ссылку на страницу с роликом в комментах. Я вообще стал убирать код из поделиться. Кому надо берут ссылку.
letsgo 9 мая 2015 в 02:31 -1
Вставляют. Вебмастера себе на сайт под контент. Люди на форумах и платформах общения. В соц сетях, не показывается, ибо там надо поддержку плеера получить от соц сети, но таки вставляется ссылка и далее посетитель может запомнить сайт.

Да и поисковик фиксирует свой плеер, тем более путь не видит к видео из своего плеера. Тоже в плюс. В общем я рекомендую свои плеера ставить.
Human 8 мая 2015 в 21:50 0
Отличное решение! Спасибо! ++++
Майкл 8 мая 2015 в 21:58 0
Что скажут админы?
Human 8 мая 2015 в 23:54 0
Такая проблема. После того как вставил mp3 себе на стену, при просмотре профиля, в самом низу появляется плагин биллинга. Как можно исправить?
Александр 26 мая 2015 в 03:30 0
Спасибо большое интересный очень вариант. только

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