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
Репутация: 1667
С нами: 12 лет 6 месяцев


Сообщение #561 Sumanai » 02.07.2019, 19:23

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

Сообщение #562 АлексейМ » 02.07.2019, 19:51

Sumanai:Если придумаете, что с ним делать, можно сообразить.

Напишите мне пожалуйста ваш e-mail в личные сообщения на phpbbguru.net, распишу всё подробно. Имя пользователя такое же, как и здесь. Вчера там писал в теме "Отзывы заказчиков о работах", о том что мне не найти контакты по которым можно связаться, а функция "Отправить e-mail пользователю" у них почему-то не работает.
АлексейМ
Гость

Сообщение #563 Inoy-47 » 13.10.2019, 17:59

Здравствуйте.
А поддерживает ваш код?
https://rutube.ru/list/premier/video/
Inoy-47
Гость

Сообщение #564 Merz » 16.10.2019, 10:55

Inoy-47:Здравствуйте.
А поддерживает ваш код?
https://rutube.ru/list/premier/video/
Как то так

phpBB [media]
Merz M
Аватара
Репутация: 33
С нами: 10 лет 3 месяца

Сообщение #565 Constantine174 » 04.12.2019, 17:56

Что-то у меня офф расширение ошибку выдает. Выбранное расширение не может быть включено, проверьте требования к установке.
Constantine174
Репутация: 0
С нами: 4 года 10 месяцев

Сообщение #566 VEG » 15.11.2020, 14:50

Обновил немного для лучшей поддержки HTTPS. Замените http:// на // в вашем коде встраивания, то есть адрес скрипта получится таким:
Код: Выделить всё
//phpbbex.com/api/bbmedia.js

Заодно поддержка ряда уже закрывшихся сервисов была удалена из кода (минус несколько килобайт). Код встраивания некоторых сервисов был обновлён, чтобы не использовать Flash. Ещё несколько таких осталось - в свете окончания поддержки Flash в конце этого года, обновлю и оставшееся (Twitch и Яндекс.Музыка). Если ссылки каких-то из сервисов перестали распознаваться со временем - сообщите здесь с примерами ссылок и кода встраивания что отдаёт сервис.

TODO
  • Избавиться от Flash окончательно.
  • Починить поддержку того что сломалось (Яндекс-Музыка и Twitch).
  • Поддерживать исключительно очень популярные сервисы, которые внезапно не закроются.
  • Не использовать jQuery.
  • Поддержка адаптивных дизайнов.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1667
С нами: 12 лет 6 месяцев

Сообщение #567 VEG » 16.11.2020, 12:43

Ещё немного сократил код, плюс в дополнение к OGG, OPUS, MP3, WAV и др. добавил поддержку ссылок на файлы FLAC:
phpBB [media]
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1667
С нами: 12 лет 6 месяцев

Сообщение #568 VEG » 18.11.2020, 21:23

Переделал без использования jQuery. Должно работать в IE11 и новее.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1667
С нами: 12 лет 6 месяцев

Сообщение #569 VEG » 19.11.2020, 22:51

От использования Flash избавился: к 2021 году готов.

Яндекс-Музыка заработала через iframe. Twitch, оказывается, уже совсем давно сломан, формат ссылок совсем изменился, старые видео недоступны. Похоже, что там в принципе старые видео не сохраняются и ссылки со временем протухают. Решил пока что его убрать, раз он не работает всё равно. Когда-нибудь потом может быть новый формат ссылок всё же добавлю. Хотя у меня есть сомнения, что кто-то пользуется встраиванием видосов с Twitch на форумы =)
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1667
С нами: 12 лет 6 месяцев

Сообщение #570 VEG » 23.11.2020, 19:31

Добавил ленивую загрузку встроенных iframe-ов. На данный момент работает только в браузерах на базе Chrome, но вскоре поддержка используемого флага появится и в Firefox с Safari.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1667
С нами: 12 лет 6 месяцев

Сообщение #571 VEG » 25.11.2020, 18:11

Добавил поддержку плейлистов на Яндекс-Музыке:

phpBB [media]
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1667
С нами: 12 лет 6 месяцев

Сообщение #572 VEG » 28.11.2020, 17:57

Добавил поддержку bandcamp.com. Увы, у этого сервиса ссылку придётся брать из кода встраивания. На странице альбома или трека кликаем Embed → Layout: Standard, ставим галочку Show tracklist если нужен видимый плейлист (другие настройки игнорируются), и копируем ссылку из показанного кода встраивания. Поддерживаются плейлисты и отдельные треки.

Пример:
Код: Выделить всё
[media]https://bandcamp.com/EmbeddedPlayer/album=3077104188/track=2897214297/[/media]

Выглядит так (на всю страницу не тянется):
phpBB [media]
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1667
С нами: 12 лет 6 месяцев

Сообщение #573 rippy » 17.05.2021, 07:36

В livegps изменился формат ссылки. В скрипте сейчас так:
Код: Выделить всё
if(y&&(aa=u.match(/^https?:\/\/(?:www\.|)?livegpstracks\.com\/apgtracks\.php\?/i)))
А для встраивания новый формат выглядит так
Код: Выделить всё
https://livegpstracks.com/aptracks.php?file=1621023&t=&z=14&c=53.9809,48.7510

Можно поправить?
rippy
Репутация: 0
С нами: 3 года 5 месяцев

Сообщение #574 VEG » 17.05.2021, 09:31

Думаю, можно. Вечером гляну.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1667
С нами: 12 лет 6 месяцев

Сообщение #575 VEG » 20.05.2021, 12:12

Исправил.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1667
С нами: 12 лет 6 месяцев

Сообщение #576 rippy » 21.05.2021, 07:24

VEG:Исправил
Спасибо, работает. А нет планов сделать галерею по типу того, что было в пикасе из VK ссылок на альбомы? типа такого
https://vk.com/feed?z=photo66219603_457241192/wall66219603_1010
rippy
Репутация: 0
С нами: 3 года 5 месяцев

Сообщение #577 VEG » 21.05.2021, 11:34

VK вроде как не позволяет встраивать галереи. По крайней мере я не вижу такой возможности.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1667
С нами: 12 лет 6 месяцев

Не вставляются карты с точками на них.

Сообщение #578 palex » 27.08.2021, 10:02

Добрый день.
Огромное спасибо за ваш скрипт. Служил верой и правдой долгое время.
Сейчас столкнулся с тем, что не получается вставить гугл-карту с точками на ней.
Есть какой-нибудь способ вставки на форум (php bb 3.0.13-PL1)?
Пример:
Код: Выделить всё
https://www.google.com/maps/d/embed?mid=1F401Le-nelTCc7fj3uYBjy9F2wUSjxWZ
palex
Гость

Сообщение #579 VEG » 31.08.2021, 23:04

palex, добавил поддержку таких ссылок тоже.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1667
С нами: 12 лет 6 месяцев

Сообщение #580 VEG » 26.10.2021, 00:08

Появилась поддержка адаптивных дизайнов. В современных браузерах, если видео-плеер не влазит по ширине, он автоматически уменьшается с сохранением пропорций. Используется новое свойство CSS aspect-ratio. В старых браузерах (до 2021 года) должно работать как раньше.

phpBB [media]


Видео для теста. Можете попробовать сделать окно браузера уже.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1667
С нами: 12 лет 6 месяцев

Пред.След.

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