HTML5 Audio and Video BBCodes

[DoctorMalboro]

Link to Mod

HTML5 Audio and Video BBCodes

Created by DoctorMalboro

Description:

• You can embed direct videos to your website (it must end with a video extension, example: randomsite.com/video.mp4).
  
• You can embed direct audio to your website (it must end with an audio extension, example: randomsite.com/audio.mp3).
  
• It only use a new HTML5 tag (see more here).
  
• Very Light-weight.
  
• In videos you can set width (in pixels), height (in pixels), loop (putting true or false) and autoplay (putting true or false).
  
• In audio you can set loop (putting true or false) and autoplay (putting true or false).
  
• It comes with a default look that already comes in your browser engine.
  
• If the user can't see the neither of both players, it will automatically appear a message.

Update Map:

1.0 beta 1 = Initial release / Still in beta phase.

Any questions ask it in the support topic or in my personal blog. I DO NOT GIVE PRIVATE SUPPORT for my mods.

[!RFAN]

thats really great... can i use .flv extension??

gonna try it

thanks

[DoctorMalboro]

thats really great... can i use .flv extension??

gonna try it

thanks

It accepts every video format. What it doesn't work are things like youtube videos (maybe it could be a feature soon...)

[gfsymon]

I'd love this mod, but it has two problems.

1/ it auto loops and auto plays, despite the settings in the code.

2/ it shows up as a grey rectangle in Firefox and can't be used.  (There is a momentary flash of the correct look, before it is replaced by the grey rectangle).

[Arantor]

It only supports the formats your browser supports. With Chrome for example, H.264 movies won't play now without the Microsoft plugin.

[gfsymon]

Thanks for the reply.  The firefox problem is less of an issue for me, but the auto-play and auto-loop set to 'false', not working, is a much bigger issue.  Can anyone suggest how this might get fixed?

[DoctorMalboro]

By the 15 i'll update all my mods.

[gfsymon]

By the 15 i'll update all my mods.

Excellent.

Will this work with RC4 and RC5 and vs 2.0?   (Just planning ahead  )

[DoctorMalboro]

I think i'm going to update all my mods to the security patch only...

[dougiefresh]

Thank you for the wonderful mod!  I thought I'd let everybody know that when I updated my forum from 2.0 RC5 to 2.0 Gold, I had to reinstall all my mods.  This mod installed without issues and using 2.0 RC4 emulation.  Hope this info helps someone!

[pixeleyes]

I just installed this mod on SMF 2.0.2 by using Emulate Version without error.

After post mp3 only once audio player appears then hide.

What could be the reason?

[pixeleyes]

anyone???

[WillyP]

What browsers have you tested this with?

[pixeleyes]

Firefox and IE8

[Babyfacemagee]

So I installed your Mod and it works great for the most part.  Were you ever able to figure out a way to keep Youtube videos embedded in mobile browsers like Chrome?   The videos play embedded when I use my desktop browser (Chrome) but when I try to play the file on an Android tablet it opens up the 'Youtube App' and plays the video there instead of playing it while embedded.   Any idea how to fix that?

BFM

[Darkness_Black]

Very good this MOD congratulations.
I have a problem, my videos are starting to self alone, and even after you get to the end it starts again I do?

[Apllicmz]

whem Update
Dont Forget Portuguese Linguage

Code Select Expand

<file name="$languagedir/Modifications.portuguese_pt.php" error="skip">
        <operation>
            <search position="end" />
            <add><![CDATA[$txt['html5_audio_no_supported'] = 'Seu navegador n&atilde;o suporta tags de &aacute;udio HTML5. Melhor tentar um novo como <a href="http://www.mozilla.com/en-US/firefox/beta/" target="_blank">Firefox</a> or <a href="http://www.opera.com/" target="_blank">Opera</a>';
            $txt['html5_video_no_supported'] = 'Seu navegador n&atilde;o suporta Tag de v&iacute;deo HTML5. Melhor tentar um novo como <a href="http://www.mozilla.com/en-US/firefox/beta/" target="_blank">Firefox</a> or <a href="http://www.opera.com/" target="_blank">Opera</a>';
            $txt['html5_audio'] = 'Voc&ecirc; pode colocar .mp3, .wav, .ogg e todos os outros ficheiros de &aacute;udio digite.';
            $txt['html5_video'] = 'Voc&ecirc; pode colocar .mp4, .avi, .flv e todos os outros ficheiros de v&iacute;deo digite.';
            ]]></add>
        </operation>
    </file>

<file name="$languagedir/Modifications.portuguese_pt-utf8.php" error="skip">
        <operation>
            <search position="end" />
            <add><![CDATA[$txt['html5_audio_no_supported'] = 'Seu navegador n&atilde;o suporta tags de &aacute;udio HTML5. Melhor tentar um novo como <a href="http://www.mozilla.com/en-US/firefox/beta/" target="_blank">Firefox</a> or <a href="http://www.opera.com/" target="_blank">Opera</a>';
            $txt['html5_video_no_supported'] = 'Seu navegador n&atilde;o suporta Tag de v&iacute;deo HTML5. Melhor tentar um novo como <a href="http://www.mozilla.com/en-US/firefox/beta/" target="_blank">Firefox</a> or <a href="http://www.opera.com/" target="_blank">Opera</a>';
            $txt['html5_audio'] = 'Voc&ecirc; pode colocar .mp3, .wav, .ogg e todos os outros ficheiros de &aacute;udio digite.';
            $txt['html5_video'] = 'Voc&ecirc; pode colocar .mp4, .avi, .flv e todos os outros ficheiros de v&iacute;deo digite.';
            ]]></add>
        </operation>
    </file>

[musicus]

Very nice addon, but unfortunately for our Forum at the moment not to use. No matter whether I edit "false" or "true", it plays automatically and always in the loop. Hope that as soon as possible an update comes. Beneficial it would be if you could adjust the settings via the ACP.

Is definitely much better than the Flash MP3 player, which are now being used to our forum.
I use only Firefox

Sorry for my bad english

[engrz]

Hello

can i use this on smf 2.0.11?

[musicus]

Hello

can i use this on smf 2.0.11?

Yes, it is, but not usable at the moment, because it makes no matter what configuration, always autoplay


You have to emulate SMF to "2 RC4", then you can install the addon without problems

[PracticalLightning]

Thanks for the Mod DoctorMalboro!  Your work is greatly appreciated.

I just installed this in 2.0.11 (using SMF 2.0 RC4 emulation) with no trouble.

I too had the issue where it would autoplay and loop regardless of configuration settings. I am reasonably sure that I will never need autoplay or loop so I simply modified line 23 of modification.xml as follows:

Changed FROM:

Code Select Expand

               'content' => '<audio src="$1" autoplay="{autoplay}" loop="{loop}" controls="controls">'.$txt['html5_audio_no_supported'].'</audio>',
TO:

Code Select Expand

               'content' => '<audio src="$1" controls="controls">'.$txt['html5_audio_no_supported'].'</audio>',

...and was rewarded with just the mp3 player I was looking for.

(I imagine I could do the same sort of thing on the video portion of the code but will never know unless I ever have a need for the video feature.)

[CreativeITWorld.com]

Thank you to the Mod creator and to MtZionIndy for the code hack. Your efforts inspired me to go that one step further.

* Centered video and audio
* Video size change to 480x360
* Remove autoplay and loop from video
* Repeat MZI's hack and remove autoplay and loop from audio
* And in package-info I changed the SMF install/uninstall version to 2.*.*

Same file: modification.xml
* Paste the following into the Source/Subs.php and Source/Subs-Editor.php area

<file name="$sourcedir/Subs.php">
      <operation>
         <search position="before"><![CDATA[         array(
            'tag' => 'left',
            'before' => '<div style="text-align: left;">',
            'after' => '</div>',
            'block_level' => true,
         ),]]></search>
         <add><![CDATA[            array(
                'tag' => 'audio',
                'type' => 'unparsed_content',
                'parameters' => array(
                ),
                 'content' => '<div align="center"><audio src="$1" controls="controls">'.$txt['html5_audio_no_supported'].'</audio></div>',

                'block_level' => true,
            ),
            array(
                'tag' => 'video',
                'type' => 'unparsed_content',
                'parameters' => array(
                       'width' => array('optional' => false),
                       'height' => array('optional' => false),
                ),
                'content' => '<div align="center"><video src="$1" width="{width}" height="{height}" controls="controls">'.$txt['html5_video_no_supported'].'</video></div>',
                'block_level' => true,
            ),]]></add>
      </operation>
   </file>

   <file name="$sourcedir/Subs-Editor.php">
      <operation>
         <search position="after"><![CDATA[         array(
            'image' => 'flash',
            'code' => 'flash',
            'before' => 'http://','after'%20=>%20'',
            'description' => $txt['flash']
         ),]]></search>
         <add><![CDATA[            array(
            'image' => 'audio',
                'code' => 'audio',
                'before' => '[audio]',
                'after' => '[/audio]',
                'description' => $txt['html5_audio']
            ),
            array(
            'image' => 'video',
                'code' => 'video',
                'before' => '[video width=480 height=380]',
                'after' => '[/video]',
                'description' => $txt['html5_video']
            ),]]></add>
      </operation>
    </file>

[shadav]

Thank you to the Mod creator and to MtZionIndy for the code hack. Your efforts inspired me to go that one step further.

* Centered video and audio
* Video size change to 480x360
* Remove autoplay and loop from video
* Repeat MZI's hack and remove autoplay and loop from audio
* And in package-info I changed the SMF install/uninstall version to 2.*.*

Same file: modification.xml
* Paste the following into the Source/Subs.php and Source/Subs-Editor.php area

<file name="$sourcedir/Subs.php">
      <operation>
         <search position="before"><![CDATA[         array(
            'tag' => 'left',
            'before' => '<div style="text-align: left;">',
            'after' => '</div>',
            'block_level' => true,
         ),]]></search>
         <add><![CDATA[            array(
                'tag' => 'audio',
                'type' => 'unparsed_content',
                'parameters' => array(
                ),
                 'content' => '<div align="center"><audio src="$1" controls="controls">'.$txt['html5_audio_no_supported'].'</audio></div>',

                'block_level' => true,
            ),
            array(
                'tag' => 'video',
                'type' => 'unparsed_content',
                'parameters' => array(
                       'width' => array('optional' => false),
                       'height' => array('optional' => false),
                ),
                'content' => '<div align="center"><video src="$1" width="{width}" height="{height}" controls="controls">'.$txt['html5_video_no_supported'].'</video></div>',
                'block_level' => true,
            ),]]></add>
      </operation>
   </file>

   <file name="$sourcedir/Subs-Editor.php">
      <operation>
         <search position="after"><![CDATA[         array(
            'image' => 'flash',
            'code' => 'flash',
            'before' => 'http://','after'%20=>%20'',
            'description' => $txt['flash']
         ),]]></search>
         <add><![CDATA[            array(
            'image' => 'audio',
                'code' => 'audio',
                'before' => '[audio]',
                'after' => '[/audio]',
                'description' => $txt['html5_audio']
            ),
            array(
            'image' => 'video',
                'code' => 'video',
                'before' => '[video width=480 height=380]',
                'after' => '[/video]',
                'description' => $txt['html5_video']
            ),]]></add>
      </operation>
    </file>

I know this is an old topic, but thank you for this....I switched out where you placed

Code Select Expand

width=480 height=380
with

Code Select Expand

width=30% height=30%
to try and make it a bit more responsive and not huge
when posting you can simply change the preset 30% to whatever you would like (% or px) and it'll work

[Yoksven]

Doesn't appear to be working on SMF 2.0.18. Instead of installation it gives me "incompatible with the current version, try installing in emulation mode" or something like that (and I'm afraid of emulation mode, I broke smf a couple of times before when I tried using it). Even if I modify files by hand it still doesn't appear to do anything. All .mp4 links still look like links, no player.

I really want this to work. I would love to add some files to posts and have them be playable without any extra hassle. Can someone help?

Update: Nevermind. I found this.

[aegersz]

If you wish to serve your local files then it's easy to use dougie's Custom BBCodes Manager.

I have one BBC configured for audio and one for video

[shadav]

Doesn't appear to be working on SMF 2.0.18. Instead of installation it gives me "incompatible with the current version, try installing in emulation mode" or something like that (and I'm afraid of emulation mode, I broke smf a couple of times before when I tried using it). Even if I modify files by hand it still doesn't appear to do anything. All .mp4 links still look like links, no player.

I really want this to work. I would love to add some files to posts and have them be playable without any extra hassle. Can someone help?

Update: Nevermind. I found this.

if you don't want to use the emulation mode
in the package_info.xml
find

Code Select Expand

<install for="2.0 RC4">
replace with

Code Select Expand

<install for="2.0 - 2.0.99">

find

Code Select Expand

<uninstall for="2.0 RC4">
replace with

Code Select Expand

<uninstall for="2.0 - 2.0.99">

If you wish to serve your local files then it's easy to use dougie's Custom BBCodes Manager.

I have one BBC configured for audio and one for video

this is a good option as well, though for this purpose I like to use the Personalized BBC mod, I don't know it just seemed easier to do with that one than the custom bbcode one