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 (маршруты и тренировки)
  • 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
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1668
С нами: 12 лет 7 месяцев


Сообщение #381 angst66 » 06.04.2015, 15:43

Можно ли код замены html впихнуть в регулярные выражения,типа
Код: Выделить всё
$text = preg_replace('/\[media]/', '<тут код замены html>', $text);
?
Хочу к чату подключить эту возможность.
angst66
Репутация: 13
С нами: 12 лет 2 месяца

Сообщение #382 angst66 » 11.04.2015, 23:05

Разобрался с кодом, заменил внутри html кода кавычки с одинарных на двойные.
Общий вид
Код: Выделить всё
$text = preg_replace('/\[media\](.*?)\[\/media\]/', '<div class="bbmedia" data-url="$1" 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>', $text);
angst66
Репутация: 13
С нами: 12 лет 2 месяца

Сообщение #383 VEG » 07.05.2015, 12:37

Dr.Death:Еще подскажи, переделал скрипт, чтобы ютуб был картинкой и играл при нажатии http://kiaoptimaclub.ru/viewtopic.php?t=47, замена картинки на bbmedia (через изменение блока addClass('bbmedia')) не инициализирует плеер, как оно устроено и как его заставить навесить? :smoke:
По крайней мере если динамически создавать блок bbmedia целиком — он должен обрабатываться корректно. Добавление атрибутов, на сколько я помню, не отслеживается. В общем попробуйте скриптом создавать целиком всю разметку тега bbmedia, а скрипт уже её подхватит и отобразит там плеер.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1668
С нами: 12 лет 7 месяцев

Сообщение #384 ЖЪРЧИК » 07.05.2015, 22:40

VEG:Еще подскажи, переделал скрипт, чтобы ютуб был картинкой и играл при нажатии
Кто-нибудь может объяснить, как это мое давнее предложение с ютубом к ббмедиа, как это сделать из стандартного bbmedia.js? :think: Доктор Деф задался тем же вопросом, но по понятным причинам я его не пойму.
ЖЪРЧИК
Аватара
Репутация: 174
С нами: 10 лет 3 месяца

Сообщение #385 Dr.Death » 08.05.2015, 08:47

VEG:По крайней мере если динамически создавать блок bbmedia целиком — он должен обрабатываться корректно. Добавление атрибутов, на сколько я помню, не отслеживается. В общем попробуйте скриптом создавать целиком всю разметку тега bbmedia, а скрипт уже её подхватит и отобразит там плеер.
Если я правильно помню чего я тогда налепил, то щас работает через добавление класса, а не работает если не прописать блоку сразу style="display:inline-block" вот и вопрос как и почему это происходит :smoke:
Dr.Death M
Аватара
Репутация: 69
С нами: 10 лет 4 месяца

Сообщение #386 ЖЪРЧИК » 10.05.2015, 06:25

Dr.Death, видел ведь? /viewtopic.php?p=17090#p17090 :think:
ЖЪРЧИК
Аватара
Репутация: 174
С нами: 10 лет 3 месяца

Сообщение #387 Dr.Death » 10.05.2015, 11:17

ЖЪРЧИК, и?
Dr.Death M
Аватара
Репутация: 69
С нами: 10 лет 4 месяца

Сообщение #388 ЖЪРЧИК » 14.05.2015, 07:26

Dr.Death, подмену параметров в ссылке ютуба autoplay=1&showinfo=0&controls=2 как приделать к bbmedia.js? :think: между чем и чем подставить и что добавить? Или так просто нельзя сделать? Коли взялся за решение проблемы неподгрузки плеера ютуба.
ЖЪРЧИК
Аватара
Репутация: 174
С нами: 10 лет 3 месяца

Сообщение #389 Dr.Death » 14.05.2015, 08:43

Открой сжатый bbmedia.js и ищи аля "youtube.com/embed", для меня не актуально.
Dr.Death M
Аватара
Репутация: 69
С нами: 10 лет 4 месяца

Сообщение #390 ЖЪРЧИК » 14.05.2015, 14:35

Код: Выделить всё
/^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com\/(?:playlist\?(?:.*&)?list=|embed\/videoseries\?(?:.*&)?list=|p\/|view_play_list\?(?:.*&)?p=)([-_\w\d]+)/i))){if(H){u+=30}else{if(v){e+=53}}return n(y+"://www.youtube.com/embed/videoseries?list="+ac[1],e,u)}if(N&&(ac=x.match(/^https?:\/\/(?:www\.)?(?:youtu\.be\/|(?:m\.)?youtube(?:-nocookie)?\.com\/(?:(?:watch|movie)\?(?:.*&)?v=|embed\/|v\/|attribution_link.*watch%3Fv%3D))([-_\w\d]+)(?:.*(?:[&?]start|[?&#]t)=(?:(\d+)h)?(?:(\d+)m)?(\d+)?)?/i))){if(H){u+=30}else{if(v){e+=53}}var U=[];var J=parseInt(ac[2]?ac[2]:0)*3600+parseInt(ac[3]?ac[3]:0)*60+parseInt(ac[4]?ac[4]:0);if(J){U.push("start="+J)}if(l(x,"rel")==="0"){U.push("rel=0")}U=U.join("&");return n(y+"://www.youtube.com/embed/"+ac[1]+(U?"?"+U:""),e,u)}
Между чем? Вроде песледняя строчка, где ?? и кавычки.

Думаю, кроме меня еще кто то поинтересуется.
ЖЪРЧИК
Аватара
Репутация: 174
С нами: 10 лет 3 месяца

Сообщение #391 Dr.Death » 14.05.2015, 15:28

Код: Выделить всё
U=U.join
на
Код: Выделить всё
U.push("controls=2");U=U.join
наверное
Dr.Death M
Аватара
Репутация: 69
С нами: 10 лет 4 месяца

Сообщение #392 ЖЪРЧИК » 15.05.2015, 03:49

Dr.Death, Спасибо помогло, жаль титл ролика вывести нельзя. :clap:
Очень удобно если 5-30 роликов на странице. Спойлера не нужно использовать, можно по картинкам ориентироваться. Рекомендую оптимизаторам. :smoke:
ЖЪРЧИК
Аватара
Репутация: 174
С нами: 10 лет 3 месяца

Сообщение #393 yakashey » 17.05.2015, 14:36

Здравствуйте!
Поставил, почти все играет,
но
1. Не получается вставить видео из Вконтакте
2. Не получается вставить гугл-панораму
и там и там пишет "извините, этот url не поддерживается"
Как быть?
:smoke:
yakashey
Репутация: 0
С нами: 9 лет 6 месяцев

Сообщение #394 Sumanai » 17.05.2015, 14:50

Приведите вид ссылок, которые не работают.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 9 месяцев

Сообщение #395 yakashey » 17.05.2015, 15:16

Привожу:
Код: Выделить всё
[media]http://vk.com/video7834806_161931118?hash=9506b4758e3dfa38[/media]
и вторая:
Код: Выделить всё
[media]https://www.google.ru/maps/@43.567023,39.772696,3a,75y,199.73h,118.91t/data=!3m4!1e1!3m2!1st5Z_OlK34ni85ows8CjIcg!2e0?hl=ru[/media]
ссылки, находящиеся между тегов [media] взяты мной прямо из адресной строки браузера
yakashey
Репутация: 0
С нами: 9 лет 6 месяцев

Сообщение #396 Sumanai » 17.05.2015, 15:17

yakashey:ссылки, находящиеся между тегов [media] взяты мной прямо из адресной строки браузера
yakashey:[media]http://vk.com/video7834806_161931118?hash=9506b4758e3dfa38[/media]
А прочитать инструкцию не пробовали?
vk.com (vkontakte.ru) — только адрес из кода встраивания

Про второе ждите, может что исправят.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 9 месяцев

Сообщение #397 yakashey » 17.05.2015, 15:26

Sumanai:А прочитать инструкцию не пробовали?
Я знаю только что такое "адрес из адресной строки браузера"
А вот что такое "адрес из кода встраивания" я не знаю и спросить мне не у кого
Приведите пример с моим роликом и я сразу все пойму (скорее всего)
Дайте мне готовую ссылку на мой ролик в том виде в каком он будет воспроизводится, плиз
:smile:
Благодарствую!
yakashey
Репутация: 0
С нами: 9 лет 6 месяцев

Сообщение #398 Sumanai » 17.05.2015, 16:00

Кнопок типа "Поделиться" или "Код встраивания" на странице просмотра видео нет?
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 9 месяцев

Сообщение #399 yakashey » 17.05.2015, 16:25

неа
открываем http://vk.com/video7834806_161931118?hash=9506b4758e3dfa38
в правом верхнем углу есть три иконки сердечко, мегафон и плюсик-галочка
при нажатии на любую выскакивает окно "вы уверены что хотите закрыть видеозапись?"
У меня повреждена правая рука, мне трудно левой писать и делать эти скриншоты
Что у меня не так, посоветуйте, коротко и ясно, дайте готовую ссылку вставив которую я получу видео в своем собщении
спасибо
Вложения
Снимокvk.jpg
yakashey
Репутация: 0
С нами: 9 лет 6 месяцев

Сообщение #400 HD321kbps » 17.05.2015, 18:00

Для этого вы должны залогинится Вконтакте!
Еще -> Экспортировать -> Прямая ссылка
http://vk.com/video7834806_161931118
HD321kbps M
Аватара
Откуда: Армянск
Репутация: 376
С нами: 11 лет 8 месяцев

Пред.След.

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



cron