Mp3 and video player

By SquarkSquark

You may want to consider an easier way to do this: MP3, Video

Description

I have used a well-known "hack" of html scripting, submitted by Helmut_pdorfHelmut_pdorf to insert mp3 and video player on my own website, so it can play the files I have uploaded to a page on Wikidot.

How to do it?

  • For mp3 player go to the http://www.squark.wikidot.com/dev:8 and download attached files (swf and js)
  • For video player go to the http://www.squark.wikidot.com/dev:9 and download attached files (swf and js)
  • Upload those files on your page and also and also upload media files (mp3 for mp3 player and flv for video player).
  • Add this code to your page:

Code

Mp3 player

[[code type="html"]]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Squark mp3 Player</title>
</head>
<body>
<script language="JavaScript" src="http://squark.wdfiles.com/local--files/dev:8/audio-player.js"></script>
<object type="application/x-shockwave-flash" data="http://squark.wdfiles.com/local--files/dev:8/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="http://squark.wdfiles.com/local--files/dev:8/player.swf">
<param name="FlashVars" value="playerID=1&amp;soundFile=http://squark.wdfiles.com/local--files/dev:8/1.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
</body>
</html>
[[/code]]
 
[[iframe http://squark.wikidot.com/dev:8/code/1 frameborder="0" scrolling="no" width="320px" height="40px"]]

Remember to change paths for swf, js files and your own mp3 file you have uploaded.
You can envelope code block by [[collapsible show=" " hide=" "]] ... [[/collapsible]] tags to hide it on your page.

Video player

[[code type="html"]]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Squark mp3 Player</title>
</head>
<body>
<p id='preview'>The player will show in this paragraph</p>
 
<script type='text/javascript' src='http://squark.wdfiles.com/local--files/dev:9/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('http://squark.wdfiles.com/local--files/dev:9/player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=http://squark.wdfiles.com/local--files/dev:9/video.flv');
s1.write('preview');
</script>
 
</body>
</html>
[[/code]]
 
[[iframe http://squark.wikidot.com/dev:9/code/1 frameborder="0" scrolling="no" height="320px" width="440px"]]

It's analogue to the mp3 player. Just change the absolute path of the swf, js and your own flv file you have uploaded.

In action

Mp3 player

Video player

For more information refer to:


Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by Squark

Voicethread - 16 Feb 2012 01:51
Vimeo - 16 Feb 2012 01:51
Teachertube - 16 Feb 2012 01:46
Slideboom - 16 Feb 2012 01:42
Schooltube - 16 Feb 2012 01:40
Reflections - 16 Feb 2012 01:39
Playlist - 16 Feb 2012 01:31
Picasaweb - 16 Feb 2012 01:30
Ohloh - 16 Feb 2012 01:27
Js Kit Ratings - 16 Feb 2012 01:15
Gametrailers - 16 Feb 2012 01:03
Flickr Video - 16 Feb 2012 01:01
Dailymotion - 15 Feb 2012 00:42
Collapsible Block Unleashed - 15 Feb 2012 00:33
Blip TV - 15 Feb 2012 00:26


Rate this solution

If you think this solution is useful — rate it up!

rating: +11+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License