How to Embed Windows Media Player in Dreamweaver
Windows Media Player is a Microsoft product that plays videos formatted in .wmv, .wm, .wma, and .asf formats. Streaming video can be viewed on a computer using this software. Adobe Dreamweaver is a web development and design tool. Using this software, files can be embedded to created a web site. Embedding Windows Media Player with the use of Dreamweaver can created a website that will play streaming video.
Other People Are Reading
Instructions
-
Use Dreamweaver to Embed Windows Media Player
-
1
Open Adobe Dreamweaver by clicking on the program's icon or by going to the Start Menu. Click "All Programs" and then "Adobe Dreamweaver."
-
2
Click "File," then "New" to open a blank page.
-
-
3
In the top, right corner of the workspace, click the "Code" tab. This will display the code involved in creating the website.
-
4
In the header section of the code (located between "<head>" and </head>), paste the following:
<script type="text/javascript">
function play(media){
document.getElementById('mediaplayer').innerHTML=
'<object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95"'
+'type="application/x-oleobject" width="320" height="285">'
+'<param name="showControls" value="false">'
+'<param name="fileName" value="'+media+'">'
+'<embed type="application/x-mplayer2" width="320" height="285"'
+'showcontrols="false" src="'+media+'"><\/embed><\/object>'
}
</script>
<style>
#mediaplayer {
width: 320px;
height: 285px;
background: #000;
}
</style>
-
5
In the body section of the HTML code (located between "<body>" and "</body>"), copy and paste the following:
<div id="mediaplayer"></div>
<ul id="menu">
<li><a onclick="play(this.href);return false" href="">Source 1</a></li>
<li><a onclick="play(this.href);return false" href="">Source 2</a></li>
<li><a onclick="play(this.href);return false" href="">Source 3</a></li>
</ul>
-
6
To save and preview the website with the now embedded video player, click "File" and then "Preview Preview in Browser." Choose a browser from the list. When prompted to save, click "Yes," type in a chosen name for the page, and click "OK." The page with an embedded Windows Media Player will open in the chosen browser.
-
1
Tips & Warnings
To make the Windows Media Player more personalized, edit the CSS code. Color and size can be changed by simply altering the height and width measurements and background color number. An HTML color code resource can be found in the links below.
Be sure to test your Windows Media Player in multiple browsers. Just because it is working smoothly in one browser doesn't mean that it works in all of them.
References
Resources
- Photo Credit Media player vector iconset image by Aleksandr Lukin from Fotolia.com
