Here are some simple examples about adding video to webpage. (environment : Windows - IE / IIS)
1. How to add .WMV video file to web page
Assuming clients already have Windows Media Player, the following HTML will play a wmv file in 400x400 size. If there is no plug-in installed, you will be asked to install appropriate plug-in. Please note that this test HTML has wildlife.wmv file under local IIS wwwroot folder.
<html>
<head>
<title>WMV Video</title>
</head>
<body>
<object type="video/x-ms-wmv" width="400" height="400">
<param name="filename" value ="http://localhost/Wildlife.wmv" />
</object>
</body>
</html>
In object tag, you can add classid and codebase attribute to specify the plug-in and its download location.
2. How to add .MP4 video file to web page (without HTML5)
MP4 video file is played by QuickTime player. In HTML object tag, classid and codebase is specified to point out plug-in and its download location. The mp4 video filename is specified in param element.
<html>
<head>
<title>Video 1</title>
</head>
<body>
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="http://localhost/test.mp4" />
</object>
</body>
</html>
If you launch your Internet Explorer and type the HTML url, you might notice that mp4 video is not playing. This is because you need one more setting in IIS for mp4 video.
In IIS, you need to add mp4 MIME type if it's not already there. Goto IIS Manager -> IIS Server Properties -> Click MIME Types in IIS section.
In MIME Types list, rightclick and select Add. Then add .mp4 with video/mp4 MIME type.
Now, you will be able to play .mp4 video.
3. How to add .MP4 video file to web page (with HTML5)
HTML5 <video> tag resolves a lot of hassles about playing video in various browsers. In source element, one specified video type (video/mp4) and its source file location.
<html>
<head>
<title>Video MP4</title>
</head>
<body>
<video id="Player" width="640" height="480" controls="controls">
<source src="test.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>
If you use IE 8.0, the HTML above will not work since IE 8 does not support HTML5. (IE 9.0 will support HTML 5). The HTML above can be tested in Google Chrome which supports HTML5.
HTML5 <video> tag resolves a lot of hassles about playing video in various browsers. In source element, one specified video type (video/mp4) and its source file location.
<html>
<head>
<title>Video MP4</title>
</head>
<body>
<video id="Player" width="640" height="480" controls="controls">
<source src="test.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>
If you use IE 8.0, the HTML above will not work since IE 8 does not support HTML5. (IE 9.0 will support HTML 5). The HTML above can be tested in Google Chrome which supports HTML5.
I like the new look of the <html5 audio player. is faster is better and my slow computer with crappy video card will not got slow anymore, nice job you guys!
ReplyDelete