Show Thread Enhancements - HTML5 MP3/MP4 Attachment Player for VB3/VB4

For some reason, i enjoy working with all different players from around the net, like in what ways can a video/audio player help in the ways of vbulletin 3, to completely one day have vb3 players all compatible with HTML5 with the flash fall back. well, after testing with many HTML5 players, it seems, for this mod, so far mediaelement comes out on top. mind you, lets get one thing strait, at this stage, you just cannot please every single browser or device. but, this is at least, a great start for attachments in threads/posts using HTML5 with flash fall back. and mediaelement is updating all the time, so maybe, in the end, this player will work for everything, fingers crossed!

This is a very strait forward install of a HTML5/Flash Fallback Player uploaded in your MP3/MP4 uploaded attachments to threads/posts.

How to install:

1. upload the attached zip to your forums root.
2. in your postbit_attachment template, add this code to the very bottom:

<!-- Embed Player MP4 -->
<if condition="$attachment[attachmentextension] == mp4">
<if condition="$show['member']">
<div><video width="320" height="240" poster="/mediaelement/build/bg.png" controls="controls" preload="none">
    <source type="video/mp4" src="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;d=$attachment[dateline]" />
    <object width="320" height="240" type="application/x-shockwave-flash" data="/mediaelement/build/flashmediaelement.swf">
        <param name="movie" value="/mediaelement/build/flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&file=attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;d=$attachment[dateline]" />
        <!-- Image as a last resort -->
        <img src="/mediaelement/build/bg.png" width="320" height="240" title="No video playback capabilities" />
    </object>
</video></div><br />
</if></if>
<!-- /Embed Player MP4 -->

<!-- Embed Player MP3 -->
<if condition="$attachment[attachmentextension] == mp3">
<if condition="$show['member']">
<div><audio width="320" height="30" controls="controls" preload="none">
<source type="audio/mp3" src="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;d=$attachment[dateline]" />
    <object width="320" height="30" type="application/x-shockwave-flash" data="/mediaelement/build/flashmediaelement.swf">
        <param name="movie" value="/mediaelement/build/flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&file=attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;d=$attachment[dateline]" />
    </object>
</audio></div><br />
</if></if>
<!-- /Embed Player MP3 -->

3.Add this code to the bottom of your Headinclude Template: Note, Full URL is needed to support Safari.

<script src="http://www.YOURSITE.com/mediaelement/build/jquery.js" type="text/javascript">
</script>
<script src="http://www.YOURSITE.com/mediaelement/build/mediaelement-and-player.min.js" type="text/javascript">
</script>
<link rel="stylesheet" href="http://www.YOURSITE.com/mediaelement/build/mediaelementplayer.css" type="text/css" />

4.Add this code to the bottom of your Footer Template:

<script type="text/javascript">
//<![CDATA[
// using jQuery
$('video,audio').mediaelementplayer();
//]]>
</script>

5.Upload the attached mp4.gif to your images/attach folder.

6.Add New Extension for MP3/MP4 Attachments. See Read Me Text on how to do this.

Please Note: For MP4 to upload and work/play videos all the way through. Its best that you change the Storage Type: Attachments to a Directory Folder rather than uploading into your Database.

For VB4, all template edits are the same, apart from, you would skip step.2 above and use this code in your postbit_attachment template, add this code to the very bottom:

<!-- Embed Player MP4 -->
<vb:if condition="$attachment[attachmentextension] == mp4">
<vb:if condition="$show['member']">
<video width="320" height="240" poster="/mediaelement/build/bg.png" controls="controls" preload="none">
<source type="video/mp4" src="attachment.php?{vb:raw session.sessionurl}attachmentid={vb:raw attachment.attachmentid}&amp;d={vb:raw attachment.dateline}" />
    <object width="320" height="240" type="application/x-shockwave-flash" data="/mediaelement/build/flashmediaelement.swf">
        <param name="movie" value="/mediaelement/build/flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&file=attachment.php?{vb:raw session.sessionurl}attachmentid={vb:raw attachment.attachmentid}&amp;d={vb:raw attachment.dateline}" />
        <img src="/mediaelement/build/bg.png" width="320" height="240" title="No video playback capabilities" />
    </object>
</video>
</vb:if></vb:if>
<!-- /Embed Player MP4 -->

<!-- Embed Player MP3 -->
<vb:if condition="$attachment[attachmentextension] == mp3">
<vb:if condition="$show['member']">
<audio width="320" height="30" controls="controls" preload="none">
<source type="audio/mp3" src="attachment.php?{vb:raw session.sessionurl}attachmentid={vb:raw attachment.attachmentid}&amp;d={vb:raw attachment.dateline}" />
    <object width="320" height="30" type="application/x-shockwave-flash" data="/mediaelement/build/flashmediaelement.swf">
        <param name="movie" value="/mediaelement/build/flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&file=attachment.php?{vb:raw session.sessionurl}attachmentid={vb:raw attachment.attachmentid}&amp;d={vb:raw attachment.dateline}" />
    </object>
</audio>
</vb:if></vb:if>
<!-- /Embed Player MP3 -->

[tbworld]

Thanks for sharing @ShawneyJ.

You are right, finding the right media application for your collective audience can be hell, or you can just store the media in three formats -- which is always fun.

[RELAX13]

Good Id

[fariborz khan]

hi:
I go to your site and play music and video by my all device I know it not work in android 4.4 stock browser but it work in other browser like dolphin and firefox and opera you say you think it work on vb5 connect but I can not find postbit_attachment template for adding your code can you release this player for vb5 connect I need it.
I see it work in iphone 5s in sgsIII stock browser
I think android 4.4 not support Html5.
I MOTM Nomination for your soft.
thanks in advance

[ShawneyJ]

Originally Posted by fariborz khan

hi:
I go to your site and play music and video by my all device I know it not work in android 4.4 stock browser but it work in other browser like dolphin and firefox and opera you say you think it work on vb5 connect but I can not find postbit_attachment template for adding your code can you release this player for vb5 connect I need it.
I see it work in iphone 5s in sgsIII stock browser
I think android 4.4 not support Html5.
I MOTM Nomination for your soft.
thanks in advance

i have only ever tested this on vb4, which does seem to work better than vb3 and i don't know why. this player does update from time to time, so in the long run, lets hope it ends up playing in a lot more devices.
i don't have a vb5 to even try to test this out on mate, sorry.
so just to confirm, postbit_attachment is not in Postbit Templates area for vb5?

[fariborz khan]

hi thanks for your help
I create a admin account for you as soon as possible that you can work on vb5

[fariborz khan]

I send pm to you please see that
thanks

[ShawneyJ]

i logged in, but all i see is announcements and logs. ive never used vb5, but im guessing i'll need template edit permissions mate please.

[fariborz khan]

one min plz

[fariborz khan]

please check again