Processwire - Working with Video - Versionsgeschichte

109.192.169.230 am 5. Mai 2021 um 07:30 Uhr

2021-05-05T07:30:09Z

109.192.169.230: /* Beispiel - HTML5 Video über Dateiname */

2021-05-05T07:28:26Z

Beispiel - HTML5 Video über Dateiname

109.192.169.230: /* HTML5 Video mit Fallback */

2021-05-05T07:28:03Z

HTML5 Video mit Fallback

109.192.169.230: /* = layout_blocks.inc */

2021-05-05T07:26:28Z

= layout_blocks.inc

37.49.32.84 am 31. August 2017 um 15:08 Uhr

2017-08-31T15:08:06Z

37.49.32.84: /* video_box.php */

2017-08-31T14:51:55Z

video_box.php

37.49.32.84: Die Seite wurde neu angelegt: „== HTML5 Video mit Fallback == === Beispiel: Umfangreiche Konfiguration in Isotope Matrix === Basiert auf Isotope Elements in 3B. Die Isotope Matrix wird hier…“

2017-08-31T14:51:07Z

Die Seite wurde neu angelegt: „== HTML5 Video mit Fallback == === Beispiel: Umfangreiche Konfiguration in Isotope Matrix === Basiert auf Isotope Elements in 3B. Die Isotope Matrix wird hier…“

Neue Seite

== 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 ===
==== video_box.php ====
site/templates/fields/iso_elem_matrix/video_box.php
<syntaxhighlight lang="php">
<?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";
$aspectClass = "a-2-1";
$imgW = 800;
$imgH = 400;
$icoW = 200;
break;
case '4': // medium 1-2
$sizeClass = "size-s";
$aspectClass = "a-1-2";
$imgW = 400;
$imgH = 800;
$icoW = 200;
break;
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();
?>


<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>

<?php
$out = ob_get_contents();
ob_end_clean();

return $out;

</syntaxhighlight>

==== 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

← Nächstältere Version		Version vom 5. Mai 2021, 07:30 Uhr
Zeile 1:		Zeile 1:
		+	== 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 ==		== 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:		Große Videos lassen sich besser mit FTP hochladen. Z.B. in ein definiertes Verzeichnis und man gibt einfach den Dateinamen an:

@@ Zeile 35: / Zeile 35: @@
 ';
 </php>
 == Beispiel - HTML5 Video mit Fallback ==

← Nächstältere Version		Version vom 5. Mai 2021, 07:28 Uhr
Zeile 1:		Zeile 1:
−	== HTML5 Video mit Fallback ==	+	== 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:
		+	<syntaxhighlight lang="php">
		+	// 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 ===		=== Beispiel: Umfangreiche Konfiguration in Isotope Matrix ===

@@ Zeile 12: / Zeile 12: @@
 === Templates ===
-==== layout_blocks.inc ===
+==== layout_blocks.inc ====
 <syntaxhighlight lang="php">
 <?php namespace ProcessWire;

@@ Zeile 14: / Zeile 14: @@
 ==== video_box.php ====
 site/templates/fields/iso_elem_matrix/video_box.php
 <syntaxhighlight lang="php">
 <?php namespace ProcessWire;
@@ Zeile 37: / Zeile 39: @@
    case '2': // medium 2-1
      $sizeClass = "size-m";
-     $aspectClass = "a-2-1";
+     //...
    default: // big 2-2
      $sizeClass = "size-l";
@@ Zeile 106: / Zeile 97: @@
 </syntaxhighlight>
-−
 ==== Felder ====
 iso_elem_videos -> Type Select File (Ein oder mehrere Videos)