Videofilmpjes op je website in HTML 4

		Op veel websites staan videofilmpjes, zoals deze hiernaast. Op deze pagina staat beschreven hoe je het aanpakt om ook zo'n filmpje op je site te zetten.   Voorbeeld-codes staan onderaan deze bladzijde. Je kunt die ook downloaden om zelf te gebruiken.
		Het werkt alleen met Internet Explorer. De aanpak voor de andere browsers vind je in het item Videofilmpjes op je website II: <video>-tag.
		clip: Vrijdag de dertiende in Afrika 320x240 pixels, duur 14 seconden, 553 KB.

Opmerking: De hier besproken werkwijze geldt voor de tags uit HTML 4. In HTML5 zijn er andere tags voor in de plaats gekomen: <audio> (voor geluid) en <video> (voor filmpjes). Zie ook de items Verschillen tussen HTML 4 en HTML5 I: Nieuwe tags in HTML5 en Event-attributen in HTML voor audio en video.

• Besproken worden:
  1. Inbouwen op je website met de objecten <OBJECT> en <EMBED>.
     Opmerking: De beschrijving op deze bladzijde lijkt vrij uitgebreid maar is in feite heel summier. Een uitgebreide beschrijving van deze tags is te vinden op www.handleidinghtml.nl.
  2. Voorbereiden van een filmpje vóórdat je het op je site zet.
   
• Oudere browsers kunnen zelf kan geen video-filmpjes afspelen. Daarvoor is een hulpprogramma nodig, een zogenaamde plugin of 'invoegtoepassing'.
• Een veelgebruikte plugin is de Macromedia Flash Player. Die is in de meeste browsers wel aanwezig. Veel websites zijn geheel of gedeeltelijk in Flash geschreven of bevatten animaties in Flash-formaat.
• Andere bekende programma's die ook als plugin voor je browser kunnen functioneren zijn: Windows Media Player, QuickTime Player en Real Player.
   
• Een filmpje wordt in een web-bladzijde opgenomen als object. Hierbij is wat vreemds aan de hand:
  Internet Explorer ondersteunt (vanaf versie 5.5 SP2) geen plugins meer, maar alleen ActiveX-controls. Plugins worden dus als ActiveX-controls in de bladzijde opgenomen. Daarvoor gebruik je de tag <OBJECT> ...... </OBJECT>.
• De filenaam van het filmpje, maar ook het soort object geef je mee in de attributen van de tag. De besturing van de plugin zelf (dus het gedrag van het filmpje) leg je vast met behulp van <PARAM>-tags.
• ActiveX wordt door andere browsers echter niet of niet volledig ondersteund. Om de plugins toch te kunnen gebruiken moeten daarvoor binnen de <OBJECT>-tag een tag <EMBED ..........></EMBED> worden opgenomen. Deze tag kent geen <PARAM>-tags. Alle informatie gaat via attributen.
• Beide tags bevatten dezelfde informatie: verwijzing naar het filmpje, afmetingen, enz.
• De structuur is dus als volgt:
  

  <OBJECT ....................>
    <PARAM name="..." value="....">
    <PARAM name="..." value="....">
    .
    .
    <PARAM name="..." value="....">
    <EMBED ....................><EMBED>
  </OBJECT>

• Veel gebruikte, oudere video formaten op internet zijn: Windows Media Video (.WMV), Shockwave Flash (.SWF), QuickTime Movie (.MOV) en Real Movie (.RM). Voorbeeld codes voor deze formaten staan onderaan deze bladzijde.
• Het .FLV-formaat (Flash Video) is een tijdlang belangrijk geweest.
• De formaten .WMV, .SWF en .FLV zijn voor internet het meest geschikt, omdat ze goed te comprimeren zijn zonder al te veel kwaliteitsverlies.
• De formaten MPEG (.MPG of .MPEG) en AVI (.AVI) zijn voor gebruik op internet minder geschikt, omdat de bestanden vrij omvangrijk zijn. Deze formaten worden hier verder niet behandeld.
• Dit geldt ook voor de QuickTime en Real Formaten, zij het in mindere mate.
• Ter illustratie: Het filmpje op deze bladzijde (.WMV) is 553 KB groot. Het origineel (.MPG) is ongeveer 2,2 MB.
   
• Opmerkingen:
  
  • Het is voor de bezoekers van je site niet prettig als ze lang moeten wachten. Ondanks de toenemende kwaliteit van de internet verbindingen en de steeds snellere servers: Een wachttijd van 30 seconden is nog steeds het maximum. Zorg dus dat je filmpjes niet te groot zijn. Een paar MB is echt de limiet.
  • Merk op dat grote bestanden er ook voor zorgen dat de beschikbare ruimte bij je webhost snel vol is.
  • Om je filmpjes voldoende te comprimeren moet je ze dus bewerken. Daar komen wat trucs en handigheden bij kijken. Meer informatie vind je hier.
  • Gebruik één video-formaat voor alle filmpjes op je hele website. Op deze site wordt alleen Windows Media gebruikt. Alleen voor wat kleinere animaties wordt Flash ingezet.
   
• Opmerkingen bij de code:
  
  • Het attribuut autostart met <EMBED> heeft als mogelijke waarden: true en false. In combinatie met Windows Media player werkt dat niet goed. Gebruik daar 0 voor false. De waarde true wordt wel goed behandeld.
  • Hetzelfde treedt op bij showtracker en showdisplay.
     
  • De browser gebruikt de plugin die in de code wordt genoemd. Als die niet beschikbaar is zal de browser voorstellen deze te downloaden van het webadres dat in de code erbij staat. Dat kun je zonder meer doen. Pas wel op met de players van Real en QuickTime. Het is vrij zware software die graag alle multimedia op je PC wil gaan verwerken (dus ook geluid). Goed opletten bij het installeren om ongewenste zij-effecten te voorkomen.

Gebruik:

• De code staat in de <BODY>, op de plaats waar het filmpje moet verschijnen.

De code ziet er als volgt uit:
 
Code voor Windows Media Video (.WMV):

<OBJECT id="mediaPlayer" width="320" height="285"
  classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
  codebase="https://activex.microsoft.com/activex/controls/mplayer/
  en/nsmp2inf.cab#Version=5,1,52,701"
  standby="Loading Microsoft Windows Media Player components..."
  type="application/x-oleobject">
  <param name="fileName" value="test.wmv">
  <param name="animationatStart" value="false">
  <param name="transparentAtStart" value="false">
  <param name="autoStart" value="true">
  <param name="showControls" value="true">
  <param name="showStatusBar" value="false">
  <param name="loop" value="false">
  <EMBED type="application/x-mplayer2"
    pluginspage="https://windows.microsoft.com/en-US/windows/windows-media-player"
    id="mediaPlayer"
    name="mediaPlayer"
    displaysize=4
    autosize=-1
    showcontrols="true"
    TransparentAtStart="false"
    showtracker="false"
    showdisplay="false"
    showStatusBar="true"
    videoborder3d="true"
    width="320" height="285"
    src="test.wmv" autostart="true"
    loop="false">
  </EMBED>
</OBJECT>
 
Opmerking: De waarde van het CODEBASE attribuut is verdeeld over twee regels om het leesbaar tehouden. Op je web-pagina moet dat op één regel staan!

<OBJECT classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="https://active.macromedia.com/flash2/cabs/swflash.cab#
  version=x,0,0,0"
  id="ididid" height="hhh" width="www">
  <PARAM name="movie" value="test.swf">
  <PARAM name="quality" value="qqq">
  <PARAM name="bgcolor" value="#rrggbb">
  <EMBED name="ididid" src="test.swf" quality="qqq" bgcolor="#rrggbb"
    width="www" height="hhh" type="application/x-shockwave-flash"
    pluginspage="https://www.macromedia.com/shockwave/download/
    download.cgi?P1_Prod_Version=ShockwaveFlash">
  </EMBED>
</OBJECT>
 
Opmerking: De waarde van de attributen CODEBASE en PLUGINSPAGE zijn verdeeld over twee regels om het leesbaar te houden. Op je web-pagina moet dat op één regel staan!

<OBJECT
  classid="CLSID:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  width="320" height="255"
  codebase=https://www.apple.com/qtactivex/qtplugin.cab>
  <param name=src value="test.mov">
  <param name=autoplay value="false">
  <param name=controller value="true">
  <param name=loop value="false">
  <EMBED src="test.mov" width="320" height="255" autoplay="false"
    controller="true" loop="false"
    pluginspage=https://www.apple.com/quicktime/download/>
  </EMBED>
</OBJECT>

<OBJECT id=rvocx
  classid="CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
  width="320" height="240">
  <param name=src value="test.rm">
  <param name=autostart value="false">
  <param name=controls value=imagewindow>
  <param name=console value=video>
  <param name=loop value="false">
  <EMBED src="test.rm" width="320" height="240"
    loop="false" type=audio/x-pn-realaudio-plugin
    controls=imagewindow console=video autostart="false">
  </EMBED>
</OBJECT>