Nicht erst durch Youtube gelangen Videos auf Websites zu einer immer größeren Popularität. Dabei muss es ja nicht immer um Spaß-Videos gehen, sondern auch Produkte auf einer Unternehmens-Website werden durch Video-Demonstrationen im web-freundlichen Flash-Format deutlich aufgewertet. In den folgenden Abschnitten werde ich zeigen wie man schnell und einfach Videos in eine bestehende CakePHP-Applikation einbinden kann.
Hinweis: Diese Anleitung bezieht sich auf CakePHP Version 1.2.5 stable und verwendet Videos im FLV-Format. Die Umwandlung aller möglichen Videos in das FLV-Format kann zum Beispiel über ffmpeg erfolgen.
1. File-Upload-Behavior hinzufügen
Für den Upload der Video-Datei verwenden wir das absolut geniale Meio-Upload-Behavior. Die Dokumentation auf der Projekt-Seite ist schon sehr aussagekräftig, zur Sicherheit werde ich aber die wichtigsten Schritte noch einmal darstellen 
- Lade das Behavior herunter: http://www.meiocodigo.com/meioupload/src/meio_upload_v1.0.1.rar
- Lege das Behavior-File (meio_upload.php) in den entsprechenden Ordner der Cake-Installation (/app/models/behaviors).
- Wir definieren das Formular für das Model, erweitern das Model und kümmern uns um die Darstellung
2. Model definieren
In unserem Beispiel soll das Model “Product” um einen Video-Upload erweitert werden. Dazu definieren wir das Model wie folgt:
<?php
class Product extends AppModel {
var $validate = array(
'file' => array(
'Empty' => array(
'check' => true,
'on' => 'create',
'message' => 'Bitte wählen Sie eine Datei',
),
'InvalidExt' => array(
'message' => 'Diese Dateiendung ist nicht erlaubt'
),
'Dir' => array(
'message' => 'Das Verzeichnis ist nicht beschreibbar'
),
'UploadError' => array(
'message' => 'Beim Upload ist ein Fehler aufgetreten'
),
'MaxSize' => array(
'message' => 'Die maximale Dateigröße wurde überschritten'
),
'InvalidMime' => array(
'message' => 'Ungültiger Dateityp'
),
)
);
var $actsAs = array(
'MeioUpload' => array(
'file' => array(
'dir' => 'files{DS}{model}{DS}{field}',
'create_directory' => true,
'allowed_ext' => array('.flv'),
'default' => false,
'max_size' => '10 Mb',
'fields' => array(
'filesize' => '{field}_filesize',
'mimetype' => '{field}_mimetype',
'dir' => '{field}_dir'
)
),
),
);
}
?>
Wie man sehen kann gibt es einige neue Validatoren für das Feld “file”. Diese Validatoren stammen aus dem Behavior und erlauben detaillierte Überprüfungen. In der Konfiguration des Feldes “file” sieht man, dass nur die Dateiendung “.flv” erlaubt sein soll und Dateien bis 10 MB Größe hochgeladen werden können.
Damit das Behavior funktioniert, benötigt unser Model noch 4 Felder im Datenbank-Schema, die wir mit phpMyAdmin angeben können:
- “file” -> enthält den Dateinamen der hochgeladenen Datei (varchar 255)
- “file_mimetype” -> enthält den Content-Type der hochgeladenen Datei (varchar 255)
- “file_filesize” -> enhält die Dateigröße (int 10)
- “file_dir” -> enthält den Pfadnamen zur hochgeladenen Datei (varchar 255)
Das Model ist jetzt bereit um Dateien zu empfangen und diese zu speichern. Alle Dateien werden später im Verzeichnis “/app/webroot/files/product/file” landen.
3. Formular erweitern
Damit die Dateien auch bis zum Model gelangen, müssen die Formulare zum erzeugen und bearbeiten des Models auch angepasst werden. Das Formular zum Erzeugen des Produktes sieht mit dem Video-Upload-Feld so aus:
<?php echo $form->create('Product', array('type' => 'file')); ?>
<?php echo $form->input('file', array('type' => 'file', 'label' => 'Video')); ?>
<?php echo $form->end('Speichern'); ?>
Das Formular zum bearbeiten eines Produktes sieht dann in etwa so aus (es enthält zusätzlich eine Checkbox zum Löschen der Datei…):
<?php echo $form->create('Product', array('type' => 'file'));?>
<?php echo $form->input('file', array('type' => 'file', 'label' => 'Datei')); ?>
<?php if ($this->data['Product']['file'] != '') { ?>
<?php echo $html->link($this->data['Product']['file'], '/'.$this->data['Product']['file_dir'].'/'.$this->data['Product']['file']); ?>
<?php echo $form->input('file.remove', array('type' => 'checkbox', 'value' => false, 'label' => 'Video löschen')); ?>
<?php } ?>
<?php echo $form->end('Speichern');?>
Nun können wir zu unserem Model bereits Videos hochladen, die auf dem Server im angebenen Verzeichnis abgelegt werden. Praktisch: Mit der Checkbox im Edit-Formular kann man die Datei entfernen. Auch wenn das Model gelöscht wird, werden die abhängigen Dateien vom Server entfernt.
4. Darstellung des Videos (Player)
Die FLV-Datei liegt jetzt im besten Fall auf dem Server und ist über die Datenbank an das Model gebunden. Es fehlt nun noch die Möglichkeit das Video auf der Website auch anzeigen zu können.
Es gibt zahlreiche FLV-Player für die Einbettung von Flashvideos auf Websites. Allerdings sind die meisten für den kommerziellen Einsatz kostenpflichtig oder man muss sich selbst einen Player mittels Adobe Flex zusammenbauen. Für unsere einfachen Einsatzzwecke genügt der Open-Source-Player OS FLV.
Ein schönes Zusatzfeature von OS FLV ist der Code-Generator: Ein kleines Script im heruntergeladenen Paket ermöglicht es, den Player an die eigenen Bedüfrnisse anzupassen. Der generierte Code erstellt einen Player, dem nur noch der Pfad zum Film in der CakePHP-View mitgeteilt werden muss.
Eine etwas schönere Möglichkeit zur Einbettung ist mit dem Javascript swfobject möglich. Nach der Integration des Scriptes genügt der folgende Abschnitt in der View:
<div class="video-item">
<h4><?php echo $product['Product']['title']; ?></h4>
<div id="vieo-<?php echo $product['Product']['id']; ?>">
<script type="text/javascript">
var flashvars = {};
flashvars.movie = "<?php echo '/'.$product['Product']['file_dir'].'/'.$product['Product']['file']; ?>";
flashvars.bgcolor = '0x333333';
flashvars.fgcolor = '0xCCCCCC';
flashvars.volume = '50';
flashvars.autoplay = 'off';
flashvars.autorewind = 'on';
flashvars.clickurl = '';
flashvars.clicktarget = '';
flashvars.postimage = '';
swfobject.embedSWF("/img/flash/player/player.swf", "product-<?php echo $product['Product']['id']; ?>", "510", "400", "8.0.0", "/img/flash/expressInstall.swf", flashvars, {allowFullScreen: true});
</script>
</div>
</div>
Die Werte der Flash-Vars entstammen dem Code-Generator aus OS FLV. Die SWF-Datei haben wir unter /app/webroot/img/flash/player abgelegt.
Wenn alles bis dahin funktioniert hat, ist nun das von uns hochgeladene Video in einem Player auf der entsprechenden View abspielbar
Ähnliche Artikel: