phpBB [video] — универсальный видео-bbcode (без правок кода)

[VEG]

BBCode: phpBB [audio] | phpBB [video] | phpBB [media] | phpBB [youtube]

Представляем вам новый универсальный BBCode «phpBB [video]», который подходит как для phpBB, так и для phpBBex. Для установки нет необходимости править какие-либо файлы, его можно добавить через раздел администратора.

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

Пользователь копирует адрес страницы интересующего ролика и вставляет его между [video][/video]:

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

[video]http://vimeo.com/40558553[/video]

или (с указанием размеров):

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

[video=640,360]http://vimeo.com/40558553[/video]

В сообщении это отобразится следующим образом (это картинка, рабочий пример в теме phpBB [video] на форуме phpBBex):


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

На данный момент поддерживаются видеосервисы:

• youtube.com (youtu.be) — плейлисты также поддерживаются
• vimeo.com
• rutube.ru — только адрес из кода встраивания
• vk.com (vkontakte.ru) — только адрес из кода встраивания
• facebook.com
• video.mail.ru
• smotri.com
• dailymotion.com
• video.qip.ru
• video.google.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
• hulu.com — только адрес из кода встраивания
• файлы WebM, OGV и MP4 через HTML5 <video>

Адреса не нужно чистить от мусорных параметров — наш [video] разберётся что к чему. Можно использовать как адрес страницы видео, так и адрес из кода встраивания (если не указано иное).

В ближайшем будущем будут поддерживаться:

• webm, mp4 и flv видеофайлы через плеер на flash при отсутствии HTML5

Что интересно, наш bbcode сам обновится, и новые сервисы будут поддерживаться у вас автоматически. Если вам не хватает поддержки какого-то видеосервиса, мы будем рады добавить её. В этой теме приведите ссылку на видео с интересующего вас видеосервиса и код встраивания — это нам поможет. Если новый видеосервис востребован, мы вскоре добавим его поддержку в наш видео-bbcode. Оставляйте отзывы в теме об этом видео-bbcode. Это будет мотиватором для скорейшего добавления поддержки новых сервисов.

Установка [video] (с фиксированным размером)

1. Админка, вкладка «Сообщения», страничка «BBCodes», добавить BBCode (если уже есть [video] — удалить).
2. В поле «Использование BBCode» введите:

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

[video]{URL}[/video]

3. В поле «Замена HTML» введите (вторая версия кода, изменять можно только высоту и ширину блока!):

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

<div class='bbvideo' data-url='{URL}' style='width: 640px; height: 390px; margin: 2px 0; display: inline-block; background: #000; color: #fff; overflow: hidden; vertical-align: bottom;'><div style='height: 100%;'><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><div style='text-align: right; height: 14px; margin-top: -14px; padding-right: 2px; font: 10px/10px Verdana; color: #555;'><a style='color: #555; text-decoration: none;' href='http://phpbbex.com/' target='_blank'>phpBB &#91;video&#93;</a></div></div>

4. В поле «Подсказка» введите:

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

Вставить видео: [video]http://youtube.com/url[/video]

5. Установите галочку «Показывать на странице ответа» и сохраните форму. Готово!

Установка [video=ширина,высота] (в дополнение к предыдущему)

1. Админка, вкладка «Сообщения», страничка «BBCodes», добавить BBCode (если уже есть [video=] — удалить).
2. В поле «Использование BBCode» введите:

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

[video={NUMBER1},{NUMBER2}]{URL}[/video]

3. В поле «Замена HTML» введите (вторая версия кода, вводить без изменений!):

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

<div class='bbvideo' data-url='{URL}' style='width: {NUMBER1}px; height: {NUMBER2}px; margin: 2px 0; display: inline-block; background: #000; color: #fff; overflow: hidden; vertical-align: bottom;'><div style='height: 100%;'><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><div style='text-align: right; height: 14px; margin-top: -14px; padding-right: 2px; font: 10px/10px Verdana; color: #555;'><a style='color: #555; text-decoration: none;' href='http://phpbbex.com/' target='_blank'>phpBB &#91;video&#93;</a></div></div>

4. В поле «Подсказка» введите:

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

Вставить видео: [video=ширина,высота]http://youtube.com/url[/video]

5. Сохраните форму. Готово!

Удаление ссылки из кода

На разработку данного bbcode потрачено много времени, поэтому в наличие ссылки на phpbbex.com в коде обязательно. Эта ссылка видна только в момент загрузки и не мешает пользователям. Если по каким-то причинам вам всё-таки необходимо её убрать, свяжитесь с автором любым удобным для вас способом.

[angst66]

evrus01
Сейчас проверял, на этом работает Как открывать вставленные ютуб ролики во весь экран?
например

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

[youtube]http://www.youtube.com/watch?v=Vw2d4M3isJ4&start=448[/youtube]

[evrus01]

URL youtub'a это что-то с чем-то...

For example:
http://www.youtube.com/watch?v=rWlHtvZHbZ8
http://www.youtube.com/watch?v=rWlHtvZH ... re=related
http://www.youtube.com/watch?v=rWlHtvZH ... =g-all-lik
http://www.youtube.com/watch?v=rWlHtvZH ... ure=g-vrec
http://www.youtube.com/watch?v=rWlHtvZH ... ntext-vrec
http://youtu.be/rWlHtvZHbZ8
http://www.youtube.com/embed/rWlHtvZHbZ8
http://www.youtube.com/watch?v=rWlHtvZH ... r_embedded

И еще 100500 вариантов.

Для обычного пользователя весь этот набор букв и цифр не понятен.
К чему это я? Если VEG будет делать поддержку времени, то чтобы phpBB [video] все это «кушал» и не давился.

[VEG]

Теперь на youtube.com поддерживается временная метка, причём во всех возможных вариантах (их ещё больше, чем в примерах выше):

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

http://www.youtube.com/watch?feature=player_detailpage&v=Vw2d4M3isJ4#t=448s
http://www.youtube.com/embed/Vw2d4M3isJ4?start=448

[evrus01]

их ещё больше, чем в примерах выше

я просто устал копировать )

[Strigops]

Скажите пожалуйста, ожидается ли поддержка для онлайн-трансляций на сервисе ustream.tv?

[VEG]

Strigops
Это случаем не на этом сервисе NASA транслировала передачу во время посадки Curiosity? Если так, то я собирался добавить поддержку этого сервиса. Видимо, забыл.

Добавлено спустя 4 минуты 23 секунды:
Re: phpBB [video] — универсальный видео-bbcode (без правок кода)

я просто устал копировать )

Если найдёте какой-то реальный вариант URL на youtube.com, который bbmedia не распознает — пишите. На youtube.com приоритет, и он должен поддерживаться идеально

[Strigops]

Это случаем не на этом сервисе NASA транслировала передачу во время посадки Curiosity?

Честно признаться не в курсе. У меня там свои трансляции, поэтому и спросил.

Видимо, забыл.

Тогда жду)

[angst66]

Теперь на youtube.com поддерживается временная метка

Обновил код, временная метка работает, супер!

[VEG]

Как я уже писал, ничего обновлять не надо — оно само по дефолту обновляется. Нужно только кэш у браузера почистить если ждать не очень хочется

[Ёжъ]

VEG, здравия Вам!
Давно пользуюсь вашими тэгами- всё работает на ура. Но вздумалось мне добавить функций для скачивания роликов. Ибо у многих как у меня не хватает скорости подгрузить даже картинку, а у других не работает флэш- для них никак не выдрать ссылки ролика, кроме полного цитирования и выковыривания из сообщения. Пробовал разместить в строке с копирайтом плеера- ругается "Неверный ББкод". Потом придумал отобразить два поля div, отделённых бордюром и сделать надпись во внешнем, снизу. Дополнительно к адресу скрипт SaveFrom.net даёт кнопку с прямой ссылкой. Легче самому увидеть например в этой теме.

Как и можно ли сделать так, чтобы видео открывалось во внутреннем поле, не закрывая плеером надпись со ссылкой?

Вот такой наворотил код:

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

<div class='bbvideo' data-url='{URL}' style='width: 640px; height: 390px; margin: 2px 0; display: inline-block; background: #B5C74E; color: #420; overflow: hidden; vertical-align: bottom; -moz-border-radius: 12px; -webkit-border-radius: 12px; border: 1px dotted #6e6; padding: 4px;'><div style='height: 95%; -moz-border-radius: 9px; -webkit-border-radius: 9px; border: 4px ridge #6e6; '><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><div style='text-align: right; height: 14px; margin-top: -14px; padding-right: 2px; font: 10px/10px Verdana; color: #555;'><a style='color: #105289; text-decoration: none;' href='http://phpbbex.com/' target='_blank'> phpBB</a> &#91;video&#93;</div><strong>Ссылка для скачивания: </strong> <a href='{URL}' target='_blank'> {URL}</a></div>

[evrus01]

Растасибирск, так у вас же эта ссылка внутри блока bbvideo.

Вынесите ее:

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

<div class='bbvideo' data-url='{URL}' style='width: 640px; height: 390px; margin: 2px 0; display: inline-block; background: #B5C74E; color: #420; overflow: hidden; vertical-align: bottom; -moz-border-radius: 12px; -webkit-border-radius: 12px; border: 1px dotted #6e6; padding: 4px;'><div style='height: 95%; -moz-border-radius: 9px; -webkit-border-radius: 9px; border: 4px ridge #6e6; '><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>
	<div style='text-align: right; height: 14px; margin-top: -14px; padding-right: 2px; font: 10px/10px Verdana; color: #555;'>
		<a style='color: #105289; text-decoration: none;' href='http://phpbbex.com/' target='_blank'> phpBB</a> &#91;video&#93;
	</div>
</div>
<div>
	<strong>Ссылка для скачивания: </strong><a href='{URL}' target='_blank'> {URL}</a>
</div>

[Ёжъ]

Благодарю, evrus01! Да я так сперва и сделал- не понравилось. Хотел чтобы в одном блоке всё было, не расползаясь по странице при длинных ссылках. Разместив видеоплеер во внутреннем блоке смотрелось бы всё красивее. Может можно, а?

[VEG]

Растасибирск
Нет, так не выйдет. Вы можете стилизовать внешний <div> как вам нравится. Организуйте вот так:

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

<div>
<div class='bbvideo' data-url='{URL}' style='width: 640px; height: 390px; margin: 2px 0; display: inline-block; background: #B5C74E; color: #420; overflow: hidden; vertical-align: bottom; -moz-border-radius: 12px; -webkit-border-radius: 12px; border: 1px dotted #6e6; padding: 4px;'><div style='height: 95%; -moz-border-radius: 9px; -webkit-border-radius: 9px; border: 4px ridge #6e6; '><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>
	<div style='text-align: right; height: 14px; margin-top: -14px; padding-right: 2px; font: 10px/10px Verdana; color: #555;'>
		<a style='color: #105289; text-decoration: none;' href='http://phpbbex.com/' target='_blank'> phpBB</a> &#91;video&#93;
	</div>
</div>
	<strong>Ссылка для скачивания: </strong><a href='{URL}' target='_blank'> {URL}</a>
</div>

Таким образом вы сможете оформить блок для скачивания как вам угодно. Но пользы от этого будет немного — основные сервисы в своём плеере дают прямую ссылку на видео. На ютубе — клик по лого, например.

[Ёжъ]

Благодарю, VEG! Всё, сделал красиво как надо- обтянув всё третим блоком, который и стилизовал:

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

<div style='width: 656px; overflow: hidden; vertical-align: bottom; -moz-border-radius: 12px; -webkit-border-radius: 12px; border: 4px ridge #6f6; padding: 4px;'><div class='bbvideo' data-url='{URL}' style='width: 640px; height: 390px; margin: 2px 0; display: inline-block; background: #B5C74E; color: #420; overflow: hidden; vertical-align: bottom; -moz-border-radius: 12px; -webkit-border-radius: 12px; border: 4px ridge #6f6; padding: 4px;'><div style='height: 99%;'><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><div style='text-align: right; height: 14px; margin-top: -14px; padding-right: 2px; font: 10px/10px Verdana; color: #555;'><a style='color: #105289; text-decoration: none;' href='http://phpbbex.com/' target='_blank'> phpBB</a> &#91;video&#93;</div></div><br><strong>Ссылка для скачивания: </strong><a href='{URL}' target='_blank'> {URL}</a></div>

Дают прямую ссылку? Первый раз слышу.. Ютуб наоборот вроде постоянно алгоритмы меняет чтоб сайты и проги- качальщики отключать. Да и у них же много форматов каждого видео хранится- как одной это кнопкой? Да и для этого надо с форума уходить на сервисы- долго. Например я ссылку перетягиваю в Download Master- он часто обновляет алгоритмы ютуба и сам переименовывает.

Вижу появились несколько форматов видео по прямым ссылкам- радует! А будут ли работать другие- avi wmv divx или это сложно из-за разных контейнеров и кодеков?

[VEG]

Добавлена поддержка сервиса ustream.tv. Поддерживается как адрес страницы, так и адрес из кода встраивания. Варианты поддерживаемых ссылок:

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

http://www.ustream.tv/recorded/24512027
http://www.ustream.tv/embed/recorded/24512027
http://www.ustream.tv/channel/6540154
http://www.ustream.tv/embed/6540154
http://www.ustream.tv/recorded/25906299
http://www.ustream.tv/embed/recorded/25906299?v=3&wmode=direct
http://www.ustream.tv/channel/11857029
http://www.ustream.tv/embed/11857029?v=3&wmode=direct

Пример видео (насчёт посадки марсохода Curiosity):
[media]http://www.ustream.tv/recorded/24512027[/media]