HTML5 Audio and Video BBCodes

[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