HTML5 MP3/MP4 Attachment Player for VB3/VB4
Mod Version: 1.00, by ShawneyJ
| vB Version: 3.8.x | Rating:  (5 votes - 5.00 average) |
Installs: 18 |
| Released: 04 Oct 2014 | Last Update: 04 Oct 2014 | Downloads: 108 |
 Not Supported
 Template Edits
|
||
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:
3.Add this code to the bottom of your Headinclude Template: Note, Full URL is needed to support Safari.
4.Add this code to the bottom of your Footer Template:
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:
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:
Code:
<!-- 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]&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]&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]&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]&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.
Code:
<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" />
Code:
<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:
Code:
<!-- 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}&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}&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}&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}&d={vb:raw attachment.dateline}" />
</object>
</audio>
</vb:if></vb:if>
<!-- /Embed Player MP3 -->
Download
Read Me - New Extension for MP3-MP4.txt (914 Bytes, 90 downloads)
mediaelement.zip (950.7 KB, 115 downloads)
Screenshots
