Processwire - Working with Video

Allgemeines zu HTML5 Video

Autostart von Videos mit Ton ist in vielen Browsern wegen der Sicherheitsbeschränkungen nicht möglich. Hier muss man im JavaScript Fallbackmöglichkeiten vorsehen (siehe Codepen Beispiel oder DEKRA GB)

Beispiel - HTML5 Video über Dateiname

Große Videos lassen sich besser mit FTP hochladen. Z.B. in ein definiertes Verzeichnis und man gibt einfach den Dateinamen an:

// Video specs
$videoButtonUrl = $config->urls->templates.'assets/bVideo.svg';
$videoPauseUrl = $config->urls->templates.'assets/bPause.svg';
$videoFolder = $config->urls->templates.'assets/videos/';
$videoPoster = '';
if($page->video_poster){
    $videoPoster = $page->video_poster->width(800)->url;
}
$vid = 'v-'.$page->id;
$bid = 'vb-'.$page->id;
preg_match('^(?:https?:\/\/)^',$page->video_name,$match);
if($match){    // link
    $videoUrl = $page->video_name;
    // z.B. http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
}else{
    $videoUrl = $videoFolder.$page->video_name;
}
$videoMarkup = '
<video id="'.$vid.'" data-toggle="'.$bid.'" class="na-16-9"
src="'.$videoUrl.'" 
preload="true" 
poster="'.$videoPoster.'" 
playsinline>
Entschuldigung, dein Browser kann keine Inline Videos abspielen. Schau das Video hier an:<br>
<a href="'.$videoUrl.'" target="_blank">ZUM VIDEO</a>
</video>

<div class="video-button" id="'.$bid.'">
    <img class="b-play" src="'.$videoButtonUrl.'" style="width: 100px;" alt="" srcset="">
    <img class="b-pause" src="'.$videoPauseUrl.'" style="width: 100px;" alt="" srcset="">
</div>
';
</php>

Beispiel - HTML5 Video mit Fallback

Beispiel: Umfangreiche Konfiguration in Isotope Matrix

Basiert auf Isotope Elements in 3B. Die Isotope Matrix wird hier nicht im Detail erklärt.

• Processwire Modul: FieldtypeSelectFile installieren (funktioniert auch auf 3.x angegeben ist nur bis 2.7 in 09/2017). InputfieldSelectFile wird automatisch mitinstalliert.
• Feld iso_elem_videos mit Typ File anlegen (Das Beispiel nutzt das RepeaterMatrix Pro Modul. Aber es geht natürlich auch in anderen Feldern. Siehe unten Felderübersicht)
• Bei Details: Valid File Extensions: mp4 ogv mpeg mov webm
• In der Repeater Matrix 'iso_elem_matrix' neuen Inhaltstyp anlegen (Name: video_box, Label: Video Box)
• Als Felder iso_elem_size, iso_elem_image, iso_elem_videos auswählen.
• Templates erweitern bzw. anlegen (siehe unten)

Templates

layout_blocks.inc

<?php namespace ProcessWire;
/* Shows layout blocks
 * uses repeater Matrix field
 */

function renderLayoutBlocks($page){
  $out = '';
  foreach($page->iso_elem_matrix as $item) {
    switch ($item->type) { // type refers to name field
      case 'portfolio_box':
        $out .= $item->render(); // looks for templates/fields/iso_elem_matrix/portfolio_box.php
        break;
      //...
      case 'video_box':
        $out .= $item->render();
        break;
      //..
      default:
        $out .= '<div class="message">Keine Renderdefinition gefunden für den Typ: '.$item->type.'</div>';
        break;
    }
  }
  return $out;
}

video_box.php

Wird durch das render Statement in layout_block.inc automatisch ausgeführt.

site/templates/fields/iso_elem_matrix/video_box.php

Gekürztes Beispiel

<?php namespace ProcessWire;
$pathToVideos = $config->urls->templates.'img/video/';
$out = '';
$templateName = $page->getForPage()->template->name;
if($templateName == "isotope-child") $isotopeFilterClass = $page->getForpage()->name;// class if template is isotope-child
else $isotopeFilterClass = "home";// for all other templates we want to show content imediately (home class inits first isotope element)
$myImage = "";
$myPoster = "";
$myUrl = "";
$has_link = 0;
$sizeClass = "";
// Element size
switch ($page->iso_elem_size) {
  case '1': // small 1-1
    $sizeClass = "size-s";
    $aspectClass = "a-1-1";
    $imgW = 400; //image width
    $imgH = 400;
    $icoW = 200; //icon width
    break;
  case '2': // medium 2-1
    $sizeClass = "size-m";
    //...
  default: // big 2-2
    $sizeClass = "size-l";
    $aspectClass = "a-1-1";
    $imgW = 800;
    $imgH = 800;
    $icoW = 200;
    break;
}
// Image
if($page->iso_elem_image){
  $imgOptions = array(
    'quality' => 80,
    'upscaling' => false
  );
  $myImage = $page->iso_elem_image->size($imgW,$imgH,$imgOptions);
  $myPoster = ' poster="'.$myImage->url.'"';
}
// Video

$videoMarkup = '';
if ($page->iso_elem_videos->count()) {
  foreach($page->iso_elem_videos as $file){
    $videoMarkup .= '<source src="'.$file->url.'" type="video/'.$file->ext.'">';
  }
}


// Video Container Markup
$videoMarkup = '
  <div class="element-with-video-bg jquery-background-video-wrapper stretch" >
    <video data-bgvideo="true" class="my-background-video jquery-background-video" loop autoplay muted'.$myPoster.'>
      '.$videoMarkup.'
    </video>
  </div>
';

ob_start();
?>

<!-- ======== <?=$isotopeFilterClass?> Element: Video Box item ======== -->
<div class="element video-box <?=$sizeClass?> <?=$isotopeFilterClass?>">
  <div class="aspect-wrapper transition <?=$aspectClass?>">
    <div class="element-wrapper">
      <div class="portfolio-item stretch" style="overflow:hidden">
        <?=$videoMarkup?>
      </div>
    </div>
  </div>
</div>
<!-- ======== / Element ======== -->
<?php
$out = ob_get_contents();
ob_end_clean();

return $out;

Felder

iso_elem_videos -> Type Select File (Ein oder mehrere Videos) iso_elem_image -> Type Image (Fallback) iso_elem_size -> Type Integer (Select Field) iso_elem_matrix -> RepeaterMatrix