[ABD] phpBB [video]: universal video bbcode (no code changes)

[VEG]

Modification Name: phpBB [video] v1.13
Modification Description: Universal video bbcode without any code changes
Installation Level: Easy
Installation Time: ~1minute

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

We are glad to present you a new universal BBCode "phpBB [video]" which is compatible with both phpBB and phpBBex. To install you do not need to edit any files, it can be added through the admin panel or by running installation script.

Usage example

The user copies the URL of the page of the video and inserts it between the [video][/video]:

Code: Select all

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

or (with size specified):

Code: Select all

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

It is displayed as follows (it's an image, live phpBB [video] demo on my forum):


Supported video services

Currently the following video services are supported:

• youtube.com (youtu.be) - playlists are also supported
• vimeo.com
• vk.com (vkontakte.ru) — the URL from the embed code is required
• facebook.com
• dailymotion.com
• ustream.tv — streams and recorded videos
• twitch.tv — streams and recorded videos
• metacafe.com
• video.google.com
• video.yandex.ru — the URL from the embed code is required
• myvideo.de
• own3d.tv
• clipfish.de
• veevr.com
• rutube.ru — it is recommended to use the URL from the embed code
• video.mail.ru
• smotri.com
• video.qip.ru
• video.bigmir.net
• tvigle.ru — the URL from the embed code is required
• video.online.ua
• video.sibnet.ru
• yapfiles.ru
• megogo.net
• intv.ru
• lovi.tv
• WebM, OGV and MP4 files via HTML5 <video> tag

URLs do not need to be cleaned from the garbage arguments as our [video] will work it out. You can use both the URL of the video page and the URL of the embed code (unless other instructions are given).

In the nearest future the following video services will be supported:

• hulu.com
• webm, mp4 and flv video files

It is convenient that our bbcode is updated and new services are supported automatically. If our BBCode doesn't support the needed video service, we will be happy to add it. In this topic, please provide the URL of the page of the video with the video service you're interested in and the embed code. It will help us to add support of the service. If the new video service is demanded we will soon add the support to our video bbcode.

Automatic installation of [video] and [video=] (with local js)

MODX instruction: install_bbvideo.zip

Manual installation of [video] (fixed size)

1. Admin panel, tab "Posting", page "BBCodes", add BBCode (if you already have a [video] then delete it).
2. In the field "BBCode usage" enter:

Code: Select all

[video]{URL}[/video]

3. In the field "HTML replacement" enter (you can only change the width and height of the layer!):

Code: Select all

<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: #105289; text-decoration: none;' href='http://phpbbex.com/' target='_blank'>phpBB</a> &#91;video&#93;</div></div>

4. In the field "Help line" enter:

Code: Select all

Insert video: [video]http://youtube.com/url[/video]

5. Set the checkbox "Display on posting" and save the form. Done!

Manual installation of [video=width,height] (in addition to the previous)

1. Admin panel, tab "Posting", page "BBCodes", add BBCode (if you already have a [video=] then delete it).
2. In the field "BBCode usage" enter:

Code: Select all

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

3. In the field "HTML replacement" enter (no change!):

Code: Select all

<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: #105289; text-decoration: none;' href='http://phpbbex.com/' target='_blank'>phpBB</a> &#91;video&#93;</div></div>

4. In the field "Help line" enter:

Code: Select all

Insert video: [video=width,height]http://youtube.com/url[/video]

5. Save the form. Done!

Links

English language demo of phpBB [video]
Russian language support of phpBB [video]

[4_seven]

You forget this requirement: Works in all browsers with full html 5 support.

[VEG]

You forget this requirement: Works in all browsers with full html 5 support.

It must work in older browsers too (via flash).

[4_seven]

The user can simply test it here
http://www.w3schools.com/html5/html5_video.asp

[VEG]

Please try this BBCode. It works without HTML5 <video>.

[4_seven]

then its clear now. its a kind of <video> emulator via javascript
with an external js source http://phpbbex.com/api/bbmedia.js

[VEG]

A couple of news:

1. Now phpBB [video] supports myvideo.de (popular in Germany). Example:

Code: Select all

[media]http://www.myvideo.de/watch/7613831/Fler_Der_Chef[/media]

Live demo:
http://phpbbex.com/forum/viewtopic.php?f=9&t=29#p367

2. Many code optimizations

[DREGS]

Can you add support for twitch.tv recorded videos?

Example:
http://www.twitch.tv/ggnetpurge/b/321425273

[Citromon]

It's very cool mod! Thanks.

I have 1 question: exist 3 your bbcodes: audio, video and media. Do you want to make a "maps" bbcode?

[VEG]

Can you add support for twitch.tv recorded videos?

I'll try to do it later.

Do you want to make a "maps" bbcode?

Use [media] bbcode for it. [media] supports Google Maps.

[VEG]

1. Now phpBB [video] supports intv.ru and lovi.tv (popular in CIS). Examples:

Code: Select all

[video]http://www.intv.ru/v/3paglQbQe[/video]

Code: Select all

[video]http://lovi.tv/video/bzdwnirfug/Gost_Perepis_141010[/video]

2. Also now WebM, OGV and MP4 files supported via HTML5 <video> tag.

[bacon tacon]

Photobucket video support would be nice too

[keith10456]

Sweet

[DavidIQ]

Hello,

This is not a MOD. Custom BBCodes go here. If you would like to post this there you are welcome to do so.

Locked.

[DavidIQ]

Re-opening as there seems more to this than just a BBCode change.