Mp3 And Video Player

Copied from snippets : http://snippets.wikidot.com/code:mp3-and-video-player

Description

I have used a well-known "hack" of html scripting, submitted by Helmuti_pdorf does not match any existing user name 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.pl/dev:8 and download attached files (swf and js)
  • For video player go to the http://www.squark.pl/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]]
<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.pl/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.pl/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:

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

+ Description

I have used [http://community.wikidot.com/howto:use-html-scripting a well-known "hack" of html scripting], submitted by [[*user Helmuti_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.pl/dev:8 and download attached files (swf and js)
* For video player go to the http://www.squark.pl/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"]]
[[code]]
<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.pl/dev:8/code/1 frameborder="0" scrolling="no" width="320px" height="40px"]]

[[/code]]

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"]]
[[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.pl/dev:9/code/1 frameborder="0" scrolling="no" height="320px" width="440px"]]
[[/code]]

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**
[[iframe http://squark.pl/dev:8/code/1 frameborder="0" scrolling="no" width="320px" height="40px"]]

++ **Video player**
[[iframe http://squark.pl/dev:9/code/1 frameborder="0" scrolling="no" width="420px" height="320px"]]

For more information refer to:

* http://www.squark.pl/dev:8 and http://www.squark.pl/dev:9 -- you can check the code if something in unclear
* http://www.macloo.com/examples/audio_player/ -- **used mp3 player**
* http://www.jeroenwijering.com/?item=JW_FLV_Player -- **used video player**

+ Rate this solution

If you think this solution is useful -- rate it up! Or dump it otherwise.

standard - live "_template" used without any tricks and layout changes…