phpBB [media] — bbcode для вставки аудио, видео, карт и др. (без правок кода)

Список разделов phpBBex 1.x Мастерская 1.x

Описание: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Модератор: Поддержка

Сообщение #1 VEG » 18.05.2012, 15:39

BBCode: phpBB [audio] | phpBB [video] | phpBB [media] | phpBB [youtube]

Представляем вам новый универсальный BBCode «phpBB [media]». Это два BBCode в одном: [video] и [audio]. Помимо этого он умеет встраивать и другие мультимедийные вещи, такие как: карты, панорамы, фотогалереи и др. Надеемся, вам понравится. Он подходит как для phpBB, так и для phpBBex. Для установки нет необходимости править какие-либо файлы, его можно добавить через раздел администратора.

Примеры использования

Для вставки видео пользователь должен вставить его адрес между [media][/media]:
Код: Выделить всё
[media]http://vimeo.com/40558553[/media]
или (с указанием предпочитаемых размеров):
Код: Выделить всё
[media=640,360]http://vimeo.com/40558553[/media]

В сообщении это отобразится следующим образом:
phpBB [media]


Для вставки аудио пользователь должен вставить его адрес между [media][/media]:
Код: Выделить всё
[media]https://soundcloud.com/to420/kunta_minimal[/media]

В сообщении это отобразится следующим образом:
phpBB [media]


Поддерживаемые сервисы

Поскольку phpBB [media] — это грамотный симбиоз наших [audio] и [video], он будет поддерживать все сервисы, которые предлагают указанные BBCode. Дополнительно phpBB [media] будет поддерживать сервисы, которые к аудио и видео не имеют прямого отношения, но данные из которых удобно встраивать в сообщения (панорамы, фотогалереи, карты и др.).

На данный момент поддерживаются:
  • все сервисы из phpBB [video] (youtube.com, vimeo.com и др.)
  • все сервисы из phpBB [audio] (soundcloud.com, music.yandex.ru и др.)
  • docs.google.com (документы, таблицы и формы; берите ссылку из File » Publish to the web)
  • maps.google.com (карты, панорамы)
  • openstreetmap.org (карты)
  • 360cities.net (панорамы)
  • dermandar.com (панорамы)
  • share.mapbbcode.org (карты с вашими метками на ней)
  • connect.garmin.com (GPS-треки)
  • endomondo.com (маршруты и тренировки)
  • gpsies.com (GPS-треки)
  • bikemap.net (GPS-треки)
  • livegpstracks.com (GPS-треки, поддерживаются только ссылки из кода встраивания)

Установка [media] (с автоматическими размерами)

1. Админка, вкладка «Сообщения», страничка «BBCodes», добавить BBCode (если уже есть [media] — редактировать).
2. В поле «Использование BBCode» введите:
Код: Выделить всё
[media]{URL}[/media]
3. В поле «Замена HTML» введите (вводить без изменений!):
Код: Выделить всё
<div class='bbmedia' data-url='{URL}' style='margin: 1px; display: inline-block; vertical-align: bottom;'><div style='width: 200px; height: 40px; border: 1px solid #999; display: table-cell; text-align: center; vertical-align: middle; font: 10px/10px Verdana; color: #555; opacity: 0.5;'><a style='color: #105289; text-decoration: none;' href='//phpbbex.com/' target='_blank'>phpBB</a> &#91;media&#93;</div><script>if (typeof bbmedia == 'undefined') { bbmedia = true; var e = document.createElement('script'); e.async = true; e.src = '//phpbbex.com/api/bbmedia.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s); }</script></div>
4. В поле «Подсказка» введите:
Код: Выделить всё
Вставить аудио, видео, карту, панораму или другое мультимедиа: [media]http://youtube.com/url[/media]
5. Установите галочку «Показывать на странице ответа» и сохраните форму. Готово!

Установка [media=ширина,высота] (с предпочитаемой шириной и высотой плеера)

1. Админка, вкладка «Сообщения», страничка «BBCodes», добавить BBCode (если уже есть [media=] — редактировать).
2. В поле «Использование BBCode» введите:
Код: Выделить всё
[media={INTTEXT}]{URL}[/media]
3. В поле «Замена HTML» введите (вводить без изменений!):
Код: Выделить всё
<div class='bbmedia' data-url='{URL}' data-args='{INTTEXT}' style='margin: 1px; display: inline-block; vertical-align: bottom;'><div style='width: 200px; height: 40px; border: 1px solid #999; display: table-cell; text-align: center; vertical-align: middle; font: 10px/10px Verdana; color: #555; opacity: 0.5;'><a style='color: #105289; text-decoration: none;' href='//phpbbex.com/' target='_blank'>phpBB</a> &#91;media&#93;</div><script>if (typeof bbmedia == 'undefined') { bbmedia = true; var e = document.createElement('script'); e.async = true; e.src = '//phpbbex.com/api/bbmedia.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s); }</script></div>
4. В поле «Подсказка» введите:
Код: Выделить всё
Вставить аудио, видео, карту, панораму или другое мультимедиа: [media=ширина,высота]http://youtube.com/url[/media]
5. Сохраните форму. Готово!

Независимый js-скрипт на вашем сервере

По умолчанию js-скрипт с базой поддерживаемых сервисов загружается напрямую с phpbbex.com. У этого подхода есть преимущество — для всех форумов используется общая копия js-скрипта в кэше браузера пользователей. Однако, это делает вас в какой-то мере зависимыми от нашего сервера. Если вы хотите, чтобы js-скрипт bbmedia загружался с вашего сервера, воспользуйтесь bbmedia.php. Данный PHP-скрипт автоматически возьмёт самую свежую версию bbmedia.js с сервера phpbbex.com, сохранит копию в каталоге вашего форума, после чего будет отдавать её браузеру ваших пользователей, проверяя не чаще раза в сутки наличие обновлений, что не создаст какой-либо ощутимой нагрузки на ваш сервер. Даже при недоступности phpbbex.com этот скрипт будет просто отдавать сохранённую на вашем сервере копию.

Для установки bbmedia.php просто скачайте bbmedia.php.zip и извлеките содержимое архива в кореневую директорию вашего форума. Далее для всех BBCode из серии bbmedia ([audio], [video], [media]) зайдите в редактирование (Админка, вкладка «Сообщения», страничка «BBCodes») и в поле «Замена HTML» замените подстроку «//phpbbex.com/api/bbmedia.js» на путь к вашему файлу bbmedia.php. Лучше всего указывать путь от слэша! Например, если у вас форум имеет адрес вида «http://example.com/forum/», указывайте такой адрес: «/forum/bbmedia.php». Больше ничего в поле «Замена HTML» менять не нужно.

Для принудительного обновления вашей копии js-скрипта необходимо просто запустить «bbmedia.php?update» (с параметром update). Если вы увидите OK — обновление успешно. Иначе вы увидите сообщение о типе ошибки.

Удаление ссылки из кода

На разработку данного bbcode потрачено много времени, поэтому в наличие ссылки на phpbbex.com в коде обязательно. Эта ссылка видна только в момент загрузки и не мешает пользователям. Если по каким-то причинам вам всё-таки необходимо её убрать, свяжитесь с автором любым удобным для вас способом. Возможность убрать ссылку из кода стоит 20$ для одного форума. Это неплохая возможность материально поддержать дальнейшую разработку данного bbcode.

Не работает?

Отображается стандартная заглушка с надписью phpBB [media] и ничего не происходит
Скорее всего на странице есть какая-то ошибка JavaScript, что прекращает выполнение всех скриптов. Включите консоль разработчика и посмотрите что за ошибка. Если у вас на странице используется jQuery, попробуйте обновить версию на более свежую (1.7 и более новую).

Выдаёт ошибку «Неправильный BBCode»
Проблема в том, что вы изменили предлагаемый код либо это сделала за вас какая-то модификация. Попробуйте по очереди убирать модификации, которые влияют на вывод сообщений и обработку BBCode.

Независимо от предлагаемого URL сообщает, что он не поддерживается
Проблема в том, что ваш форум (например, автоцензор) либо какая-то модификация вмешивается в передаваемые URL. Проверьте настройки автоцензора (чтобы в нём не было частей вставляемого URL) либо установленные модификации для обработки ссылок в сообщениях.

При использовании ссылки на файл с моего сервера ничего не проигрывается
Причины может быть две: либо ваш сервер отдаёт некорректный Content-Type, либо данный формат не поддерживается вашим браузером.
Для того, чтобы ваш сервер Apache отдавал корректный Content-Type, добавьте в .htaccess файл в корне вашего сайта (этот код уже есть в phpBBex):
Код: Выделить всё
AddType audio/ogg   ogg oga
AddType video/ogg   ogv
AddType audio/webm  webma
AddType video/webm  webm webmv
AddType audio/mp4   m4a
AddType video/mp4   mp4 m4v
AddType audio/opus  opus
AddType audio/flac  flac
AddType audio/aac   aac
AddType audio/mpeg  mp1 mp2 mp3 mpg mpeg
AddType audio/wav   wav
Рекомендуем использовать форматы Ogg Vorbis, Opus и WebM. IE также поддерживает WebM при установке соответствующего кодека.

phpBB [media] на других ресурсах

Обсуждение phpBB [media] на phpbbguru.net
Обсуждение phpBB [media] на bb3x.ru
С наилучшими пожеланиями, Евгений
VEG M
Автор темы, Администратор
Аватара
Возраст: 34
Откуда: Минск, Беларусь
Репутация: 1635
С нами: 9 лет 7 месяцев

Сообщение #2 VEG » 18.05.2012, 15:58

Просьба предложения по добавлению поддержку новых аудио и видео сервисов писать в темах соответствующих bbcode. В этой теме обсуждается конкретно phpBB [media] и его особенности, предложения по его расширению, не входящие в зону ответственности [audio] и [video].
P.S. По секрету скажу, что в будущем вас ждёт ещё один небольшой сюрприз :)

Добавлено спустя 1 час 31 минуту 25 секунд:
Добавилась поддержка сервиса dermandar.com, который предназначен для отображения панорам:
Код: Выделить всё
[media]http://www.dermandar.com/p/aagzML/[/media]
phpBB [media]

В phpBB [media] помимо аудио и видео можно будет вставлять также другую мультимедийную информацию.
С наилучшими пожеланиями, Евгений
VEG M
Автор темы, Администратор
Аватара
Возраст: 34
Откуда: Минск, Беларусь
Репутация: 1635
С нами: 9 лет 7 месяцев

Сообщение #3 VEG » 20.05.2012, 20:02

Добавилась поддержка встраивания карт с maps.google.com. Поддерживается ссылка, которая даётся при клике по кнопке получения ссылки. Некоторые URL могут быть не встраиваемыми — Google Maps сообщит вам об этом в окошке со ссылкой.
Пример:
Код: Выделить всё
[media]https://maps.google.com/maps?q=minsk&hl=en&ll=53.903175,27.569933&spn=0.050112,0.131922&sll=37.0625,-95.677068&sspn=67.334709,135.087891&t=h&hnear=Minsk,+Minski+Rayon,+Minsk+Region,+Belarus&z=14[/media]
Отобразится как:
phpBB [media]
С наилучшими пожеланиями, Евгений
VEG M
Автор темы, Администратор
Аватара
Возраст: 34
Откуда: Минск, Беларусь
Репутация: 1635
С нами: 9 лет 7 месяцев

Сообщение #4 JoteRuso » 20.05.2012, 23:41

Что-то никак не могу ни один код с гугл-мэпс заставить отобразиться...
Код: Выделить всё
[media]http://maps.google.ru/maps?q=55.739675,37.615471&hl=ru&ie=UTF8&ll=55.776187,37.619934&spn=0.165675,0.517044&sll=55.739675,37.615471&sspn=0.16583,0.517044&t=h&hnear=%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0&z=12&iwloc=ltrends[/media]

Нажимал вот на эту кнопку, чтобы ссылку получить.
В каком месте ошибся?
Вложения
21-05-2012 0-37-13.jpg
Последний раз редактировалось JoteRuso 16.03.2013, 22:57, всего редактировалось 2 раз(а).
Причина: Удалил встроенную карту (чтобы не грузилось зря)
JoteRuso M
Гуру
Аватара
Откуда: Москва, Россия
Репутация: 536
С нами: 9 лет 7 месяцев

Сообщение #5 Boroda » 20.05.2012, 23:54

А если так:
Код: Выделить всё
[media]http://maps.google.com/maps?q=55.739675,37.615471&hl=ru&ie=UTF8&ll=55.776187,37.619934&spn=0.165675,0.517044&sll=55.739675,37.615471&sspn=0.16583,0.517044&t=h&hnear=%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0&z=12&iwloc=ltrends[/media]

maps.google.ru не поддерживается. Меняйте на .com или ждать поддержки. :)
Последний раз редактировалось Boroda 16.03.2013, 22:57, всего редактировалось 2 раз(а).
Причина: Удалил встроенную карту (чтобы не грузилось зря)
Boroda M
Мастер
Возраст: 46
Репутация: 38
С нами: 9 лет 6 месяцев

Сообщение #6 VEG » 21.05.2012, 00:20

JoteRuso, вы делали всё правильно. Это я забыл, что у Google доменов куча, и нужно поддерживать домены, отличные от .com :) Исправлено.
С наилучшими пожеланиями, Евгений
VEG M
Автор темы, Администратор
Аватара
Возраст: 34
Откуда: Минск, Беларусь
Репутация: 1635
С нами: 9 лет 7 месяцев

Сообщение #7 JoteRuso » 21.05.2012, 23:37

VEG, подскажите, пожалуйста - является ли код [media][/media] полноценной заменой кодов аудио и видео?

Вопрос возник вот почему:
Если использовать теги [audio][/audio] для указанной Вами ссылки (в теме про аудио-код) на Яндекс-music, то отображается нормальный аудио-плеер.
Код: Выделить всё
[audio]http://video.yandex.ru/iframe/vrubleg/sfwlg00z0s.3525/[/audio]
phpBB [audio]


Если же ту же самую ссылку поместить между тегами [media][/media], то получится вот это:
Код: Выделить всё
[media]http://video.yandex.ru/iframe/vrubleg/sfwlg00z0s.3525/[/media]
phpBB [media]


Это так и должно быть?
JoteRuso M
Гуру
Аватара
Откуда: Москва, Россия
Репутация: 536
С нами: 9 лет 7 месяцев

Сообщение #8 VEG » 21.05.2012, 23:49

JoteRuso, у Яндекса просто ссылка что на аудио, что на видео — одинаковые, отличаются только размером плеера. Поэтому при использовании [media] последний отдаёт предпочтение размерам видео (потому что аудио и так и так работает, а видео в маленьком плеере не посмотришь). Из всех поддерживаемых сервисов это пока что единственный спорный.
Чтобы подсказать [media] то, что это аудио, сейчас можно добавить в конец URL ?bbaudio (если не сработало — очистите кэш, фича новая):
Код: Выделить всё
[media]http://video.yandex.ru/iframe/vrubleg/sfwlg00z0s.3525/?bbaudio[/media]
И он обработает ссылку как аудио. Позже появится возможность указывать предпочитаемый тип медиа в параметрах bbcode, типа [media=audio] или [media=320,240,audio].
С наилучшими пожеланиями, Евгений
VEG M
Автор темы, Администратор
Аватара
Возраст: 34
Откуда: Минск, Беларусь
Репутация: 1635
С нами: 9 лет 7 месяцев

Сообщение #9 VEG » 22.05.2012, 19:39

Внимание! Обновился [media=ширина,высота] (с предпочитаемой шириной и высотой плеера). Его нужно обновить вручную в админке.
Новая возможность: при вставке можно указать только ширину. В старом коде даже если вы вставляете аудио, вы должны были указать и высоту. В новом коде это не обязательно. Если высота не указана, она вычисляется автоматически с соотношением сторон 16:9 для видео и по высоте аудиоплеера для аудио.
С наилучшими пожеланиями, Евгений
VEG M
Автор темы, Администратор
Аватара
Возраст: 34
Откуда: Минск, Беларусь
Репутация: 1635
С нами: 9 лет 7 месяцев

Сообщение #10 unk04 » 22.05.2012, 22:47

Изображение
unk04 M
Новичок
Аватара
Репутация: 3
С нами: 9 лет 7 месяцев

Сообщение #11 VEG » 23.05.2012, 15:45

Удаление ссылки из кода

На разработку данного bbcode потрачено много времени, поэтому в наличие ссылки на phpbbex.com в коде обязательно. Эта ссылка видна только в момент загрузки и не мешает пользователям. Если по каким-то причинам вам всё-таки необходимо её убрать, свяжитесь с автором любым удобным для вас способом. Возможность убрать ссылку из кода стоит 10$ для одного форума. Это неплохая возможность материально поддержать дальнейшую разработку данного bbcode.
С наилучшими пожеланиями, Евгений
VEG M
Автор темы, Администратор
Аватара
Возраст: 34
Откуда: Минск, Беларусь
Репутация: 1635
С нами: 9 лет 7 месяцев

Сообщение #12 VEG » 24.05.2012, 17:13

Появились темы ббкодов [media] на phpbb.com: http://www.phpbb.com/community/viewtopic.php?f=70&t=2156588
Если вы зарегистрированы на phpbb.com, просьба оставить отзыв об этих bbcode для иностранных любителей phpBB.
С наилучшими пожеланиями, Евгений
VEG M
Автор темы, Администратор
Аватара
Возраст: 34
Откуда: Минск, Беларусь
Репутация: 1635
С нами: 9 лет 7 месяцев

Сообщение #13 VEG » 27.05.2012, 13:12

Пара новшеств:
1. [media] для yapfiles.ru отличает аудио от видео по параметру allowfullscreen (он подставляется только для видео)
2. На случай, если yapfiles.ru перестанет добавлять этот параметр, можно вручную добавлять параметр bbaudio или bbvideo (в зависимости от того, как это надо обработать)
С наилучшими пожеланиями, Евгений
VEG M
Автор темы, Администратор
Аватара
Возраст: 34
Откуда: Минск, Беларусь
Репутация: 1635
С нами: 9 лет 7 месяцев

Сообщение #14 Pilot74 » 31.05.2012, 08:18

Почему то не работает данный BB код. Показывает вот это:
Изображение

Сам BB код:
Изображение

Пользуюсь этим хостингом: www.ayola.net
Проверил на локальном сервере и на другом бесплатном хостинге, все нормально работает. Как сделать чтобы и на ayola заработало?
Pilot74
Новичок
Репутация: 0
С нами: 9 лет 6 месяцев

Сообщение #15 VEG » 31.05.2012, 08:53

Pilot74, дайте ссылку на страницу с сообщением, где выбивается эта ошибка — посмотрю в чём дело.
С наилучшими пожеланиями, Евгений
VEG M
Автор темы, Администратор
Аватара
Возраст: 34
Откуда: Минск, Беларусь
Репутация: 1635
С нами: 9 лет 7 месяцев

Сообщение #16 Pilot74 » 31.05.2012, 09:38

VEG:Pilot74, дайте ссылку на страницу с сообщением, где выбивается эта ошибка — посмотрю в чём дело.

Вот http://btgsworld.ts6.ru/viewtopic.php?f=37&t=154
Pilot74
Новичок
Репутация: 0
С нами: 9 лет 6 месяцев

Сообщение #17 Marques » 01.06.2012, 01:04

Спасибо за ваши разработки ! Все работает отлично !
Marques M
Новичок
Аватара
Возраст: 45
Откуда: Санкт-Петербург
Репутация: 3
С нами: 9 лет 6 месяцев

Сообщение #18 VEG » 02.06.2012, 20:22

Автоматически вычисляемые размеры подгоняются под размер 16:9, но с умом: для youtube.com, например, добавляется 30 пикселей по высоте, чтобы сразу отображались кнопки управления (иначе он их скрывает). Если указать только один размер (например, ширину) — высота будет вычислена автоматически. Если указать только высоту (пример: [media=,460]) — ширина будет вычислена автоматически. Для [video] поведение аналогично. Если в размерах по умолчанию (в style) указать только высоту блока — ширина будет также вычислена автоматически. Для случаев, где плеер сервиса не поддерживает заданные размеры, система устанавливает размеры по умолчанию для данного плеера.
С наилучшими пожеланиями, Евгений
VEG M
Автор темы, Администратор
Аватара
Возраст: 34
Откуда: Минск, Беларусь
Репутация: 1635
С нами: 9 лет 7 месяцев

Сообщение #19 VEG » 06.06.2012, 16:39

При использовании нового кода вставки [media=ширина,высота] теперь можно последним параметром указывать тип ссылки: audio или video. Полезно в случаях, когда по ссылке невозможно определить тип мультимедиа. Если указать тип audio, то [media] будет вести себя так же, как и [audio] (то есть, видео и карты не будут рассматриваться). Если указать тип video, то [media] будет вести себя в точности как [video].
Пример без указания размеров для аудио:
Код: Выделить всё
[media=audio]http://video.yandex.ru/iframe/vrubleg/sfwlg00z0s.3525/[/media]
Пример с указанием ширины для аудио:
Код: Выделить всё
[media=640,audio]http://video.yandex.ru/iframe/vrubleg/sfwlg00z0s.3525/[/media]
Пример с указанием ширины и высоты для видео:
Код: Выделить всё
[media=640,480,video]http://video.yandex.ru/iframe/vrubleg/tnxt4a0q15.3514/[/media]
Попытка же вставить карту с типом video вызовет ошибку:
Код: Выделить всё
[media=video]https://maps.google.com/maps?q=minsk&hl=en&ll=53.903175,27.569933&spn=0.050112,0.131922&sll=37.0625,-95.677068&sspn=67.334709,135.087891&t=h&hnear=Minsk,+Minski+Rayon,+Minsk+Region,+Belarus&z=14[/media]
С наилучшими пожеланиями, Евгений
VEG M
Автор темы, Администратор
Аватара
Возраст: 34
Откуда: Минск, Беларусь
Репутация: 1635
С нами: 9 лет 7 месяцев

Сообщение #20 VEG » 10.06.2012, 19:57

Независимый js-скрипт на вашем сервере

По умолчанию js-скрипт с базой поддерживаемых сервисов загружается напрямую с phpbbex.com. У этого подхода есть преимущество — для всех форумов используется общая копия js-скрипта в кэше браузера пользователей. Однако, это делает вас в какой-то мере зависимыми от нашего сервера. Если вы хотите, чтобы js-скрипт bbmedia загружался с вашего сервера, воспользуйтесь bbmedia.php. Данный PHP-скрипт автоматически возьмёт самую свежую версию bbmedia.js с сервера phpbbex.com, сохранит копию в каталоге вашего форума, после чего будет отдавать её браузеру ваших пользователей, проверяя не чаще раза в сутки наличие обновлений, что не создаст какой-либо ощутимой нагрузки на ваш сервер. Даже при недоступности phpbbex.com этот скрипт будет просто отдавать сохранённую на вашем сервере копию.

Для установки bbmedia.php просто скачайте bbmedia.php.zip и извлеките содержимое архива в кореневую директорию вашего форума. Далее для всех BBCode из серии bbmedia ([audio], [video], [media]) зайдите в редактирование (Админка, вкладка «Сообщения», страничка «BBCodes») и в поле «Замена HTML» замените подстроку «http://phpbbex.com/api/bbmedia.js» на путь к вашему файлу bbmedia.php. Лучше всего указывать путь от слэша! Например, если у вас форум имеет адрес вида «http://example.com/forum/», указывайте такой адрес: «/forum/bbmedia.php». Больше ничего в поле «Замена HTML» менять не нужно.

Для принудительного обновления вашей копии js-скрипта необходимо просто запустить «bbmedia.php?update» (с параметром update). Если вы увидите OK — обновление успешно. Иначе вы увидите сообщение о типе ошибки.
С наилучшими пожеланиями, Евгений
VEG M
Автор темы, Администратор
Аватара
Возраст: 34
Откуда: Минск, Беларусь
Репутация: 1635
С нами: 9 лет 7 месяцев

След.

Вернуться в Мастерская 1.x