3.3 Multimedia Enriched Html -Video
3.3.5.2 Embedding Video
For the same reason, your browser needs a plug-in to make it work, e.g. MS media player, quicktime and real player. The following is an example for embedding a video file into the web-page
(Source of sound file: http://www.free-midi.org)
1. Snippet(code section) for mp4 video file-
Use <embed> and </embed> tags to insert a video file in the web page as shown in the following. The source video file is not necessarily in the same folder of the web page. Either relative or absolute address is possible. When browsing the web page, the default plugin control panel will pop-up. The message encrypted by <noembed> and </noembed> tags will be shown if there is no appropriate plugin player for playing the video file. The message encrypted by <noembed> and </noembed> is the information for user without proper plugin with their browsers.
| <embed
src="session03/media/06butterfly_taipo_text_NEW_x264.mp4"
autostart="false" loop="false" height="400" width="660" /> <noembed>Sorry, your browser doesn't support the embedding of multimedia.</noembed> |
2. Snippet for embedding youtube video-
On the side of most YouTube pages, there should be a section of code starting with <embed...> and ended with </noembed> that will look something like the following. Use the source code mode of the browser to clip this snippet and insert it in the web page. (When linking to the destinated video on youtube, make sure that it is legitimate. The following example is given for demonstration purpose):
| <embed type="application/x-shockwave-flash" src="http://s.ytimg.com/yt/swfbin/watch_as3-vflmgoDUV.swf" id="movie_player".....(too long to fit into the box here) ........</noembed> |
3. Snippet for swf video file-
The following snippet is generated by a freeware with video conversion function. When inserting a flash video into a web page, you must put the flash video file in the same folder of the web page. If this cause you a problem in data organization, use "iframe" to open a separate web page that contains the snippet to show up the video.
|
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="320" height="240" id="player1" align="middle"> <param name="movie" value="06worm_dscf9426_text_NEW.swf"/> <param name="menu" value="false"/> <param name="quality" value="high"/> <param name="bgcolor" value="#FFFFFF"/> <embed src="06worm_dscf9426_text_NEW.swf" menu="false" quality="high" bgcolor="#FFFFFF" width="320" height="240" name="player" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/> </object> Credit: This flv video clip and snippet is converted and generated with "Free Studio" of "dvdvideosoft.com" |
4. Snippet for flv video file-
The working principle is similar to show up swf video but the flv player provide control panel to the viewer.
|
<object id="player1"
type="application/x-shockwave-flash" data="player_flv_maxi.swf" width="320"
height="240">
<param name="movie" value="player_flv_maxi.swf" /> <param name="allowFullScreen" value="true" /> <param name="FlashVars" value="configxml=07yunnan_dancing_weed.xml" /> </object> Credit: This flv video clip and snippet is converted and generated with "Free Studio" of "dvdvideosoft.com" |
