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 -->

[ShawneyJ]

Originally Posted by fariborz khan

please check again

have you uploaded mediaelement folder to root dictionary ?

edit: so far, progress with vb5. but cant promise anything.

[fariborz khan]

1 min please sorry for late

[fariborz khan]

yes
I unzip and upload this folder
mediaelement

[fariborz khan]

please note in vb5 a folder named core is like root folder of vb4
I upload in 2 position
hhh.com/public_html/core/mediaelement(in vb 5 install folder is in core folder)
and
hhh.com/public_html/mediaelement

[Crossbow]

ShawneyJ you are a life saver!!

Works great on Chrome and Coowon but there seems to be a problem with it on IE. I sent you screen shot in PM.

[kapii]

What version of IE are you using?

[Crossbow]

IE is now fixed. Thanks again for a very nice player.

[ArcadeSyndicate]

works fine with webm too :up:

tested on vb 4.2.3

[friendlymela]

This is good one, i'll try it soon