vBulletin [media]

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

Установка [media] (с автоматическими размерами)

  1. Админка, Custom BB Codes, Add New BB Code.
  2. В поле «Title» введите:
    Мультимедиа
  3. В поле «BB Code Tag Name» введите:
    media
  4. В поле «Replacement» введите (вводить без изменений!):
    <div class="bbmedia" data-url="{param}" 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="http://veg.by/bbmedia/vbulletin/media/" target="_blank">vBulletin &#91;media&#93;</a></div><script>if (typeof bbmedia == "undefined") { bbmedia = true; var e = document.createElement("script"); e.charset="utf-8"; e.async = true; e.src = "http://phpbbex.com/api/bbmedia.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(e, s); }</script></div>
  5. В поле «Example» введите:
    [media]http://youtu.be/8cavNK87h3s[/media]
  6. В поле «Description» введите:
    Вставить аудио, видео, карту или панораму
  7. «Use {option}» должно быть выключено
  8. Если вы не будете устанавливать дополнительный [media=ширина,высота], в поле «Button Image» введите:
    http://phpbbex.com/api/bbmedia-icon.png
  9. Включите оставшиеся опции: «Remove Tag If Empty», «Disable BB Code Within This BB Code», «Disable Smilies Within This BB Code», «Disable Word Wrapping Within This BB Code», «Disable Automatic Link Parsing Within This BB Code»
  10. Форма должна выглядеть примерно так. Сохраните форму. Готово!

Установка [media=ширина,высота] (дополнительно)

  1. Админка, Custom BB Codes, Add New BB Code.
  2. В поле «Title» введите:
    Мультимедиа
  3. В поле «BB Code Tag Name» введите:
    media
  4. В поле «Replacement» введите (вводить без изменений!):
    <div class="bbmedia" data-url="{param}" data-args="{option}" 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="http://veg.by/bbmedia/vbulletin/media/" target="_blank">vBulletin &#91;media&#93;</a></div><script>if (typeof bbmedia == "undefined") { bbmedia = true; var e = document.createElement("script"); e.charset="utf-8"; e.async = true; e.src = "http://phpbbex.com/api/bbmedia.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(e, s); }</script></div>
  5. В поле «Example» введите:
    [media=320,240]http://youtu.be/8cavNK87h3s[/media]
  6. В поле «Description» введите:
    Вставить аудио, видео, карту или панораму с указанием предпочитаемых размеров плеера
  7. Включите «Use {option}»
  8. В поле «Button Image» введите:
    http://phpbbex.com/api/bbmedia-icon.png
  9. Включите оставшиеся опции: «Remove Tag If Empty», «Disable BB Code Within This BB Code», «Disable Smilies Within This BB Code», «Disable Word Wrapping Within This BB Code», «Disable Automatic Link Parsing Within This BB Code»
  10. Форма должна выглядеть примерно так. Сохраните форму. Готово!

vBulletin [media]: 39 комментариев

  1. M.C.

    Хм… странно но пишет Invalid BBCode… кроме того если делаю код с опшином то не парсит ссылки на аудио :(

  2. VEG Автор записи

    Проверье, не вмешивается ли ваш движок в HTML код BBCode. Таким иногда шалят некоторые модификации, на что BB [media] реагирует болезненно.

  3. M.C.

    «Проверье, не вмешивается ли ваш движок в HTML код BBCode. Таким иногда шалят некоторые модификации, на что BB [media] реагирует болезненно.»
    Как это сделать? Спасибо!

  4. VEG Автор записи

    Отключите все модификации и включайте их по одной до тех пор, пока BB [media] будет работать.

  5. madfragger

    Поддержка яндекс карт не планируется?

  6. VEG Автор записи

    Пока они не добавят поддержку встраивания их карт при помощи iframe — нет, не планируется.

  7. Вася

    Уважаемый VEG, я обращался к Вам на форуме vbsupport, но судя по-всему, Вы давно туда не заходите. У меня пара вопросов, по-поводу не срабатывания скрипта при быстром ответе/редактировании. И про правильный синтаксис кода вставки с использованием HTML5.
    Здесь подробнее:
    http://vbsupport.org/forum/showpost.php?p=466525&postcount=165
    Буду очень признателен за Ваш ответ.
    И спасибо Вам за сей чудесный скрипт ))))

  8. VEG Автор записи

    Вася, здравствуйте. Этот сайт опять требует от меня смены пароля, поэтому пишу здесь. Только что добавил поддержку плееров, появляющихся на AJAX. То есть должно теперь у вас заработать. Очистите кэш браузера и обновите файл скрипта (если у вас локальная копия). Отпишитесь о результате, помогло ли.

  9. Вася

    Да…. с паролями у них беда. Меня тоже это раздражает.. Но Бог с ними)))
    Сейчас скрипт срабатывает сразу. Спасибо огромезное!!!!!!
    Что с HTML5, подскажите как правильно вставлять его?
    Ну и плюс… гугл.мапы обновили интерфейс, и теперь их шар-ссылки не работают. Если возвращаться к классическому стилю, и там получать ссылку то всё нормально….

  10. Вася

    С HTML5 разобрался. Я мудрил и пытался вставлять через тег , но как теперь мне уже ясно, он видимо проставлен в теле скрипта для bbкода))) То-есть нужно просто использовать прямую ссылку на файл.
    И вот кстати именно с этим вариантом, остаётся проблема при быстром ответе/редактировании. Видео либо вообще не появляется в плеере, либо корявенько отображается.
    Ну и остаётся открытым вопрос о новом интерфейсе гугл-мапов…

  11. VEG Автор записи

    Вася, новый формат URL на Google Maps пока что не поддерживается. Пока он находится в режиме preview и многое может измениться. Как они закончат с его тестированием — будем изучать возможность поддержки новых карт.

    HTML5 плеер умеет проигрывать только файлы по прямым ссылкам. Рекомендую сервис pleer.com — отличный плеер, куча музыки, хорошо встраивается на форумы. BB [media] поддерживает pleer.com.

    Какого плана проблемы при редактировании? Какой браузер? Можно скриншот?

  12. Вася

    Относительно гугл-мап — принято!
    ——
    Относительно быстрого ответа/редактирования…
    Вот так видео выглядит в хроме, после быстрого ответа:
    http://savepic.net/5060413.htm
    http://savepic.net/5109564.htm
    Вот так аудио:
    http://savepic.net/5099324.htm
    И в том и в другом случае, кнопка «плей» не активна. Но если по ней кликнуть, спустя секунд 20-30 воспроизведение начинается и при этом наблюдается повышенный относительно обычных условий, расход процессорного времени.
    ——
    В FF всё работает нормально
    ——
    В Опере и в IE10 отображается заглушка. И там она остаётся со всеми видами вставки. Как через HTML5, так и через шаравые ссылки.

  13. VEG Автор записи

    Касательно карт рекомендую на замену сервис share.mapbbcode.org — он поддерживается в BB [media] и позволяет даже рисовать на карте разные штуки. Весьма удобно.

    Фишка с отслеживанием появления плеера на AJAX использует современные возможности браузеров, поддержка которых есть только в Firefox 14+, Chrome 27+, Safari 6.1+, Opera 15+ и IE11+. Для более старых браузеров пришлось бы делать способом, который замедлял бы работу страниц, поэтому (с учётом постоянно падающей доли старых браузеров) было решено использовать современные инструменты (MutationObserver).

    Что касается проблем с HTML5 плеером Хрома — весьма странно. Там используется стандартный браузерный HTML5 плеер, с которым проблем быть не должно. После отправки сообщения, когда страница загружается нормальным образом, такой проблемы ведь нет, верно? Нужно будет детальнее изучить вопрос.

  14. Вася

    Ага. Я понял. Опера действительно старенькая на которой я пробовал. 12-я версия. Ну IE…. я его в расчёт вовсе не беру. Просто для инфы попробоал на нём. А вот хром последненький у меня….
    И если отправлять ответ обычным способом, то да — никаких проблем.

  15. Василий Теркин

    Здравствуйте.Скрипт отказывается вставлять видео с vk.com , выдает ошибку. Что не так?

  16. VEG Автор записи

    На vk.com поддерживаются только ссылки из кода встраивания, адрес страницы использовать нельзя.

  17. VEG Автор записи

    Отлично всё работает. По указанной вами ссылке нажмите «Поделиться», затем «Экспорт видеозаписи», там вы увидите код встраивания. Из этого кода встраивания и нужно взять ссылку.

  18. Василий Теркин

    Извините,туплю,все работает.А можно сделать чтобы ВВкод сам вытаскивал ссылку из «кода вставки»? Такие манипуляции достаточно сложны для неопытных пользователей. Или вообще сделать авто-распознавание медиа содержимого…

  19. VEG Автор записи

    Это ограничение vk.com, обойти которое непросто. Используйте youtube или любой другой сервис, который работает без ограничений. Вот и всё решение проблемы.

  20. Вася

    Здравствуйте! Это снова я))) Я писал Вам по-поводу проблем с ajax добавленными данными(короче с быстрым ответом).
    Я добавил на страницах темы форума кнопку, при нажатии которой, без перезагрузки, добавляются сообщения следующие после последнего текущего(вообщем навигация без перезагрузки страницы). При этом раскладе, вместо видео, отображается квадратик с надписью vBulletin [media].
    У меня был другой скрипт, который тоже не работал, но я нашёл способ его правильной инициализации после добавления данных ajax-ом. Не подскажите, как в данной ситуации, правильно инициализировать Ваш скрипт(если конечно это возможно)?

  21. Вася

    Отбой… просто вставил содержимое тега из кода замены. Вроде заработало…

  22. Сергей

    Здравствуйте, уважаемый VEG
    Опробовал Ваш продукт на новой версии vBulletin 5.1.10. Однако, в Chrome столкнулся со следующей проблемой: в консоли каждый раз всплывает сообщение о проблемах встроенного плеера:

    www-embed-player.js:580 GET chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js net::ERR_FAILED
    www-embed-player.js:580 GET chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js net::ERR_FAILED
    www-embed-player.js:580 GET chrome-extension://pkedcjkdefgpdelpbcmbmeomcjbeemfm/cast_sender.js net::ERR_FAILED
    www-embed-player.js:580 GET chrome-extension://fjhoaacokmgbjemoflkofnenfaiekifl/cast_sender.js net::ERR_FAILED

    Подскажите, Вы все еще поддерживаете свой проект? И что можно сделать для предотвращения этих ошибок, если они действительно критичны (сейчас мне тяжело об этом судить)

  23. Сергей

    Дополню: в конечном итоге, использование bbcode media для форума на платформе vBulletin 5 иногда вызывает ошибку js на странице в плане

    Uncaught TypeError: $.cookie is not a function
    Uncaught TypeError: I.dialog is not a function
    и
    Uncaught TypeError: V.appendTo(…).autocomplete is not a function

    Что в последствии приводит к краху работоспособности отправки сообщений и т.д.

  24. VEG Автор записи

    Сергей, судя по всему, приводимые вами ошибки происходят не в коде bbmedia. То есть виновник кто-то другой.

  25. Сергей

    Нет. Действительно не в них, а в основных скриптах vBulletin 5. И опять же не постоянно. Раз через раз. Бывает такое, что при постинге сообщения с медиа-тегом возникает конфликт родных js-файлов vBulletin 5 и media-тегом и что-то у форума «отваливается»)

  26. ТОлян

    Хм! Вставляется так [MEDIA=https://youtu.be/VP154BCMe-U][/MEDIA]
    А должно быть так — [MEDIA=https://youtu.be/VP154BCMe-U]https://youtu.be/VP154BCMe-U[/MEDIA]

  27. ТОлян

    И как пользователям объяснить, что сначала надо вставить ссылку, выделить ее, а потом вставить ВВ код?

  28. VEG Автор записи

    Должно быть так:
    [MEDIA]https://youtu.be/VP154BCMe-U[/MEDIA]

  29. ТОлян

    Мне видео снять?
    Булка 4.2.3
    Процесс — жмем на иконку / во всплывающее окно вставляем ссылку / жмем ОК / получаем [MEDIA=https://youtu.be/VP154BCMe-U][/MEDIA]
    В общем смотрим https://youtu.be/HrQ5RI09g5Q

  30. VEG Автор записи

    Покажите скриншот страницы в админке с настройками этого BBCode, пожалуйста.

  31. VEG Автор записи

    Используйте версию кода с автоматическими размерами. То есть галочка «использовать опцию» должна быть выключена и должен использоваться вариант кода без {option}.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *