Simple Machines Community Forum

Customizing SMF => Modifications and Packages => Topic started by: DoctorMalboro on January 26, 2011, 10:33:15 PM

Title: HTML5 Audio and Video BBCodes
Post by: DoctorMalboro on January 26, 2011, 10:33:15 PM
Link to Mod (http://custom.simplemachines.org/mods/index.php?mod=2819)

HTML5 Audio and Video BBCodes

Created by DoctorMalboro (http://www.simplemachines.org/community/index.php?action=profile;u=231541)




Description:




Update Map:

Quote1.0 beta 1 = Initial release / Still in beta phase.




Any questions ask it in the support topic or in my personal blog (http://doctormalboro.com). I DO NOT GIVE PRIVATE SUPPORT for my mods.
Title: Re: HTML5 Audio and Video BBCodes
Post by: !RFAN on January 27, 2011, 02:26:41 AM
thats really great... can i use .flv extension??

gonna try it :)

thanks
Title: Re: HTML5 Audio and Video BBCodes
Post by: DoctorMalboro on January 27, 2011, 09:17:23 AM
Quote from: !RFAN on January 27, 2011, 02:26:41 AM
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...)
Title: Re: HTML5 Audio and Video BBCodes
Post by: gfsymon on February 08, 2011, 11:28:18 AM
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).

Title: Re: HTML5 Audio and Video BBCodes
Post by: Arantor on February 08, 2011, 11:34:53 AM
It only supports the formats your browser supports. With Chrome for example, H.264 movies won't play now without the Microsoft plugin.
Title: Re: HTML5 Audio and Video BBCodes
Post by: gfsymon on February 12, 2011, 05:19:33 AM
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?

Title: Re: HTML5 Audio and Video BBCodes
Post by: DoctorMalboro on February 12, 2011, 07:34:47 AM
By the 15 i'll update all my mods.
Title: Re: HTML5 Audio and Video BBCodes
Post by: gfsymon on February 12, 2011, 09:21:47 AM
Quote from: DoctorMalboro on February 12, 2011, 07:34:47 AM
By the 15 i'll update all my mods.

Excellent.

Will this work with RC4 and RC5 and vs 2.0?   (Just planning ahead  :) )
Title: Re: HTML5 Audio and Video BBCodes
Post by: DoctorMalboro on February 14, 2011, 08:48:34 AM
I think i'm going to update all my mods to the security patch only...
Title: Re: HTML5 Audio and Video BBCodes
Post by: dougiefresh on June 15, 2011, 03:35:59 PM
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!
Title: Re: HTML5 Audio and Video BBCodes
Post by: pixeleyes on June 02, 2012, 03:43:34 AM
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?
Title: Re: HTML5 Audio and Video BBCodes
Post by: pixeleyes on June 04, 2012, 10:27:19 AM
anyone???
Title: Re: HTML5 Audio and Video BBCodes
Post by: WillyP on June 04, 2012, 11:54:42 AM
What browsers have you tested this with?
Title: Re: HTML5 Audio and Video BBCodes
Post by: pixeleyes on June 05, 2012, 07:37:45 AM
Firefox and IE8
Title: Re: HTML5 Audio and Video BBCodes
Post by: Babyfacemagee on July 07, 2012, 02:08:04 PM
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
Title: Re: HTML5 Audio and Video BBCodes
Post by: Darkness_Black on July 31, 2014, 04:22:48 PM
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?
Title: Re: HTML5 Audio and Video BBCodes
Post by: Apllicmz on October 10, 2014, 10:38:37 AM
whem Update
Dont Forget Portuguese Linguage

<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>
Title: Re: HTML5 Audio and Video BBCodes
Post by: musicus on February 21, 2016, 07:58:00 PM
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
Title: Re: HTML5 Audio and Video BBCodes
Post by: engrz on March 07, 2016, 01:55:46 AM
Hello

can i use this on smf 2.0.11?
Title: Re: HTML5 Audio and Video BBCodes
Post by: musicus on March 07, 2016, 04:23:40 AM
Quote from: engrz on March 07, 2016, 01:55:46 AM
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

Title: Re: HTML5 Audio and Video BBCodes
Post by: PracticalLightning on June 29, 2016, 03:48:04 PM
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:
               'content' => '<audio src="$1" autoplay="{autoplay}" loop="{loop}" controls="controls">'.$txt['html5_audio_no_supported'].'</audio>',
TO:
               '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.)


Title: Re: HTML5 Audio and Video BBCodes
Post by: CreativeITWorld.com on July 13, 2016, 08:51:07 AM
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

Quote<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>
Title: Re: HTML5 Audio and Video BBCodes
Post by: shadav on June 10, 2020, 02:26:59 PM
Quote from: CreativeITWorld.com on July 13, 2016, 08:51:07 AM
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

Quote<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
width=480 height=380
with
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
Title: Re: HTML5 Audio and Video BBCodes
Post by: Yoksven on April 26, 2021, 11:07:33 AM
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 (https://custom.simplemachines.org/mods/index.php?mod=2681).
Title: Re: HTML5 Audio and Video BBCodes
Post by: aegersz on April 27, 2021, 09:24:19 AM
If you wish to serve your local files then it's easy to use dougie's Custom BBCodes Manager (https://custom.simplemachines.org/mods/index.php?mod=3699).

I have one BBC configured for audio (https://forum.drugs-and-users.org/index.php?topic=4581) and one for video (https://forum.drugs-and-users.org/index.php?topic=5423)
Title: Re: HTML5 Audio and Video BBCodes
Post by: shadav on April 27, 2021, 09:41:19 AM
Quote from: Yoksven on April 26, 2021, 11:07:33 AM
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 (https://custom.simplemachines.org/mods/index.php?mod=2681).

if you don't want to use the emulation mode
in the package_info.xml
find
<install for="2.0 RC4">
replace with
<install for="2.0 - 2.0.99">

find
<uninstall for="2.0 RC4">
replace with
<uninstall for="2.0 - 2.0.99">

Quote from: aegersz on April 27, 2021, 09:24:19 AM
If you wish to serve your local files then it's easy to use dougie's Custom BBCodes Manager (https://custom.simplemachines.org/mods/index.php?mod=3699).

I have one BBC configured for audio (https://forum.drugs-and-users.org/index.php?topic=4581) and one for video (https://forum.drugs-and-users.org/index.php?topic=5423)
this is a good option as well, though for this purpose I like to use the Personalized BBC (https://custom.simplemachines.org/mods/index.php?mod=3864) mod, I don't know it just seemed easier to do with that one than the custom bbcode one