Video verkkoon
.: Etusivu :. .: Materiaalit :. .: Linkit :.

Videoruudun upottaminen HTML-sivulle

 

Tässä esimerkki verkkovideosta:

  • Videoruudun koko on 240*192px,

  • Videon tallennusmuoto mpeg4 (.mp4)

  • Video latautuu suoratoistona (Streaming)

  • Videoesityksen kesto n. 2 min

  • Videon katselemiseksi tarvitset QuickTime Playerin (versio 6.1 tai uudempi)

Videossa kerrotaan sisällöntuotannosta Moniviestimeen.

Yksinkertaisin tapa on lisätä video kuvan tapaan sivulle EMBED-tagin sisällä:

<embed src="video.mpeg"></embed>

Tuo pelkkä embed ei välttämättä toimi kaikissa selaimissa, joten kannattaa lisätä myös OBJECT-tagi embedin ympärille (kuten esimerkissä). Lisäksi videon näyttämiseen kuuluu useita parametreja (videoikkunan koko, autoplay, näkyykö kontrollit yms.)

Ylläolevan Quicktime-videon upottamiseen on käytetty seuraavanlainen koodi:

<object id="movie" height="192" width="240">

<param name="src" value="klikkaa.mov">
<param name="autoplay" value="true">
<param name="controller" value="false">
<param name="loop" value="false">
<param name="type" value="video/quicktime">
<param name="pluginspage" value="http://www.apple.com/quicktime/download/indext.html">

<embed src="klikkaa_suo.png" type="video/quicktime" target="myself" pluginspage="http://www.apple.com/quicktime/download/indext.html"
width="240" height="208" autoplay="false" controller="false" LOOP="false" center="false" href="rtsp://darwin.jyu.fi/virtyo/movie/movie1_256.mp4">
</embed>

</object>

 

Tässä alla esimerkki Real-videon upottamisesta sivulle (Netti-TV Visiosta otettu koodi). Realin ollessa kyseessä sivulle pitää upottaa videoikkuna ja kontrollipalkki erikseen.

<object ID=visio classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA width=320 height=240>

<param NAME="SRC" VALUE="rtsp://helix.cc.jyu.fi/visio/koe0804.rmvb">
<param NAME="AUTOSTART" VALUE="true">
<param NAME="CONTROLS" VALUE="ImageWindow">
<param NAME="CONSOLE" VALUE="realembed">
<param NAME="nojava" VALUE="false">
<param NAME="nologo" VALUE="true">
<param NAME="type" VALUE="audio/x-pn-realaudio-plugin">
<param NAME="pluginspage" VALUE="http://www.real.com/player/">

<embed SRC="rtsp://helix.cc.jyu.fi/visio/koe0804.rmvb" name="visio" type="audio/x-pn-realaudio-plugin" pluginspage="http://www.real.com/player/" width="320" height="240" CONTROLS="ImageWindow" nologo="true" autostart="0"
console="realembed" NOJAVA="false" CENTER="true">
</object><br>

<object ID=control classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA height=30 width=320>
<param NAME="SRC" VALUE="rtsp://helix.cc.jyu.fi/visio/koe0804.rmvb">
<param NAME="AUTOSTART" VALUE="true">
<param NAME="CONTROLS" VALUE="ControlPanel">
<param NAME="CONSOLE" VALUE="realembed">
<param NAME="nojava" VALUE="false">
<param NAME="type" VALUE="audio/x-pn-realaudio-plugin">
<param NAME="pluginspage" VALUE="http://www.real.com/player/">

<embed SRC="rtsp://helix.cc.jyu.fi/visio/koe0804.rmvb" name="control" type="audio/x-pn-realaudio-plugin" pluginspage="http://www.real.com/player/" width="320" height="30" autostart="true" console="realembed" NOJAVA="false"
CONTROLS="ControlPanel" CENTER="true">

</object>

 

Tässä vielä muutama linkki sivuille, jossa asiaa käsitellään:

Quicktime-videon lisääminen sivuille:
http://web.ics.purdue.edu/~ginnyjr/chrisclass/

Real Media-tiedoston lisääminen: http://courses.ncssm.edu/webhelp/streaming/publishrm.htm#embed

Windows-median lisääminen: http://hotwired.lycos.com/webmonkey/01/49/index2a.html?tw=multimedia

 

Takaisin ylös

VYO228 Video verkkoon -- Rikupekka Oksanen -- rioksane@cc.jyu.fi