Processwire - Working with Video

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