phpBB [media] — универсальный bbcode для вставки аудио, видео, карт и др.

[VEG]

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, tiktok.com, vimeo.com и др.)
• все сервисы из phpBB [audio] (soundcloud.com, music.yandex.ru и др.)
• docs.google.com (документы, таблицы и формы; берите ссылку из File » Publish to the web)
• maps.google.com (карты, панорамы)
• openstreetmap.org (карты)
• connect.garmin.com (GPS-треки)
• 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

[Nitro]

добрый день.
не работает, перестал. другие бб-коды нормально работают, этот просто отображается как

Код: Выделить всё

[media]ссылка[/media]

.
Версия phpBB: 3.1.12
перепроверил всё по тексту - всё должно работать по идее...

[VEG]

Скорее всего у вас на странице появилась ошибка JS, которая предотвращает работу скрипта. Смотрите что именяли в последнее время.

Добавлено спустя 1 минуту 44 секунды:
А, у вас он вообще не обрабатывается, и этот текст показывается так, будто он никак не обработался движком? Тогда попробуйте пересоздать его, а потом распарсить BBCode в старых сообщениях повторно.

[lensmen]

Хотелось бы поставить этот код на phpBB2, ибо менять форум которому более 15 лет и напичкан всеми модами нет смысла.
Вопрос такой, возможно, и если да, то как применить для версии phpBB2 ?

[VEG]

В теории как-то адаптировать его возможно, но как - я не подскажу, так как не видел phpBB 2 уже 14 лет.

[lensmen]

ЧТо для этого нужно ?
Есть подобный мод, но он только для ютюба, прилагаю этот мод в приложеннии

Код: Выделить всё

Добавление видео с Youtube
-------------------------------

#
#---[ OPEN ]---
#
templates/subSilver/subSilver.css


#
#---[ FIND ]---
#
/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("formIE.css");


#
#---[ AFTER, ADD ]---
#
/* YouTube.com */
.youtube   {
   border: 1px solid #666;
   width: 425px;
}
.youtube .youtubeContainer   {
   position: relative;
}
.youtube .youtubeContainer   {
   color: #666;
   cursor: pointer;
   cursor: hand;
   font-size: 10px;
   font-weight: bold;
   position: absolute;
   right: 0;
   top: 0;
}


#
#---[ OPEN ]---
#
templates/subSilver/bbcode.tpl


#
#---[ FIND ]---
#
<!-- BEGIN img --><img src="{URL}" border="0" /><!-- END img -->


#
#---[ AFTER, ADD ]---
#
<!-- BEGIN youtube -->
<div class="youtube">
<div class="youtubeContainer">
<span class="postlink"><a href="{URL}" target="_blank">{DESCRIPTION}</a></span>
<br>
<object width="425" height="350">
<param name="movie" value="{MOVIE}"></param>
<param name="wmode" value="transparent"></param>
<embed src="{MOVIE}" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>

</div>
</div>
<!-- END youtube -->


#
#---[ OPEN ]---
#
includes/bbcode.php


#
#---[ FIND ]---
#
   $bbcode_tpl['img'] = str_replace('{URL}', '\\1', $bbcode_tpl['img']);


#
#---[ AFTER, ADD ]---
#
//+YouTube.com
$bbcode_tpl['youtube1'] = $bbcode_tpl['youtube'];
$bbcode_tpl['youtube1'] = str_replace('{URL}', 'http://www.youtube.com/watch?v=\\1', $bbcode_tpl['youtube1']);
$bbcode_tpl['youtube1'] = str_replace('{DESCRIPTION}', 'http://www.youtube.com/watch?v=\\1', $bbcode_tpl['youtube1']);
$bbcode_tpl['youtube1'] = str_replace('{MOVIE}', 'http://www.youtube.com/v/\\1', $bbcode_tpl['youtube1']);

$bbcode_tpl['youtube2'] = $bbcode_tpl['youtube'];
$bbcode_tpl['youtube2'] = str_replace('{URL}', 'http://www.youtube.com/watch?v=\\1', $bbcode_tpl['youtube2']);
$bbcode_tpl['youtube2'] = str_replace('{DESCRIPTION}', '\\2', $bbcode_tpl['youtube2']);
$bbcode_tpl['youtube2'] = str_replace('{MOVIE}', 'http://www.youtube.com/v/\\1', $bbcode_tpl['youtube2']);
//-YouTube.com


#
#---[ FIND ]---
#
        $replacements[] = $bbcode_tpl['img'];


#
#---[ AFTER, ADD ]---
#
//+YouTube.com
// [youtube]YOUTUBE[/youtube]
$patterns[] = "#\[youtube\](?:(?:http://(?:www\.)?)?youtube\.com(?:/watch\?v=|/v/))?([0-9a-z\-\_\+]+)\[/youtube\]#i";
$replacements[] = $bbcode_tpl['youtube1'];

// [youtube=YOUTUBE]description[/youtube]
$patterns[] =

"#\[youtube=(?:(?:http://(?:www\.)?)?youtube\.com(?:/watch\?v=|/v/))?([0-9a-z\-\_\+]+)\]([^?\n\r\t].*?)\[/youtube\]#i";
$replacements[] = $bbcode_tpl['youtube2'];
//-YouTube.com

#
#-----[ OPEN ]------------------------------------------
#

posting.php

#
#-----[ FIND ]------------------------------------------
#

   'L_BBCODE_O_HELP' => $lang['bbcode_o_help'],

#
#-----[ AFTER, ADD ]------------------------------------------
#

   // [start] [youtube] BB-Code
   'L_BBCODE_Y_HELP' => $lang['bbcode_y_help'],
   // [end] [youtube] BB-Code


#
#-----[ OPEN ]------------------------------------------
#

templates/subSilver/posting_body.tpl

#
#-----[ FIND ]------------------------------------------
#

o_help = "{L_BBCODE_O_HELP}";

#
#-----[ AFTER, ADD ]------------------------------------------
#

y_help = "{L_BBCODE_Y_HELP}";

#
#-----[ FIND ]------------------------------------------
#

bbtags = new

Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/li

st]','[img]','[/img]','[url]','[/url]');

#
#-----[ IN-LINE FIND ]------------------------------------------
#

);

#
#-----[ IN-LINE BEFORE, ADD ]------------------------------------------
#

,'[youtube]','[/youtube]'

#
#-----[ FIND ]------------------------------------------
#

         <td><span class="genmed">
           <input type="button" class="button" accesskey="w" name="addbbcode16" value="URL"
style="text-decoration: underline; width: 40px" onClick="bbstyle(16)" onMouseOver="helpline('w')" />
           </span></td>

#
#-----[ AFTER, ADD ]------------------------------------------
#

         <td><span class="genmed">
           <input type="button" class="button" accesskey="h" name="addbbcode18" value="YouTube"
style="text-decoration: underline; width: 60px" onClick="bbstyle(18)" onMouseOver="helpline('y')" />
           </span></td>

#
#-----[ FIND ]------------------------------------------
#

               <select name="addbbcode18" onChange="bbfontstyle('[color=' +
this.form.addbbcode18.options[this.form.addbbcode18.selectedIndex].value + ']', '[/color]');this.selectedIndex=0;"
onMouseOver="helpline('s')">

#
#-----[ REPLACE WITH ]------------------------------------------
#

               <select name="addbbcode20" onChange="bbfontstyle('[color=' +
this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/color]');this.selectedIndex=0;"
onMouseOver="helpline('s')">

#
#-----[ FIND ]------------------------------------------
#

               </select> &nbsp;{L_FONT_SIZE}:<select name="addbbcode20"
onChange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']',

'[/size]')" onMouseOver="helpline('f')">

#
#-----[ REPLACE WITH ]------------------------------------------
#

               </select> &nbsp;{L_FONT_SIZE}:<select name="addbbcode22"
onChange="bbfontstyle('[size=' + this.form.addbbcode22.options[this.form.addbbcode22.selectedIndex].value + ']',
'[/size]')" onMouseOver="helpline('f')">

#
#-----[ OPEN ]------------------------------------------
#

language/lang_english/lang_main.php



#
#-----[ FIND ]------------------------------------------
#

?>

#
#-----[ BEFORE, ADD ]------------------------------------------
#

// [start] [youtube] BB-Code
$lang['bbcode_y_help'] = 'YouTube video: [youtube]link[/youtube]  (alt+y)';
// [end] [youtube] BB-Code

#
#-----[ OPEN ]------------------------------------------
#

language/lang_russian/lang_main.php



#
#-----[ FIND ]------------------------------------------
#

?>

#
#-----[ BEFORE, ADD ]------------------------------------------
#

// [start] [youtube] BB-Code
$lang['bbcode_y_help'] = 'YouTube видео: [youtube]ссылка[/youtube]  (alt+y)';
// [end] [youtube] BB-Code

#
#-----[ SAVE/CLOSE ALL FILES ]------------------------------------------
#
# EoM



==============================================================================


Добавить кнопку в форму быстрого ответа

#
#-----[ OPEN ]------------------------------------------------------------------
#

templates/quick_reply.js

#
#-----[ FIND ]------------------------------------------------------------------
#

// Define the bbCode tags
bbcode = new Array();
bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]','[youtube]','[/youtube]');
imageTag = false;

#
#-----[IN-LINE FIND ]------------------------------------------------------------------
#

,'[url]','[/url]'

#
#-----[IN-LINE AFTER, ADD ]-----------------------------------------------------------
#

,'[youtube]','[/youtube]'

#
#-----[ OPEN ]------------------------------------------------------------------
#

templates/subsilver/quick_reply.tpl

#
#-----[ FIND ]------------------------------------------------------------------
#

               <td><input type="button" class="button" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width:40px" onClick="bbstyle(16)" /></td>

#
#-----[AFTER, ADD ]-----------------------------------------------------------
#

               <td><input type="button" class="button" accesskey="t" name="addbbcode18" value="Off" style="width:40px" onClick="bbstyle(18)" /></td>

#
#-----[ SAVE/CLOSE ALL FILES ]------------------------------------------
#
# EoM



quick_reply.js - выглядит так

bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/list]',
'[img]','[/img]','[pic]','[/pic]','[url]','[/url]','[youtube]','[/youtube]');

в quick_reply.tpl - нужно добавить кнопку.

<td><input type="button" class="button" accesskey="t" name="addbbcode№ббкода" value="ИмяБбКода" style="width:60px" onClick="bbstyle(№ббкода)" /></td>


где №ббкода - это порядковый номер ббкода в указанной строке из quick_reply.js умноженный на два (например, номер ббкода
[ b ] [ /b ] - 1*2=2, ббкода [ code ] [ /code ] - 5*2=10) и ИмяБбКода - это собственно имя кнопки.



[vbnm]

Добавлено спустя 4 минуты 4 секунды:
VEG, ghbdf!
что нужно сделать, чтобы скрипт поддерживал ссылки такого вида?
https://vk.com/video67505975_456239054?list=cf13f7febec35b48bc
или, хотя бы такого:
https://vk.com/video67505975_456239054

на вк сейчас все идет в таком формате

[VEG]

Такие видео нельзя встраивать.

[vbnm]

а нельзя их как-нибудь на автомае приводить к надлежащему виду, что поддерживаются скриптом?

Код: Выделить всё

[media]https://vk.com/video_ext.php?oid=67505975&id=456239054&hash=49760bfc1bbe4474[/media]

[media]https://vk.com/video_ext.php?oid=67505975&id=456239054&hash=49760bfc1bbe4474[/media]

[VEG]

Нет, нельзя.

[lensmen.]

Не приходит код на емейл подтверждения регистрации,ник lensmen и ответа на свой вопрос я так и не увидел

[VEG]

lensmen, проверьте папку со спамом.

Вы можете самостоятельно адаптировать код для phpBB 2. В моде, что вы привели выше, уже показаны все места, где нужно делать правки. Для адаптированного BB [media] нужно будет даже немного меньше изменений. Немного понимания HTML и PHP, и у вас получится. Прямо сейчас у меня нет времени заниматься адаптацией для вас. Может быть, когда-нибудь потом.

[lensmen.]

В спаме пусто,повторно пробовал высылать,тоже пусто, че то у вас глючит регистрация, но если мой вопрос нерешаем, то смысл регится вообще здесь.

[lensmen]

Вижу что активировали вручную, тогда такой вопрос, есть форум XenForo там просто вставляешь ссылку без всяких тегов и оно автоматом все работает, нельзя с него вытащить этот код для работы с видеохостингами ?

[vbnm]

VEG, а можешь адаптировать под телеграмм?

Код: Выделить всё

<script async src="https://telegram.org/js/telegram-widget.js?16" data-telegram-post="peadovkanews/27458" data-tme-mode data-width="100%"></script>

[VEG]

Сервис video.bigmir.net закрылся, так что его поддержка удалена из кода.

[forums]

Ролики из vk не хочет проигрывать.
Пример:

phpBB [media]

[VEG]

Обновился формат ссылок на VK. Добавил поддержку нового варианта. Теперь не обязательно использовать ссылку из кода встраивания: если видео не приватное, можно и обычную ссылку скармливать.

[Vadim-fr]

Добрый день!
Заметил, что не работают ссылки из ютуб формата: "https://www.youtube.com/shorts/2YlJYV07kLQ?feature=share"
В таких ссылках достаточно "/shorts/" заменить на "/embed/" и всё начинает показывать, однако как это сделать в скрипте - не знаю.
Помогите пожалуйста!

[VEG]

Добавил поддержку таких ссылок. Если вдруг не работает, очистите кэш или нажмите Ctrl+F5.

Пример:

Код: Выделить всё

[media]https://www.youtube.com/shorts/oaxYl1TSyoE[/media]

phpBB [media]

Такие видео автоматически вставляются как вертикальные.

[Vadim-fr]

Всё отлично работает!
Спасибо огромное и с наступающим!! :)

Добавлено спустя 5 часов 56 минут:
Пардон, нашёл одну проблемку под Новый год.. - невозможно по умолчанию в кнопке ббкода задавать размеры ролика больше, чем предустановленный.
У меня автоматом, при нажатии, выходит - [media width=990 height=550]******[/media] и в этом случае, "стоячие" ролики становятся гигантскими.

Научить девочек, каждый раз в горизонтальный ролик задавать размер через запятую, дело бесперспективное..
Если на стороне темплейта установить размеры побольше, то и стоячие ролики будут автоматом гигантского размера..
Выходит, что ролики, по умолчанию, могут быть только 640 на 350 что для современного мира, всё таки маловато..