[FAQ] bb-код [MEDIA] - вставляем аудио, видео, карты, панорамы и другое мультимедиа

ErikPshat · 16.10.2012, 13:00

BB-код [MEDIA] by VEG

vBulletin [media] — это универсальный BBCode для vBulletin 3 и 4 версий, который даёт пользователем возможность вставлять в сообщения аудио, видео, карты, панорамы и другое мультимедиа. Поддерживаются сервисы youtube.com, vimeo.com, soundcloud.com, maps.google.com, picasaweb.google.com и несколько десятков других. Данный BBCode является частью проекта BB [media], в который входит большое количество мультимедийных BBCode для различных движков форумов.

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

maps.google.com (карты, панорамы)
dermandar.com (панорамы)
picasaweb.google.com/ (слайдшоу из галереи)

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

soundcloud.com — ссылка на страницу трека и ссылка из кода встраивания
promodj.com — ссылка на страницу трека, ссылка на скачивание и ссылка из кода встраивания
pleer.com — ссылка на трек и ссылки из кода встраивания (новый и старый вариант)
video.yandex.ru — только ссылка из кода встраивания на аудио
music.yandex.ru — ссылка на страницу с треком (только для тех треков, что поддерживают это)
yapfiles.ru — только ссылка из кода встраивания на аудио
файлы WAV, MP3, OGG, OGA, AAC и M4A через HTML5 <audio>

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

youtube.com (youtu.be) — плейлисты также поддерживаются
vimeo.com
rutube.ru — только адрес из кода встраивания
vk.com (vkontakte.ru) — только адрес из кода встраивания
facebook.com
video.mail.ru
smotri.com
dailymotion.com
ustream.tv — поддерживаются и записи, и трансляции
twitch.tv — поддерживаются и записи, и трансляции
video.qip.ru
ted.com
vine.co
coub.com
video.yandex.ru — только адрес из кода встраивания
video.bigmir.net
tvigle.ru — только адрес из кода встраивания
video.online.ua
video.sibnet.ru
yapfiles.ru — только адрес из кода встраивания BBCode (для видео и музыки)
megogo.net
intv.ru
lovi.tv
metacafe.com
veevr.com
myvideo.de
clipfish.de
own3d.tv
hulu.com — только адрес из кода встраивания
pinkbike.com
mpora.com
файлы WebM, OGV и MP4 через HTML5 <video>

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

Для вставки видео с YouTube пользователю достаточно поместить ссылку на страницу видео между парными тегами:

[media=480,360]http://www.youtube.com/watch?v=vFWWmbHozYQ&feature=player_embedded[/media]

Как видите, нет необходимости чистить адреса от мусорных параметров — наш BBCode сам разберётся что к чему.

В сообщении эта конструкция отобразится в виде плеера:

vBulletin [media]

В панели редактирования нажимаете значёк
Открывается окно ввода опции. Туда вы должны вписать, через запятую, ширину и высоту вставляемого объекта:

media.png
И между тегами потом вставляете ссылку.

Например для Видео будет примерно так:
- [MEDIA="640,360"]http://www.youtube.com/watch?v=vFWWmbHozYQ&feature=player_embedded[/MEDIA]
Результат

Скрипт сам автоматически отсеет лишний мусор в ссылке, как в данном случае вот этот: (&feature=player_embedded)

vBulletin [media]

Ну и имейте в виду, что видео бывает 4:3 (1,333) или 16:9 (1,768).
На Youtube плеер формата 16:9, но иногда видео бывает там с чёрными плосками по краям, а это значит, что просто видео залили туда формата 4:3
Затем, вы должны учитывать, что видео обычно бывает 240p, 360p 720p, 1080p - это соотношения сторон 320х240 (4:3), 480х360 (4:3), 640x360 (HD 16:9), 960х720 (4:3), 1280х720 (HD 16:9), 1920х1080 (HD 16:9).
Поэтому нужно уметь определять размер видео и правильно подбирать размер для вставки в опцию BB-кода.

Аудио-плеер, например у muzebra - 395х42, это можно подсмотреть проинспектировав плеер правой кнопкой на странице.

В остальном же, вы можете подобрать правильный размер просто экспериментальным путём, через предварительный просмотр.
Либо можете умышленно уменьшить размер или увеличить относительно оригинала, например:

vBulletin [media]

ErikPshat · 16.10.2012, 18:23

dermandar.com (панорамы) есть увеличение и перемещение.

Open

ErikPshat · 16.10.2012, 18:28

picasaweb.google.com (слайдшоу из галереи)

Open

ErikPshat · 16.10.2012, 18:33

maps.google.com (карты, панорамы)

Open

**KirJan-DeSign** · 16.10.2012, 20:32

ErikPshat,
эм...а как-бы это прикручивать к форуму в плане оформления тем?
есть только одна мысль:
СДЕЛАТЬ АУДИО-ГИД к инструкциям форума. или кхм....видео - репортаж...

**vash** · 17.10.2012, 23:06

KirJan-DeSign, я не ErikPshat, немного вопрос не понял: как-чего прикручивать, вроде всё ясно, в чём подвох?

**COOLERbyPSP** · 17.10.2012, 23:26

vBulletin [media]

Неплохо вписывается.

:D

ErikPshat · 19.10.2012, 03:15

Кстати, если вы не можете рассчитать размер плеера, то просто оставьте опцию пустой. Вернее, при запросе вставки опции введите любое значение, а потом удалите, т.е., чтобы значение [MEDIA=""] осталось пустым.

[MEDIA=""]http://soundcloud.com/tak-4/sinister-evolution[/MEDIA]

vBulletin [media]

**COOLERbyPSP** · 19.10.2012, 04:51

Только он растянет до краёв. Не знаю, как с остальными.

ErikPshat · 19.10.2012, 04:54

Да вроде размер подгоняется автоматически:

Open

**vash** · 19.10.2012, 08:32

Сообщение от COOLERbyPSP

он растянет до краёв

В зависимости от хостинга, на который идёт ссылка, внешний вид плеера меняется.

ErikPshat · 22.10.2012, 02:14

vBulletin [media]

ErikPshat · 22.10.2012, 02:36

vBulletin [media]

Работает предлагаемая на сайте ссылка, выдаваемая внутри BB-кода.

ErikPshat · 22.10.2012, 03:26

**vash** · 22.10.2012, 08:31

ErikPshat, не знаю как кто, а я расширениями Оперы пользуюсь, там радио есть. А объявы в чате любой посетитель форума может оставить? А то страшно становиться, чего там наворотить можно не зная, а уж зная...