HTML5 video weergeven op uw website (video op eigen hosting)

1.Via het cpanel van uw hosting maakt u een nieuwe map aan :videomap

• /sites/default/files/videomap

2. nieuwe tekstopmaak video PHP aanmaken.

• via Instellingen => Inhoud samenstellen => Tekstopmaak en editors voeg je een nieuwe tekstopmaak toe
• Vul bij name video PHP in en duidt aan dat enkel de beheerder dit kan gebruiken.

• vink PHP-verwerker aan

• nieuw tekstopmaak formaat opslaan

3. In het inhoudstype waar u de video('s) wenst te vertonen dient u 3 nieuwe velden aan te maken.

1. Upload video
   • veldtype: bestand
     • Helptekst: Upload hier uw film(s) in de 4 formaten (mp4, ogg, webm, ogv) (of uw eigen tekst waarin u duidelijk maakt wat de eindgebruiker moet doen)
     • Toegestane bestandsextensies: mp4, ogg, webm, ogv
     • Map: videomap
     • Maximumgrootte per upload: 1GB
     • Toegestane aantal waarden: onbeperkt
2. Video naam (onthoud de machinenaam van de veld, u heeft het nodig later in het php script)
   • veldtype: Tekst (plat)
     • Helptekst: Plaats hier de naam van de video zonder vermelding van de extentie, vb:tuin.mp4, tuin.ogg, tuin.webm, tuin.ovg ==> tuin
     • Toegestane aantal waarden: onbeperkt
3. Video script
   • veldtype: Tekst (opgemaakt, lang)
     • Toegestane aantal waarden: beperkt => 1
     • Standaardwaarde: (vervang  de veldnaam field_video_names in het script door de machinenaam van uw video naam veld 

       • <?php

         $eigennid = \Drupal::routeMatch()->getRawParameter('node');
         $eigennode = \Drupal::entityTypeManager()->getStorage('node')->load($eigennid);

         $videonames= $eigennode->get('field_video_names')->getValue();  

         $x=0;
         foreach ($videonames as $videoname){
         $video[$x]= $eigennode->get('field_video_names')[$x]->getString();  
         $x++;
         }

         $y=0;
         while ($y<$x){
         echo "
         <div class='video'>
         <video controls autoplay>
           <source src='/sites/default/files/videomap/".$video[$y].".mp4' type='video/mp4'>
           <source src='/sites/default/files/videomap/".$video[$y].".ogg' type='video/ogg'>
           <source src='/sites/default/files/videomap/".$video[$y].".webm' type='video/webm'>
           <source src='/sites/default/files/videomap/".$video[$y].".ogv' type='video/ovg'>
           Your browser does not support the video tag.
         </video> 
         </div>
         ";
         $y++;
         }
         ?>

       • Tekstopmaak: video php

4. Opmaak inhoudstype:

1. Formulierweergave beheren:
   • het veld Video script versleept u naar Uitgeschakeld
2. Weergave beheren:
   • velden Upload video en Video naam versleept u naar Uitgeschakeld
3. CSS injector:
   • met de klasse video kan u bepalen hoe de video op het scherm wordt getoond. (vb hieronder)
   • 

5. Video's omzetten kan je online op vb :https://convertio.co/nl/

6. HTML5 video controls:

• De bedieningselementen van de videospeler tonen of verbergen
  Besturingselementen zoals afspelen / pauzeren, volume, schakelen op volledig scherm en de zoekschuifregelaar kunnen eenvoudig worden ingeschakeld met behulp van het controls kenmerk
  • <video controls > = met besturingselementen
  •  <video > = zonder besturingselementen
• Autoplay
  Een video kan automatisch worden afgespeeld zodra deze gereed is door het autoplay kenmerk toe te voegen
  • <video controls autoplay> of <video autoplay>
• Playsinline
  • om op een toestel met ouder besturingssysteem IOS autoplay te kunnen afspelen.
  • <video controls playsinline>
• Lus
  Als je de video in een lus wilt afspelen, kun je het loop kenmerk gebruiken
  • <video autoplay loop>
• Demp het geluid
  Soms is de audio van de video niet nodig. Om de audio van de video uit te schakelen, kunt u eenvoudig het muted kenmerk aan de <video>code toevoegen
  • <video controls muted>

7. CSS

• in onze code hebben we de klasse video vermeld. Met deze klasse kunnen we dus via de CSS allerlei voorwaarden meegeven
• de meeste video's zijn in landscape, maar soms is het nodig om in een bepaald blok toch een portretvideo te plaatsen zonder dat deze vervormd om in zijn container te passen. Dit kunnen we doen met de eigenschap object-fit.
  • contain - de video wordt geschaald om in de container te passen met behoud van de beeldverhouding, er zal letterboxing rond de video aanwezig zijn
  • cover - de video wordt geschaald om de container te vullen met behoud van de beeldverhouding, de video wordt geknipt
  • fill - de video wordt geschaald om de container te vullen zonder de beeldverhouding te behouden, de video wordt uitgerekt
  • none - het formaat van de video wordt niet gewijzigd
  • vb: .video {object-fit:contain:}