Найти на сайте

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

+25
2.89K
  2. Блоги
  3. html5 плеер для аудио в BBcode редакторе (Первая ветка)
Заинтересовал вопрос поднятый здесь 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 8 лет назад #
Респект и уважуха!!! Нилыч!
- Все работает! Огромное спасибо! Даже добавить нечего: - Как часы швейцарские, работает твое решение!

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

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

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

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

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

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

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

Еще от автора

Капча на сайт или разделы сайта

Капча на сайт или разделы сайта

Если нужно, закрыть весь сайт или некоторые его разделы каптчей.
2
Пинг поисковых систем для первой ветки

Пинг поисковых систем для первой ветки

Небольшая интеграция инструментов для пингования, чтобы сделать его чуть удобнее
8
Генератор карты сайта в формате txt на лету без крона

Генератор карты сайта в формате txt на лету без крона

Вообще то где то тут уже есть вполне рабочие генераторы карты для первой ветки, но этот вариант тоже имеет право быть.
0

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.