HTML5 Embedded Video & Audio Player - BBCode

[Coop1979]

This will work on all versions of VB.

With support for HTML5 in FireFox, Safari, and Google Chrome, it's now very easy to embed videos or audio on your site without the need for a lot of special coding or plug-ins. The <video> tag is supposed to replace Flash by linking to video files in the same way that the <img> tag links to images. The only catch is that right now the video files have to be in either .ogg, .ogv, .oga, or .ogx formats. These are all open source formats and easy to find converters for.

Instructions:

Go to your AdminCP, look under Custom BB Codes, then click Add New BB Code.

Title: HTML5 Video
BB Code Tag Name: video
Replacement: <video src="{param}" width="640" height="360" controls>
Your Browser does not support the video tag, upgrade to Firefox 3.5+, Google Chrome, or Safari.</video>
Example: http://upload.wikimedia.org/wikipedia/commons/9/9d/Roomba_video.ogv
Description: Use this code to embed ogv HTML5 videos.

Click "Save" and...
Done!

[as7apcool]

thanks 4 good work

[DivineMessenger]

it says video and audio, what audio types does it support?

[mandingo]

it says video and audio, what audio types does it support?
Depends on the browser,double redundancy(have a "backup" filetype)usually covers it (unless someone's using ie,then..well..)
http://html5doctor.com/native-audio-in-the-browser/

[gyaronn]

thank you nice hack :-)

[Coop1979]

Glad to hear people are finding this useful! Just in recent days HTML5 Video is really catching on with the iPad coming out - CBS, ABC, and others are moving to HTML5 Video distribution.

[jkcerda]

cool

[gyaronn]

is there a program that i can use to convert to this format (i have a mac)??

[jan1024188]

Is this safe to use?

[War.Frog]

is there a program that i can use to convert to this format (i have a mac)??

http://www.mirovideoconverter.com/download_osx.html

Windows version here: http://www.mirovideoconverter.com/

[Frondy]

There is already [video] tag in VB4, could it be a problem?

[BadgerDog]

http://www.mirovideoconverter.com/download_osx.html

Windows version here: http://www.mirovideoconverter.com/


Thanks .. :)

Downloaded it, but I don't see any options in this program to convert to .ogg, .ogv, .oga, or .ogx formats? :confused:

Regards,
Badger

Edit: NM... found it.. :) It's called "Theora" ... going to do a conversion from WMV and try this ...

[BadgerDog]

Used their converter to convert a small MP4 file to OGV file type and it won't play with the BBCode used in this mod.... :confused:

Any ideas anyone?

Thanks .. :)

Regards,
Badger

[BadgerDog]

Note: Apple just released a new Safari Version 5.0 (6533.16) for OSX Leopard and it plays ALL the videos I've converted with the "microconverter" software I referred to above. The previous version didn't work with HTML5 videos.

FireFox 3.6.3 on OSX Leopard plays the demo video used for this mod, but NONE of the converted videos.

IE8 under Windows XP just sits there and says "loading" with ALL the videos ... :D

I think HTML5 is the future for videos under vBulletin 4 (we're testing this under v4.03), but obviously all browser platforms under all operating systems need to support the standard properly.

Just my opinion ... ;)

Regards,
Badger

[camoit]

This is cool. Do you have a embed for windows midea player for live streamming video or audio? I havent fornd one that will work yet.

[gopherhockey]

This is not working. First, there is already a type video, so you can't just save it as suggested above. The video BB code has a lot of options for different providers, such as hulu, youtube, google etc. It seems the best way to do this is to edit that template and modify the services that can handle HTML5 as suggested here: https://vborg.vbsupport.ru/showthread.php?t=261336

I tested with youtube and get just a blank white screen.

[DaffyDuck]

This really needs some modifications to work - first of all, the best way would be have it specify a different video shortcode, so as not to conflict with the [video] shortcode that is part of vB, at this time. I'd suggest something like [h5video] or [html5video].

Furthermore, unlike the original description, which says "The only catch is that right now the video files have to be in either .ogg, .ogv, .oga, or .ogx formats', HTML5 video supports a far wider variety of video formats: H.264 (video) and AAC (audio) are the preferred formats, and supported on Apple Safari, iPad and iPhone MobileSafari, and any webkit browsers (Android); you only need to worry about ogg if you are stuck with Firefox or Opera, and they stupidly dogmatic non-standard codec; or simply support Google's webM.

There are converters for most of these - I have found that H.264/AAC provide for the smallest files, at the highest quality, using low-bandwidth the best; ogg will invariably yield the worst quality and the largest files - stay away if you can; webM is 'okay'. It's basically the long abandoned On8 video codec - meh.

I need something like this to embed HTML5 H.264/AAC video, with smart fallback to Flash, or webM. Ideally, with a smart Javascript controller overlay - there are some great such frameworks that provide this, like Projekktor or MediaElement.js, which I was hoping someone would make a vb Plugin with.

[Bisha]

but if we use [VIDEO] as tag, will the video tag work also for youtube and other?

[brandondrury]

I'm not having any luck getting this to work in Opera, iPad, or iPhone for audio. It seems like it's the attachment URL format which is a query string and not a "mp3" file. Anyone else had this problem?

Brandon

[blackheartMA]

this code is not working on Google chormo and Ie edge .. just working on Firefox