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

Board index phpBBex 1.x Мастерская

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

Post #1by 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]:
Code: Select all
[media]http://vimeo.com/40558553[/media]
или (с указанием предпочитаемых размеров):
Code: Select all
[media=640,360]http://vimeo.com/40558553[/media]

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


Для вставки аудио пользователь должен вставить его адрес между [media][/media]:
Code: Select all
[media]http://pleer.com/tracks/4796774kBZr[/media]

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


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

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

На данный момент поддерживаются:
  • все сервисы из phpBB [video] (youtube.com, vimeo.com, rutube.ru, vk.com и др.)
  • все сервисы из phpBB [audio] (soundcloud.com, muzebra.com, pleer.com и др.)
  • docs.google.com (документы, таблицы и формы; берите ссылку из File » Publish to the web)
  • maps.google.com (карты, панорамы)
  • openstreetmap.org (карты)
  • 360cities.net (панорамы)
  • picasaweb.google.com (слайдшоу из галерей)
  • 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» введите:
Code: Select all
[media]{URL}[/media]
3. В поле «Замена HTML» введите (вводить без изменений!):
Code: Select all
<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='http://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 = 'http://phpbbex.com/api/bbmedia.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s); }</script></div>
4. В поле «Подсказка» введите:
Code: Select all
Вставить аудио, видео, карту, панораму или другое мультимедиа: [media]http://youtube.com/url[/media]
5. Установите галочку «Показывать на странице ответа» и сохраните форму. Готово!

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

1. Админка, вкладка «Сообщения», страничка «BBCodes», добавить BBCode (если уже есть [media=] — редактировать).
2. В поле «Использование BBCode» введите:
Code: Select all
[media={INTTEXT}]{URL}[/media]
3. В поле «Замена HTML» введите (вводить без изменений!):
Code: Select all
<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='http://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 = 'http://phpbbex.com/api/bbmedia.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s); }</script></div>
4. В поле «Подсказка» введите:
Code: Select all
Вставить аудио, видео, карту, панораму или другое мультимедиа: [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» замените подстроку «http://phpbbex.com/api/bbmedia.js» на путь к вашему файлу bbmedia.php. Лучше всего указывать путь от слэша! Например, если у вас форум имеет адрес вида «http://example.com/forum/», указывайте такой адрес: «/forum/bbmedia.php». Больше ничего в поле «Замена HTML» менять не нужно.

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

Использование на сайтах с поддержкой HTTPS

При работе сайта с использованием безопасного протокола HTTPS скрипт не работает, так как по умолчанию браузеры блокируют смешанное содержимое.
Вам необходимо произвести локальную установку скрипта по инструкции выше, либо использовать адрес «https://sumanai.ru/api/bbmedia.php» взамен стандартного «http://phpbbex.com/api/bbmedia.js».

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

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

Не работает?

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

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

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

При использовании ссылки на файл с моего сервера ничего не проигрывается
Причины может быть две: либо ваш сервер отдаёт некорректный Content-Type, либо данный формат не поддерживается вашим браузером.
Для того, чтобы ваш сервер Apache отдавал корректный Content-Type, добавьте в .htaccess файл в корне вашего сайта (этот код уже есть в phpBBex):
Code: Select all
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
Учтите, что Firefox и Opera не поддерживают форматы MP3, MP4 и AAC. Зато Firefox, Opera и Chrome поддерживают форматы Ogg Vorbis и WebM. IE также поддерживает WebM при установке соответствующего кодека.

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

Обсуждение phpBB [media] на phpbbguru.net
Обсуждение phpBB [media] на bb3x.ru
С наилучшими пожеланиями, Евгений
VEG M
Topic author, Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 9 months


Post #201by Gravi » 29.03.2014, 19:29

ссылки типо http://www.audiopoisk.com/files/no/*.mp3 не принимает (появляется плеер, ничего не нажимается)
Gravi M
Бывалый
Avatar
Age: 31
Reputation: 7
With us: 3 yaers 10 months

Post #202by Sumanai » 29.03.2014, 19:40

Само собой. Пользовательское соглашение не читали?
2. Настоящими Правилами, НА САЙТЕ ЗАПРЕЩАЕТСЯ:
2.2. Использовать автоматизированные скрипты (программы) для сбора информации и(или) взаимодействия с Сайтом и его сервисами.
3. Кроме случаев, установленных настоящими Правилами, а также действующим законодательством Российской Федерации, никакой Контент не может быть переработан, распространен, отображен во фрейме, опубликован, передан, продан или иным способом использован целиком или по частям.
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M Online
Гуру
Avatar
Reputation: 1616
With us: 4 yaers 11 months

Post #203by cefp » 30.03.2014, 17:23

Какую именно?
Вот текст ошибки:
Code: Select all
Uncaught TypeError: Cannot read property 'left' of undefined m.im.js:750
$sn.im._scrollable m.im.js:750
$sn.im._resize m.im.js:843
$sn.im.init m.im.js:78
(anonymous function) viewtopic.php?f=9&t=4140&start=20:239
l jquery-1.8.3.min.js:2
c.fireWith jquery-1.8.3.min.js:2
v.extend.ready jquery-1.8.3.min.js:2
A jquery-1.8.3.min.js:2

Вот фрагмент кода, который вызывает эту ошибку, ума не приложу как исправить.
Code: Select all
/**
       * Moving opened chatboxes
       * @param {Integer} m
       * @property  0 Start
       * @property  1 Move right
       * @property  2 Move left
       * @property 10 Close/destroy chatbox
       * @property 20 Create chatbox
       */
      _scrollable: function(m) {
         if ($('.sn-im-dockWrapper').is('[style]')) {
            return;
         }

         var $nav = $('#sn-im-chatBoxes');
         var Calc = totalWidth = 0;
         var dWoffset = $('.sn-im-dockWrapper').offset();
         var dWright = $('body').width() - dWoffset.left - $('.sn-im-dockWrapper').outerWidth();

         totalWidth = $('body').width() - ($sn.rtl ? dWoffset.left : dWright) - parseInt($('#sn-im-online').outerWidth(true)) - parseInt($('.sn-im-nav.sn-im-prev').outerWidth(true));

Added after 9 minutes 50 seconds:
Вот этот текст
Code: Select all
Cannot read property 'left'
судя по всему говорит о том что скрипт не может определить какую-то переменную, может быть отступ. Эта ошибка возникает у незарегистрированных пользователей. Для них блок чата даже не отображается, поэтому скрипт вовсе не должен бы определять геометрические переменные. Ошибка в моде соцсети, для которого не оказывают поддержку, поэтому обращаюсь к Вам.
cefp
Гость

Post #204by VEG » 30.03.2014, 18:57

cefp, это явно не ошибка со стороны BB [media] и не ошибка в стандартном коде phpBB/phpBBex. Ищите откуда взялся этот код (похоже, что какой-то чат-бокс) и обращайтесь к автору за исправлениями. Или просто удалите мод, вызывающий конфликт.
С наилучшими пожеланиями, Евгений
VEG M
Topic author, Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 9 months

Post #205by cefp » 01.04.2014, 09:53

Отключил мод, который вызывает ошибки. После этого ошибки перестали появляться. Видео стало нормально работать в гуглхроме, опере, файерфоксе. В експлорере видео не показывает. Вместо видео текст в черном прямоугольнике "Извините, этот URL не поддерживается". Что делать?

Added after 11 minutes 34 seconds:
Единственное что заметил, гуглхром на страницах где есть видео выдает предупреждение:
Code: Select all
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
Это предупреждение относится к файлу на стороннем сайте:
Code: Select all
http://s.ytimg.com/yts/jsbin/www-embed-player-vflHRHtFs.js
На страницах, где не вставлял видео, такого предупреждения нет. Файерфокс не выдает предупреждение.
cefp
Гость

Post #206by VEG » 01.04.2014, 11:01

cefp, может быть, вы устанавливали какой-нибудь мод, который прячет ссылки от гостей или как-то иначе взаимодействует со ссылками?
С наилучшими пожеланиями, Евгений
VEG M
Topic author, Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 9 months

Post #207by cefp » 01.04.2014, 15:17

VEG, да, мод Prime Links, он закрывает ссылки от индексации.
cefp
Гость

Post #208by VEG » 01.04.2014, 17:00

cefp, попробуйте повторно вставить HTML код замены BB [media] не внося никаких правок. Если не поможет, предоставьте используемую версию Prime Links — изучу код.
С наилучшими пожеланиями, Евгений
VEG M
Topic author, Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 9 months

Post #209by cefp » 02.04.2014, 19:36

Случайно по ошибке вместо кода, позволяющего пользователю самому выбирать размеры видео, поставил код с видео с автоматическим подбором размера. Вместо видео появился текст:
Code: Select all
Для воспроизведения видео требуется браузер с поддержкой HTML5 или Adobe Flash.
Загрузить последнюю версию проигрывателя Flash.
Подробнее о переходе на браузер с поддержкой HTML5...
Ссылка ведет на сайт ютуба. Там предлагают переход на html5.
Не стал ни чего устанавливать. Открыл видео на сайте ютуба. Он сначала загрузил всю страницу, потом показал видео.
Нажатие кнопки перехода на html 5, не помогло.
Потом поставил html код для проигрывателя с размерами видео, задаваемыми пользователем. Вернулся прежний текст:
Code: Select all
Извините, этот URL не поддерживается

Мод Prime Links версия 1.2.4
cefp
Гость

Post #210by VEG » 02.04.2014, 20:31

cefp wrote:Мод Prime Links версия 1.2.4
С этой версией, если не ошибаюсь, должно работать. Дайте ссылку на страницу с плеером, где проявляется проблема. Кстати, какая версия IE? Попробуйте последовать такому совету.
С наилучшими пожеланиями, Евгений
VEG M
Topic author, Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 9 months

Post #211by VEG » 03.04.2014, 15:49

Сегодня вышло обновление BB [media], которое позволяет скрипту корректно работать при динамичной вставке плеера через AJAX. Актуально на некоторых форумах с предпросмотром на AJAX. Реализовано при помощи MutationObserver.
С наилучшими пожеланиями, Евгений
VEG M
Topic author, Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 9 months

Post #212by cefp » 04.04.2014, 09:45

Спасибо, проблема решена, у меня тоже стояло:
Code: Select all
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
cefp
Гость

Post #213by mfana » 08.04.2014, 23:06

А планируется ли поддержка Openstreetmap? Или там ЯндексКарт?
mfana M
Бывалый
Avatar
Age: 36
Location: ХМАО
Reputation: 16
With us: 3 yaers 9 months

Post #214by VEG » 08.04.2014, 23:41

Если они умеют встраиваться через iframe — то добавить можно. Яндекс.Карты, на сколько я помню, такой возможности не имеют. Openstreetmap не смотрел пока.
С наилучшими пожеланиями, Евгений
VEG M
Topic author, Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 9 months

Post #215by mfana » 09.04.2014, 01:11

Openstreetmap может
mfana M
Бывалый
Avatar
Age: 36
Location: ХМАО
Reputation: 16
With us: 3 yaers 9 months

Post #216by VEG » 09.04.2014, 11:20

mfana, попробовал, как понимаю, для получения ссылки нужно нажимать «Экспорт». Получил ссылку, но по ней пустая страница. Возможно, временные проблемы, попробую повторно позднее.

Added after 2 minutes 12 seconds:
А нет, нашёл отдельную кнопку для получения кода встраивания. В ближайшее время постараюсь добавить поддержку Openstreetmap в BB [media]. Нужно будет только разобраться с форматом ссылок и подстановкой необходимых данных из URL страницы.
С наилучшими пожеланиями, Евгений
VEG M
Topic author, Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 9 months

Post #217by mfana » 09.04.2014, 12:14

VEG, очень большое спасибо, даже независимо от будущего результата. :smile:
mfana M
Бывалый
Avatar
Age: 36
Location: ХМАО
Reputation: 16
With us: 3 yaers 9 months

Post #218by VEG » 09.04.2014, 20:27

Добавлена частичная поддержка openstreetmap.org — можно встраивать по ссылкам из кода встраивания и по ссылке, которую выдаёт система при нажатии на кнопку «Экспорт». Поддерживается смена слоёв и маркер. Примеры:
Code: Select all
[media]http://api.openstreetmap.org/api/0.6/map?bbox=27.4202,53.8497,27.6893,53.9519[/media]
[media]http://www.openstreetmap.org/export/embed.html?bbox=27.36007690429687%2C53.849691304328914%2C27.646408081054688%2C53.95194406133858&amp;layer=mapnik&amp;marker=53.900848964986324%2C27.50324249267578[/media]

Добавить поддержку URL страницы из обычного просмотра несколько сложнее — нужно конвертировать зум и координаты центра в видимую область. Как появится свободное время — займусь.
С наилучшими пожеланиями, Евгений
VEG M
Topic author, Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 9 months

Post #219by mfana » 09.04.2014, 20:29

VEG, ты шаман :). Спасибо!
mfana M
Бывалый
Avatar
Age: 36
Location: ХМАО
Reputation: 16
With us: 3 yaers 9 months

Post #220by VEG » 09.04.2014, 22:20

Заинтересовала меня задача вытягивания необходимых данных из обычного URL OpenStreetMap. Теперь и он поддерживается. Можно просто взять адрес из адресной строки браузера. Поддерживается маркер и выбор слоя.
Code: Select all
[media]http://www.openstreetmap.org/#map=18/53.90516/27.55366[/media]
[media]http://www.openstreetmap.org/#map=18/53.90516/27.55366&layers=C[/media]
[media]http://www.openstreetmap.org/?mlat=53.90518&mlon=27.55352#map=18/53.90518/27.55352&layers=C[/media]
Надеюсь, этот сервис не будет менять формат URL в обозримом будущем. Нужно будет так же детально проработать новый Google Maps и подумать насчёт Яндекс.Карт.
С наилучшими пожеланиями, Евгений
VEG M
Topic author, Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 9 months

PreviousNext

Return to Мастерская



Who is online (over the past 10 minutes)

Users browsing this forum: 1 guest

cron