Joomla 1.5: Joomla video tutorial: video's afspelen

In dit artikel laten we zien hoe je een video kunt afspelen in Joomla 1.5. We maken hiervoor gebruik van de meest populaire video extension voor Joomla. Na het lezen van dit artikel kun je makkelijk Youtube video's embedden in je Joomla website en ook je zelf gemaakte video's (o.a. Flash en DivX) en MP3's uploaden en toevoegen aan je website.

AllVideos Extension downloaden en installeren

Allereerst moeten we de AllVideos extension downloaden. Klik op de download-link en sla het bestand op in een map op je computer.

Ga vervolgens naar het admin-gedeelte van je Joomla website en log in. Ga naar Extensions -> Install/uninstall in het menu. Onder "Upload Package File" klik je op "Choose" en vervolgens blader je naar de map waarin je het .zip bestand van de AllVideos extensie hebt opgeslagen en selecteer je dit bestand. Klik dan op "Upload file & install" en de plugin zal geïnstalleerd worden.

Nu moet je de AllVideos plugin nog activeren. Ga in het Joomla menu naar Extensions -> Plugin Manager en zoek naar de AllVideos plugin in de lijst. Klik op het kruisje in de kolom "Enabled" om de plugin in te schakelen. Er verschijnt daar dan een vinkje. De plugin is nu klaar voor gebruik.

Als je in de Plugin Manager op de link met de tekst AllVideos klikt dan krijg je toegang tot een pagina waar je diverse instellingen voor de video speler op je site kunt aanpassen. Zo kun je o.a. het formaat van de speler aanpassen, auto-play inschakelen en de achtergrondkleur van de speler wijzigen. We houden het in dit artikel bij de standaardinstellingen voor de video player, maar als je later zaken aan wilt passen dan moet je dus op deze pagina zijn.

Een Youtube video afspelen

De meeste gebruikers van de AllVideos extension zullen de plugin vooral gebruiken voor het afspelen van Youtube video's op hun Joomla website. Nu de extensie geïnstalleerd is, kunnen we de pagina bewerken waarop we de video willen plaatsen. Ga in Joomla naar Content -> Article Manager en selecteer het artikel waarin je een video wilt plaatsen. Het "edit"-scherm wordt nu geopend. Om een Youtube video toe te voegen type je de volgende code op de plek waar de video getoond moet worden:

{youtube}youtube video-code hier, bijv. DV81bAghxBU{/youtube}

Met de "Youtube video-code" bedoelen we het laatste gedeelte van de URL van het Youtube filmpje. Deze URL zie je in de adresbalk van de browser staan als je het filmpje bekijkt op de Youtube website. Bijvoorbeeld staat het filmpje op http://www.youtube.com/watch?v=zqyiCpdK1Uk dan is de video-code voor dit filmpje: zqyiCpdK1Uk. Die code plaats je vervolgens tussen de tags {youtube} en {/youtube} in de code van de pagina. Tenslotte sla je de pagina op door op "Save" te klikken. Als je nu deze pagina bezoekt dan zal de Youtube video in een video speler op de pagina te zien zijn.

Naast Youtube worden er nog vele andere videodiensten ondersteund door AllVideos, waaronder Google Video en MySpace.

Voor Google Video gebruik je deze code: {google}-814361516845782676{/google}

Ook hier plaats je het laatste deel van de Google Video URL tussen de AllVideos tags.

Voor MySpace videos gebruiken we: {myspace}37910278{/myspace}

Ook bij MySpace staat de relevante video-id aan het einde van de URL.

Voor een overzicht van alle ondersteunde online video diensten kun je terecht op de officiële AllVideos documentatie pagina.

Een eigen video of audio bestand uploaden en afspelen

Wellicht heb je zelf video's gemaakt die je op je website wilt plaatsen. Of misschien heb je MP3 bestanden die je af wilt spelen op je site. Ook dat is mogelijk met AllVideos.

De eerste stap is om de audio en/of video bestanden te uploaden naar de server. Hiervoor kun je de Media Manager van Joomla gebruiken of je kunt de bestanden uploaden met een FTP programma als FileZilla. We zullen hieronder de Media Manager gebruiken.

De AllVideos extensie gaat er vanuit dat de bestanden door jou in een specifieke map geplaatst worden:

  • Video bestanden in: images/stories/videos
  • Audio bestanden in: images/stories/audio

Je kunt deze locatie overigens wijzigen in de instellingen van de AllVideos extension (lees hierboven hoe je toegang krijgt tot die pagina). We gaan er hier vanuit dat je de standaardlocatie gebruikt voor de mappen met de audio en video bestanden.

Deze mappen bestaan waarschijnlijk nog niet. Daarom gaan we deze eerst aanmaken. Ga daarvoor naar Site -> Media Manager. Aan de linkerkant zie je een lijstje met mappen. Klik op de map Stories. De submappen verschijnen. Als hier al mappen staan met de naam "videos" en "audio" dan hoef je niets meer te doen. Bestaan deze twee mappen nog niet dan type je onder Files aan de rechterkant de tekst "videos" in het tekstvakje en klik je rechts op de knop Create Folder. Ditzelfde doe je nog eens voor de map met de naam "audio".

Het aanmaken van deze mappen kun je overigens ook met je FTP programma doen als je dat makkelijker vindt.

Als de mappen aangemaakt zijn dan kun je de video en audio bestanden uploaden naar deze mappen. Klik aan de linkerkant op de map "videos" en klik dan aan de rechterkant op de knop Choose.... Blader naar het video bestand op je computer dat je wilt uploaden en selecteer het. Klik dan op de knop Start upload. Als je een foutmelding krijgt bij het uploaden ('This file type is not supported'), lees dan ons artikel Foutmelding Media Manager om dit op te lossen.

Om de audio bestanden te uploaden herhaal je deze stappen, alleen selecteer je eerst de map audio in het lijstje aan de linkerkant van het scherm.

Als de bestanden in de video en audio mappen staan dan kun je de Media Manager sluiten en de Article Manager openen via Content -> Article Manager. Bewerk de pagina waarin je het video of audio bestand wilt plaatsen.

Nu gebruiken we net als bij de Youtube videos hierboven een speciale tag in de code van de pagina om aan te duiden waar het bestand geplaatst moet worden op de pagina. Welke tag je moet gebruiken hangt echter af van het soort audio/video bestand dat je gebruikt: de tag voor een DivX video is bijvoorbeeld anders dan de tag voor een WMV videobestand.

We geven nu een overzicht van de verschillende bestanden en de bijbehorende tags. Daarna geven we een paar voorbeelden om het te verduidelijken.

Overzicht bestandsformaten en te gebruiken tags

Type Audio/Video bestand Locatie map Te gebruiken AllVideos tag
FLV images/stories/videos {flv}bestandsnaam{/flv}
SWF (flash) images/stories/videos {swf}bestandsnaam{/swf}
WMV (Windows Media Video) images/stories/videos {wmv}bestandsnaam{/wmv}
MOV (Quicktime Video) images/stories/videos {mov}bestandsnaam{/mov}
MP4 images/stories/videos {mp4}bestandsnaam{/mp4}
DivX Video images/stories/videos {divx}bestandsnaam{/divx}
MP3 images/stories/audio {mp3}bestandsnaam{/mp3}
WMA (Windows Media Audio) images/stories/audio {wma}bestandsnaam{/wma}

Voorbeeld 1: WMV bestand(Windows Media Video)

Stel we hebben een .wmv bestand dat we op onze site willen tonen. Het bestand heeft de naam vakantievideo.wmv. Eerst uploaden we het bestand naar de map images/stories/videos, zoals we hierboven in de vorige stap beschreven. In de code van het artikel gebruiken we nu de volgende code op de plaats waar we onze video willen tonen:

{wmv}vakantievideo{/wmv}

Voorbeeld 2: DivX bestand

De bestandsnaam van onze video is vakantievideo.divx. De code wordt nu als volgt:

{divx}vakantievideo{/divx}

Voorbeeld 3: MP3 bestand

Om een MP3 bestand af te spelen op de site, uploaden we eerst het bestand naar de map images/stories/audio. Stel het bestand heeft de naam liveoptreden.mp3. We plaatsen dan deze code in het artikel op de plek waar we de muziekspeler willen hebben:

{mp3}liveoptreden{/mp3}

Het opnemen van je eigen video en audio bestanden in je pagina's wordt dus een stuk eenvoudiger met de AllVideos extension. Een andere mogelijkheid die we nog even kort willen noemen is het plaatsen van audio en video van een externe site op je eigen pagina.

Externe bestanden plaatsen

Met externe bestanden bedoelen we audio of video bestanden van een andere website (geen video dienst als Youtube). Als je de URL hebt van audio/video bestanden dan is het in principe mogelijk om deze op je site af te spelen. Het is wel erg belangrijk dat je daar toestemming voor hebt gekregen van de rechthebbende van het materiaal! Ook kan het zijn dat een site de mogelijkheid heeft uitgeschakeld om bestanden te laden vanaf een andere website (hotlink protection).

Bij de AllVideos tags voor externe bestanden voeg je de tekst remote toe aan de tags en zet je de volledige URL van het bestand tussen de tags. Bijvoorbeeld:

  • extern flv bestand: {flvremote}http://www.plaatsdomeinnaamhier.be/bestandsnaam.flv{/flvremote}
  • extern mp3 bestand: {mp3remote}http://www.plaatsdomeinnaamhier.be/bestandsnaam.mp3{/mp3remote}
  • etcetera

Einde tutorial

Je hebt gelezen hoe je gebruik kunt maken van de AllVideos extensie voor Joomla. We hebben de belangrijkste mogelijkheden van de plugin besproken en gezien hoe we audio en video bestanden kunnen afspelen op onze webpagina's.

De extension heeft nog enkele mogelijkheden, zoals het opgeven van "custom options" (bijv. een specifiek formaat van de speler en het automatisch afspelen van een bestand). Daar zijn we in dit artikel niet aan toegekomen. Meer informatie daarover vind je in de AllVideos documentatie.

Veel plezier met AllVideos en Joomla!

Joomla Templates: by JoomlaShack