HTML5 - Zufällige Video-Wiedergabe

TheOnly1

RBTV | ngb | BMG
Registriert
14 Juli 2013
Beiträge
4.150
Ort
Zimmer 237
Ich möchte für ZaaaPfun folgendes realisieren:
Eine Zufalls-Video-Wiedergabe mit HTML5.

Folgende Vorabüberlegung:
Alle Videos liegen mit unterschiedlichen Namen, aber gleichem Dateityp im selben Ordner.
Bei Aufruf der Seite soll ein Video zufällig ausgewählt werden und mit <VIDEO></VIDEO> wiedergeben werden.
Mein Problem ist, dass ich nicht weiß, ob HTML im Videotag mit einer Variable umgehen kann.
Normalerweise wäre die Syntax ja so was wie:
<source src="DATEI.ogv" />

Damit allerdings ein Zufallsvideo abgespielt werden kann, muss vorher via PHP eine Datei aus dem Ordner ausgewählt werden und dann als Wert einer Variable übergeben werden.
<source src="$dateiname[X];" />

Nur funktioniert das nicht.
Keine Überraschung: Letztlich kann man natürlich keine PHP-Variable an HTML5 übergeben.
Aber man müsste doch innerhalb von PHP den HTML5-Videotag nutzen können.

Nur leider weiß ich nicht so wirklich wie…
Oder hat jemand noch eine ganz andere Idee?
 
Hmm, weiß nicht ob ich dich jetzt richtig verstanden habe...wie wäre es denn mit sowas:
[src=php]<?php
echo "<source src=\"".$dateiname[X]."\" />"
?>[/src]
Wobei $dateiname eben vorher zufällig mittels PHP ausgewählt wird.
 
  • Thread Starter Thread Starter
  • #3
Sieht eigentlich nicht schlecht aus. Manchmal ist man halt einfach "blind".
Ich probier das heute Abend direkt mal aus, wenn ich zu Hause bin.
 
Ich würde es definitiv Serverseitig machen. Was ist, wenn der User kein JS anhat? Soll das Video dann nicht mehr gehen oder mit Defaultwert (sprich 1 Video was vorher ausgesucht wurde) starten? Doof. Lieber mit PHP dann reinbasteln.
 
  • Thread Starter Thread Starter
  • #5
Habs hinbekommen!
Wer Interesse hat, hier ist der Code:
[src=php]<?php

$Verzeichnis = "vid";

if($Verzeichniszeiger = opendir($Verzeichnis))
{
while($Datei = readdir($Verzeichniszeiger))
{
if(!is_dir($Datei))
{
$Dateien[] = $Datei;
}
}

closedir($Verzeichniszeiger);
}

echo"<video src=\"",
$Verzeichnis,
"/",
$Dateien[rand(0, count($Dateien)-1)],
"\">";

?>
[/src]



Der Einwand ist nicht völlig unberechtigt.
Allerdings gehts mir halt vor allem um die "Spielerei" bei der Umsetzung. Die User können die Seite ohne Scripting und HTML5-fähigen Browser eh nicht sinnvoll nutzen.
Von daher...
 
[src=php]$Verzeichnis = "vid";

if($Verzeichniszeiger = opendir($Verzeichnis))
{
while($Datei = readdir($Verzeichniszeiger))
{
if(!is_dir($Datei))
{
$Dateien[] = $Datei;
}
}

closedir($Verzeichniszeiger);
}[/src]


Das geht wohl auch kürzer (ungetestet):
EDIT:
Ich hab nochmal drüber nachgedacht...das ursprüngliche könnte ein Problem wg. nicht-kontinuierlicher Keys geben; besser so:
[src=php]$Verzeichnis = "vid/*";
$Dateien = array_values(array_filter(glob($Verzeichnis), 'is_file'));[/src]
 
Zuletzt bearbeitet:
Du könntest jetzt noch zumindest versuchen sicher zu stellen, dass es sich nicht um einen Link ("Verknüpfung") oder um eine Nicht-Videodatei handelt.
Ersteres sei damit erklärt: /srv/www/public/vid/oeffentlich.mpg --> /home/theonly1/privat/homeporn/myporn.mpg
Zweiteres könnte einfach der Fall sein, dass du noch andere Dateien in dem Verzeichnis liegen haben könntest.

[src=php]// the windows way: file extension
// schau mal, ob die Datei einen Namen hat, der auf Videos hinweist
function isMovieTheWinWay ($Filename, $allowed=NULL)
{
// Endungen von "guten" Datei-Erweiterungen
if (!$allowed)
{
// 3xMPEG, 2xQuicktime, 2xVivo, 1xMS Avi, 1xMovie
$allowed = array('mpeg', 'mpg', 'mpe', 'qt', 'mov', 'viv', 'vivo', 'avi', 'movie');
}

// homeporn.ogg => array('homeporn', 'ogg')
$exploded = explode('.', $Filename);

return in_array($exploded[1], $allowed);
}

// the better way
// wir sollten mindestens irgendeinen Videotyp haben video/*
function isMovieTheUnixWay ($Filename, $allowed=NULL)
{
$mime = finfo::file($Filename, FILEINFO_MIME); // video/mpeg

// Benutzereinschränkungen beachten
if ($allowed)
{
return $mime == $allowed;
}

// video/mpeg => array('video', 'mpeg')
$exploded = explode('/', $mime);
return $exploded[0] == 'video'
}[/src]

Damit können wir einigermaßen zuverlässig prüfen, ob es sich bei den Dateien tatsächlich um Videos handelt oder nicht.

Jetzt kommt dein Teil, nur so, dass es die Funktionen nutzt:
[src=php]$Verzeichnis = "vid";
if($Verzeichniszeiger = opendir($Verzeichnis))
{
while($Datei = readdir($Verzeichniszeiger))
{
if (!is_dir($Datei))
{
if (!is_link($Verzeichnis.'/'.$Datei) && isMovieTheWinWay($Verzeichnis.'/'.$Datei) && isMovieTheUnixWay($Verzeichnis.'/'.$Datei))
{
$Dateien[] = $Datei;
}
}
}
closedir($Verzeichniszeiger);
}
[/src]

Jetzt machen wir das html5 Video-Element noch schöner:
Wir geben die Video Datei an, den mime-Typ, anschließend noch ein Vorschaubild, setzen Höhe und Breite, erlauben das Buffern und Steuerungselemente. Außerdem teilen wir dem Nutzer mit, dass sein Browser veraltet ist, falls das mit dem Video nicht hin hauen sollte.
[src=php]echo '<video src="' . $Verzeichnis . '/' .$Dateien[rand(0,count($Dateien)-1)] . '", type="' . finfo::file($Filename, FILEINFO_MIME) . '" poster="vorschau.jpg" width="320" height="240" autobuffer controls><div>Oh, dein Browser kann leider kein HTML5. Du solltest ihn dringend updaten um das volle Angebot meiner Seite nutzen zu können.</div></video>';[/src]
 
  • Thread Starter Thread Starter
  • #8
Danke für die ausführliche Antwort acC.

Ein paar Anmerkungen dazu:
Das Nicht-Video-Dateien vorliegen kann ich ausschließen, da ich sie selbst und ausschließlich als mp4 dort hochlade (wohl wissend um gewisse Browserinkompatibilitäten, mehrere Formate oder gar Flash als Failback sind mir aber im Moment zu aufwendig).

Steuerelemente sind hinzugefügt, Autoplay ist an, da das vom Seitenkonzept her so gewollt ist.
Vorschaubild ist daher unnötig. Was genau bringt mir autobuffer? Die Videos laufen auch ohne flüssig, soweit ich das nun getestet habe.

Width und height skalieren das Video auch, wenn ich das richtig im Kopf habe, oder?
Das wäre noch eine Überlegung wert.

Das vorläufige Ergebnis kann man bei Interesse bewundern unter:


Wie gesagt:
Ich bastel an der ganzen Seite und auch an den jeweiligen Bereichen noch rum. Sowohl inhaltlich, als auch technisch.
 
Zurück
Oben