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


Сообщение #61 yuri » 28.10.2012, 16:05

Добрый день.
У меня вопрос: При "Независимый js-скрипт на вашем сервере", не будет ли конфликтов для участников форума кто использует следующий адрес;
forum.exemp.com вместо exemp.com/forum для получения доступа к форуму.
Если человек зашел с первого адреса, то файл bbmedia.php не будет найден.
Или лучше использовать абсолютный адрес, в данной ситуации?
Спасибо.
yuri
Репутация: 0
С нами: 11 лет 5 месяцев

Сообщение #62 VEG » 29.10.2012, 00:19

yuri, просто укажите абсолютный путь.
А вообще лучше оставить только один какой-то вариант. Так вы поможете пользователям избежать проблем с авторизацией и не будете вводить в ступор поисковики.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #63 VEG » 07.11.2012, 16:08

Лицензия на bbmedia.js изменена на CC BY-NC-ND (ранее она была не указана, но условия распространения были по сути теми же).
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #64 VEG » 20.11.2012, 15:02

Ранее при попытке увеличения панорамы на dermandar.com при помощи скролла мыши прокручивалась также вся страница, что было неудобным. Сейчас эта проблема решена, причём изменение организовано таким образом, чтобы его можно было легко применить и к другим встраиваемым объектам, которые по-своему обрабатывают скролл. Если вы заметите похожую проблему с обработкой скролла на каких-то сервисах — сообщайте, поправим.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #65 denleva » 20.11.2012, 18:38

Большое спасибо очень помогло !!а то долго голову ломал!!!++++++++
denleva
Гость

Сообщение #66 JoteRuso » 14.12.2012, 00:00

Вопрос следующего плана:
Имеем ролик с ютуба. Допустим, этот:

phpBB [media]


при просмотре его на этом форуме (через последнюю версию Оперы 12.11) звук ролика глушится почти в 2 раза.
Если здесь же, на самом ролике, нажать на значок ютуба, то у них на открывшемся (в той же Опере) сайте этот же ролик воспроизведётся с нормальным звуком.
Собственно вопрос - это глюки Оперы или данного бибикода?

На других браузерах пока не проверял.
JoteRuso M
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 11 лет 11 месяцев

Сообщение #67 VEG » 14.12.2012, 00:34

JoteRuso, данный bbcode использует стандартный код встраивания плеера youtube. Соответственно сам BBCode только вставляет плеер, но на его работу он не влияет никак. Скорее всего это какая-то проблема с настройками или совместимостью плеера youtube с вашим браузером. Нужно пробовать. У меня таких проблем не наблюдается — плеер запоминает свою громкость и при отображении его в других окнах автоматически устанавливается громкость, которую я сам выбрал в прошлый раз.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #68 JoteRuso » 14.12.2012, 02:35

Хм... И в плеере, который встроен здесь, и в плеере на ютубе громкость автоматом выставляется одинаковая - 100%. Но громкость воспроизведения почему-то получается разная. Здесь - тише, на ютубе - громче.

Природное любопытство победило врождённую лень и я задействовал другие браузеры:
Хром - одинаково тише.
Мозилла - одинаково громче.
Сафари - так же, как и в Опере (здесь тише, на ютубе громче)
Яндекс - одинаково тише.
IE 9 - одинаково громче ))))

Прикольно, вобщем ))) Значит, дело в браузерах.
JoteRuso M
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 11 лет 11 месяцев

Сообщение #69 Нью » 17.12.2012, 15:42

VEG, Так это Вы его создали?
Нью
Репутация: 3
С нами: 11 лет 3 месяца

Сообщение #70 VEG » 17.12.2012, 15:50

Нью, верно. BB [media] начался с небольшого скрипта для вставки видео с youtube.com, vimeo.com и rutube.ru.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #71 Нью » 17.12.2012, 15:54

VEG:Нью, верно. BB [media] начался с небольшого скрипта для вставки видео с youtube.com, vimeo.com и rutube.ru.
Вы - мозг. А Вы где-то учились или самоучка?
Нью
Репутация: 3
С нами: 11 лет 3 месяца

Сообщение #72 VEG » 17.12.2012, 16:06

Нью, обо мне вы можете прочитать здесь.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #73 Нью » 17.12.2012, 16:18

VEG:Нью, обо мне вы можете прочитать здесь.

Вы интересная и талантливая личность, желаю Вам успехов!
Нью
Репутация: 3
С нами: 11 лет 3 месяца

Сообщение #74 VEG » 20.12.2012, 15:58

Разработчики свободного браузера Firefox начали сдаваться. В ночной версии Firefox 20 уже появилась поддержка формата H.264 и MP3/AAC. Если они не передумают, Opera скорее всего также не заставит себя долго ждать. Так что скоро BB [media] будет поддерживать H.264 во всех браузерах.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #75 JoteRuso » 21.12.2012, 16:03

VEG:Так что скоро BB [media] будет поддерживать H.264 во всех браузерах.
А что нам это даст такого особенного? Сможем смотреть фильмы в формате .mkv ? Или это вообще из другой сказки?
(просто из описания по ссылке и комментариям там - я мало что понял) :cyclop:
JoteRuso M
Аватара
Откуда: Москва, Россия
Репутация: 541
С нами: 11 лет 11 месяцев

Сообщение #76 VEG » 22.12.2012, 02:10

JoteRuso, Firefox станет проигрывать *.mp3, *.m4v и *.m4a файлы, вставленные в [media]. *.mkv — это Matroska. Его ни один браузер не поддерживает в чистом виде. WebM — это подмножество Matroska, вот его и поддерживают Firefox, Opera и Chrome.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #77 Motley » 24.12.2012, 10:57

Здравствуйте, есть возможность, как ни-будь вставлять по верх видео свой логотип?
Motley
Гость

Сообщение #78 VEG » 24.12.2012, 12:49

Motley:Здравствуйте, есть возможность, как ни-будь вставлять по верх видео свой логотип?
Нет, этого не предусмотрено.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #79 Валентин » 24.12.2012, 17:54

2 вопроса:
- Есть ли смысл в использовании обоих тегов [media] и [media=] одновременно (в панели быстрого ответа)? Может ли тег [media=] без вставки "=" использоваться как [media]?
- Как правильно использовать тег [img], при вставке ссылки на фото (picasa) показывается просто слово "Изображение", а если вставить эту ссылку в тег [media], то выводится фирменный пикасовский слайд-шоу проигрыватель, а это не нужно, т.к. хочется просто вставить одно изображение в сообщение?

Добавлено спустя 3 часа 25 минут 16 секунд:
Разобрался с picasa (нужно было прямые ссылки вытаскивать из кода html), но долго ли они живут... посмотрим...
А вот вопрос с [media] остался.
Валентин
Гость

Сообщение #80 VEG » 24.12.2012, 22:09

Валентин:Есть ли смысл в использовании обоих тегов [media] и [media=] одновременно (в панели быстрого ответа)? Может ли тег [media=] без вставки "=" использоваться как [media]?
Есть. На панель кнопок выводите вариант без дополнительных параметров. Если кто-то из юзеров захочет указать дополнительные параметры, он просто напишет «=» и необходимые праметры.
VEG M
Автор темы, Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Пред.След.

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