21 juli 2017
Dutch CMS
Handleidingen

Met Dutch CMS 2.0

Nog makkelijker een mooie website !
Gemoderniseerd template design
Achtergrondafbeeldingen invoegen
Uitgebreid Contactformulier !
En meer.....

 
 
 
 
 
Technische Handleidingen Video en Audio Invoegen 21 april 2011
 

Video afspelen vanaf je eigen website

Met Dutch CMS kun je gemakkelijk zelfgemaakte video's op je website plaatsen. Vaak is het zo dat video's eerst geupload worden naar een social media / video sharing site zoals bv You Tube of Fotobucket om ze vervolgens met de embed code weer in te voegen eventueel op je eigen website. Hoe geweldig You Tube ook is het kan handiger zijn om je video's in eigen beheer te hebben en op je eigen website. Zo mag je bij You Tube als beginner ook geen video's uploaden die langer dan 15 minuuten duren. Stel je maakt een promotiefilmpje voor je bedrijf. Dan ga je dat toch ook niet eerst op You Tube zetten en dan weer invoegen op je bedrijfssite. Nee, dat wil je gelijk op de eigen website zetten. Als we kijken naar de insteek van Dutch CMS voor Clubs, Verenigingen en Persoonlijke websites dan zullen er vast clubs of verenigingen zijn die graag video's van webstrijden of evenementen van de vereniging op de site willen plaatsen. Wel nu vanaf Dutch CMS versie 1.9 kan dat.

Keuze van player

Na onderzoek kwamen er 2 players als zeer goed uit de bus namelijk de JW Player en de Flowplayer. Even goed dus, maar de JW player had enige restricties als de site met "commercial activities" te maken had waardoor je dan in overtreding zou zijn bij gebruik van de gratis Player en dus een licentie zou moeten aanschaffen. De Flowplayer heeft deze restrictie niet.

Aan de slag

Kort komt het hier op neer:

- Videobestand (het filmpje) converteren
- Videobestand met FTP uploaden
- Inloggen op beheer
- Kiezen waar de video moet komen
- Video plaatsen met code
- Opslaan
- Screenshot maken
- Screenshot uploaden

Allereerst nog dit

In de TinyMCE Editor zit een media invoegen knop (filmstrip symbool) - handleiding. Gebruik deze alleen voor het invoegen van You Tube media en bv een swf object maar niet om bv een .wmv of .avi filmpje in te voegen. Grote kans dat dit niet in alle browsers goed werkt. Met deze rede en omdat je bv verschillende skins kan geven aan de player en nog meer van dergelijke opties, zijn er players ontwikkeld die cross-browser zijn zogezegd zodat je videofile dus altijd zal afspelen bij iedere bezoeker en in alle verschillende browsers zoals bv Firefox, Internet Explorer, Google Chrome of bv Safari. Let op, omdat jij een bepaalde browser gebruikt wil het nog niet zeggen dat iemand anders die ook gebruikt.

Afspeelbare formaten en video converteren

De Flowplayer is flash gebasseerd en kan de volgende formaten afspelen: .swf, .flv, .H.246, .mp4 (meer info). Als je met je digitale camera een .mov of .avi filmpje hebt gemaakt of je hebt een .wmv video en je wilt deze afspelen op je website met de ingebouwde flowplayer dan moet je deze eerst converteren = omzetten naar een ander formaat. Er zijn vele freeware converteer programma's te vinden op het internet en je kan er ook zelf naar zoeken of je hebt er misschien al een op je pc. Ze doen het echter niet allemaal altijd even goed bv dat het geluid na converteren niet gelijk loopt met het beeld. Hieronder zullen we 1 programma bespreken waarmee goed en makkelijk geconverteerd kan worden.

Als voorbeeld gaan we 2 video's invoegen op de website: een filmpje van de vliegshow van Resque Vlissingen 2010 en een filmpje uit de paardensport. Het eerst filmpje gaan we als voorbeeld converteren. We gebruiken hiervoor All Free Video Converter te downloaden vanaf:

www.allfreevideoconverter.com/freevideoconverter

Klik na (eenmalige installatie) en het starten van dit programma op Add Video en blader naar het videobestand wat je wilt converteren naar .flv.

Klik vervolgens op Next.

Klik vervolgens bij Output directory op Select en kies de map waar je de geconverteerde video wilt opslaan. Kies vervolgens daaronder bij Convert to: voor To FLV en kies daaronder bij Presets voor de beste kwaliteit (bovenste optie).

Klik vervolgens op Convert.

De video wordt geconverteerd en je kunt zien hoe het proces verloopt. Als het converteren klaar is verschijnt er een melding en kun je het programma sluiten. Vervolgens ga je naar de map waar je het bestand hebt laten opslaan.

Naam wijzigen en uploaden

Zorgt dat de videobestanden altijd een duidelijke naam mee krijgen zodat je later altijd weet om welk filmpje het gaat. Gebruik geen spaties en maak de naam niet al te lang. Gebruik het liefst ook alleen kleine letters. Dit alles maakt het invoegen op de site makkelijker. We hernoemen ons filmpje naar vliegshow2010.flv.

Start nu je FTP programma en ga naar je publieke www map waarin de installatie van Dutch CMS staat en maak een map genaamd video. Open deze map en upload het videobestand in deze map.

Inloggen en kiezen waar video moet komen

Log in op het beheerdersgedeelte van je website en kies waar de video moet komen op je website. Dit kan bijvoorbeeld zijn op de voorpagina of op een normale pagina of bv een weblog (nieuws) pagina.

HTML code plaatsen

De basiscode om de video af te spelen is in HTML en ziet er als volgt uit. Voor verduidelijking is deze even in verschillende kleuren weergegeven.

<div style="display: table; width: 472px; margin: 0px; margin-left: auto; margin-right: auto;">
<a id="naamfilmpje" style="display: block; width: 470px; height: 320px;" href="/video/naamfilmpje.flv">
<img style="width: 470px; height: 320px; border:0;" src="/video/naamfilmpje.jpg" alt="" /> </a>
<script type="text/javascript">
// <![CDATA[
flowplayer("naamfilmpje", "/javascripts/flowplayer/flowplayer.swf");
// ]]>
</script>
<p>Bron: link of naam | Datum: hier de datum</p>
</div>

Op 4 plaatsen in de code moet je naamfilmpje veranderen in de naam van je filmpje. Verder verander je niks aan deze code behalve dan .flv eventueel als het bv om een .mp4 filmpje gaat.

Klik in de editor op het knopje HTML en plak daar vervolgens de code op de juiste plek. Als je dit moeilijk vindt bv als je de code tussen een deel tekst wilt plaatsen maak dan eerst in de editor een plaats waar je zet "code hier" en klik dan op HTML en zoek naar die woorden. Dan weet je precies waar je het moet plakken.

Om de code heen staat een div die er voor zorgt dat het filmpje gecentreerd wordt en onder de sluitingsdiv staat nog een eventuele bronvermelding en de tekst voor een datum. Natuurlijk ben je vrij om dat aan te passen als je weet wat je doet.

Om verder te gaan met ons voorbeeld veranderen we dus op 4 plaatsen naamfilmpje in vliegshow2010 en plakken deze code hier in deze handleiding:

Na het invoegen van de code zie je in de editor een leeg vierkant:

En in je browser na opslaan ziet het er zo uit (een leeg vlak):

Bron: link of naam | Datum: hier de datum

Startafbeelding maken

De rede dat je een blanco vlak krijgt is omdat er eerst nog een startscherm gemaakt moet worden. Kijk eerst of het filmpje wel afspeelt en of je dus geen fouten hebt gemaakt. Speelt het niet af ga dan terug naar bewerken en kijk of je misschien vergeten bent op 1 van de 4 plaatsen de naam goed in te vullen.

Het startscherm is een afbeelding in .jpg formaat. Deze maak je op de volgede manier:

  • Klik op het lege vlak zodat het filmpje gaat afspelen.
  • Zet het filmpje op pauze op een plek waarvan je denk dat is wel een mooi startscherm. 
  • Ga met je muis van het filmpje af zodat de player controls verdwijnen.
  • Maak met de Print Screen toets rechtsboven op je toetsenbord een prinscreen. Dit is een schermfoto van je gehele beeldscherm. 
  • Open je favoriete afbeeldingseditor (bv Paint of Irfan View) en ga naar Bewerken > Plakken en plak je schermafbeelding. Snij of selecteer alleen het startscherm en verwijder de rest
  • Sla deze afbeelding vervolgens op in de map video met EXACT dezelfde naam als het filmpje (wat je op 4 plaatsen hebt opgegeven) in .jpg formaat.
  • Deze afbeelding vervolgens ook uploaden met FTP naar je server in dezelfde map video. 
  • Als je vervolgens het scherm ververst dan zie je in plaats van het lege vlak het startscherm.

Hieronder even als voorbeeld hoe je dit in Paint kan doen of in Irfan View:

Voorbeeld in Paint

Ga naar Bewerken > plakken en plak je schermafbeelding. Ga vervolgens linksboven in de tekenwerkset naar het vierkante selectievakje en klik daar op. Je kunt nu een selectiekader trekken PRECIES om het startscherm wat je graag wilt hebben. Doe dit exact zonder extra randen dus precies BINNEN de rand van het filmpje.

Nu komt de truc. Klik met de rechtermuisknop op de selectie en kies voor Kopieren naar. Nu kun je exact de selectie opslaan als apparte afbeelding. Zo makkelijk werkt dat. Blader naar de map op je pc waar de video's in zijn opgeslagen en geef dit screenshot EXACT dezelfde naam als die van het filmpje.

Voorbeeld in Irfan View

In Irfan View kun je automatisch een selectiekader trekken door simpelweg de muis ingedrukt te houden en vervolgens het vierkant te trekken. Ga vervolgens naar Edit > Crop selection en alleen het geselecteerde gedeelte blijft over. Vervolgens de afbeelding opslaan door op het diskette symbooltje te klikken en te bladeren naar de map op je pc waar de video's in zijn opgeslagen. Niet vergeten dit screenshot EXACT dezelfde naam te geven als die van het filmpje.

 
Het resultaat !

Bron: A. L. / Dutch CMS | Datum: 2010

Extra voorbeelden

Als extra voorbeeld voegen we nog een filmpje uit de paardensport in (met dank aan Jan van Lankveld). Voor dit filmpje hebben we het controlpannel een lichtere skin gegeven.

Bron: Jan van Lankveld | Datum: 24 maart 2010

Aangepaste code:

<div style="display: table; width: 472px; margin: 0px; margin-left: auto; margin-right: auto;">
<a id="naamfilmpje" style="display: block; width: 470px; height: 320px;" href="/video/naamfilmpje.flv">
<img style="width: 470px; height: 320px; border:0;" src="/video/naamfilmpje.jpg" alt="" /> </a>
<script type="text/javascript">
// <![CDATA[
 flowplayer("naamfilmpje", "/javascripts/flowplayer/flowplayer.swf", {
    plugins: {
        controls: {
            // code voor skin
            buttonColor: 'rgba(0, 0, 0, 0.9)',
            buttonOverColor: '#000000',
            backgroundColor: '#D7D7D7',
            backgroundGradient: 'medium',
            sliderColor: '#FFFFFF',
            sliderBorder: '1px solid #808080',
            volumeSliderColor: '#FFFFFF',
            volumeBorder: '1px solid #808080',
            timeColor: '#000000',
            durationColor: '#535353'
        }
    }
}); 
// ]]>
</script>
<p>Bron: link of naam | Datum: hier de datum</p>
</div>

Meer voorbeelden zijn de vinden op de Media site van Vrienden van het Brit.

Kan de Flowplayer ook audio afspelen ?

Jazaker dat kan. De Flowplayer kan in plaats van het afspelen van videobestanden ook gebruikt worden als audioplayer voor op je website. Het formaat moet altijd .mp3 zijn. Ook het afspelen van audio past weer perfect in de doelstrekking van Dutch CMS. Denk bv aan het plaatsen van opnames van je (brass)band die je aan het grote publiek wilt laten horen of misschien speel je synthesyzer en maak je je eigen composities. Nog voor de hand liggender zijn bv radio interviews of als je bv met Dutch CMS een site maakt voor je plaatselijke kerk het plaatsen van preken in mp3 formaat.

Het was echter wel even wat werk om dit aan de praat te krijgen omdat de ingebouwde editors (TinyMCE en CKEditor) in de weg zaten. Deze veranderen namelijk de code zodat het niet meer werkt. Om dit te fixen moet je even deze Dutch CMS 1.9 audio patch downloaden en de instructies volgen. Vanaf Dutch CMS versie 2.0 zal deze aanvullende code gewoon ingebouwd zijn in Dutch CMS.

Voorbeeld van een radio interview (bron: Divine Cosmos)

Radio interview David Wilcock  | 15 september 2010

 

Code:

<div style="display: table; width: 650px; margin: 0px; margin-left: auto; margin-right: auto;">
<p><strong>Titel</strong> | <em>Datum</em></p>
<div id="naamaudiobestand" style="display: block; width: 650px; height: 30px; background-color: #000000;" href="/audio/naamaudiobestand.mp3"></div>
<script type="text/javascript">
// <![CDATA[

$f("naamaudiobestand", "/javascripts/flowplayer/flowplayer.swf", {
    plugins: {
        controls: {
            fullscreen: false,
            height: 30,
            autoHide: false
        }
    },
    clip: {
        autoPlay: false
    }
});
// ]]></script>
</div>

Korte Procedure Audio plaatsen

  • Geef je audiobestand een korte naam zonder spaties of hoofdletters. Maak een map genaamd audio en plaatst daar het mp3 bestand in en upload deze naar je server.
  • Log in op je beheerdersgedeelte en bepaal waar audiobestand moet komen.
  • Op 3 plaatsen in de code moet je naamaudiobestand veranderen in de naam van je audiobestand. 
  • Klik in de editor op het knopje HTML en plak daar vervolgens de code op de juiste plek. Als je dit moeilijk vindt bv als je de code tussen een deel tekst wilt plaatsen maakt dan eerst in de editor een plaats waar je zet "code hier" en klik dan op HTML en zoek naar die woorden. Dan weet je precies waar je het moet plakken.
  • Om de code heen staat een div die er voor zorgt dat de audioplayer gecentreerd wordt en onder de sluitingsdiv. Boven de sluitingsdiv maar onder </script> kun je eventueel ook nog tekst plaatsen.
  • Na de HTML te hebben ingevoegd zie je een langwerpig vlak. Na het opslaan ga je naar de pagina waar je de player op hebt gezet en kijk je of hij goed laadt en afspeelt.

Voorbeeld van een muziekbestand (bron: Project Camelot)

'Jaguar', the Camelot theme music

 

Zoals je ziet heeft deze een andere kleur en een andere breedte en hoogte.

Extra code voor lichte skin:

Toevoegen direct onder (eerst een comma achter false zetten !!!!!!!!!!)
 
autoHide: false,

            // code voor skin
            buttonColor: 'rgba(0, 0, 0, 0.9)',
            buttonOverColor: '#000000',
            backgroundColor: '#D7D7D7',
            backgroundGradient: 'medium',
            sliderColor: '#FFFFFF',
            sliderBorder: '1px solid #808080',
            volumeSliderColor: '#FFFFFF',
            volumeBorder: '1px solid #808080',
            timeColor: '#000000',
            durationColor: '#535353'

Aanvullend

  • Verander ook de background-color: #kleur in het (zie hierboven) groene gedeelte in dezelfde kleur die staat bij backgroundColor.
  • Als je de hoogte veranderd moet je dat op 2 plaatsen aanpassen namelijk in het groene gedeelte bij height: met px erachter en in het oranje gedeelte bij height: zonder px erachter.
  • De breedte pas je aan in het groene gedeelte bij width.

Informatie over de Flowplayer Audio Plugin:
http://flowplayer.org/plugins/streaming/audio.html

Uiterlijk aanpassen van de Flowplayer (skinning)

Zoals je hierboven hebt gezien zowel in de video als de audio voorbeelden kan de Flowplayer tussen de JavaScript code aangepast worden qua skin. In principe kun je zelf ook met die kleuren spelen door kleurcodes in de CSS van bovenstaande voorbeelden te veranderen.

Voor meer informatie over het skinnen van de player kijk je op:

Flowplayer uitbreiden met andere of meer functionaliteit

De Flowplayer website is erg uitgebreid met allerlei codevoorbeelden en plugins die nog meer kunnen.

  • Vanaf Dutch CMS versie 2.0 zijn ALLE mogelijke plugins meegeleverd met het CMS. Deze zijn dan ook zonder versienummer anders klopt het later niet meer met het versienummer in je ingevoegde code en zou je dat versienummer overal weer moeten veranderen.)
  • Als je code overneemt van de website van Flowplayer zorg dan dat je ook in de code het versienummer eraf haalt als je verwijst naar een bepaalde .swf plugin.
  • Verander verder altijd de padnamen naar de mappen en bestanden op je eigen server.
  • Wees voorzichtig met Javascript want 1 , of } verkeerd of teveel en het zaakje werkt niet meer.
  • Hou een changelog bij (txt bestandje) voor jezelf waarin je noteert wat je gedaan hebt !
  • Volg zoveel mogelijk verder de codevoorbeelden in deze handleiding.

Vriendelijke groet,

A. L. / Dutch CMS

Powered by Dutch CMS v2.0 XHTML Strict

Bezoek ook de Webdesign website van Dutch CMS