html5 video

[einsiedler]

Hallo liebes Forum,

ich habe folgendes Problem,

und zwar lese ich mit einem php-script mehrere, ich nenne sie mal, mediaordner aus, in einem solchen Ordner befinden sich jpgs, pngs, mp4s, oggs und webm Dateien (nicht in allen Ordnern gleich viel, aber wenn sich Video-Dateien drin befinden dann auf jeden Fall mp4s, oggs und webm`s, um ja jeden Browser zu bedienen wenn ich das <video> tag benutze.

Es kann aber auch sein das sich mehrere, unterschiedliche Videos in dem Ordner befinden.

Nun ist es ja so, das alle drei Formate (mp4, ogg und webm) vom selben Video hintereinander abgespielt werden.

Das versuche ich zu unterbinden (Wenn es geht!)

So werden die Bilder / Videos angezeigt:

<figure class="mediabox">
		<?php
			if ($values['file']['type'] == 'image')
				{
					echo '<img src="'. $values['file']['filename'] .'" alt="" />';
				}
					elseif ($values['file']['type'] == 'video')
				{
					echo '<video src="'. $values['file']['filename'] .'" autoplay controls>Ihr Browser kann dieses Video nicht wiedergeben.</video>';
				}
				else 
				{
					echo '<b>Die aufgerufene Datei existiert leider nicht.<br /> Leite zum Anfang zurück ...</b><meta http-equiv="refresh" content="3; URL=work.php">';    
				}
		?>
</figure>

Meine Idee ist es nun im Abschnitt der Videos behandelt, eine Art Browserweiche einzubauen, so in der Art:

<?php
// Browserweiche
if (strstr($_SERVER['HTTP_USER_AGENT'], 'Opera')) {

    // Opera
    	    echo '<video src="'. $values['file']['filename'] .'" autoplay controls>Ihr Browser kann dieses Video nicht wiedergeben.</video>';
}

if (strstr($_SERVER['HTTP_USER_AGENT'], 'MSIE') && !strstr($_SERVER['HTTP_USER_AGENT'], 'Opera')) {
    // MSIE
    	    echo '<video src="'. $values['file']['filename'] .'" autoplay controls>Ihr Browser kann dieses Video nicht wiedergeben.</video>';
}

if (strstr($_SERVER['HTTP_USER_AGENT'], 'Netscape')) {
    // Netscape
    	    echo '<video src="'. $values['file']['filename'] .'" autoplay controls>Ihr Browser kann dieses Video nicht wiedergeben.</video>';
}
?>

Macht das Sinn und werden dann nicht alle Video-Typen vom selben Video hintereinander abgespielt? Und werden dann andere, weitere Videos berücksichtigt?

Dann wäre noch eine Idee, die Abfrage für den MSIE so zu splitten das wenn der IE kleiner als 9 ist automatisch eine Flash-version angeboten wird! Wie mache ich das?

Unterfrage: Die unterschiedlichen Medien-Dateien im Ordner werden trotz der Bezeichnungen: a_img.jpg / b_img.jpg / c_ing.mp4 / d_img.webm nicht in der Reihenfolge angezeigt, doch sie müssten wegen a - b - c -d SO in der Reihenfolge angezeigt werden. Woran liegt das?

Ersteinmal, DANK!

Grüsse der einsiedelnde

[Gunnar Bittersmann]

@@einsiedler

Nun ist es ja so, das alle drei Formate (mp4, ogg und webm) vom selben Video hinter- einander abgespielt werden.

Dann machst du was falsch: Du verwendest nicht das source-Element.

echo '<video src="'. $values['file']['filename'] .'" autoplay controls>Ihr Browser kann dieses Video nicht wiedergeben.</video>';

Ich fühle mich an die Tweets von Chris Heilmann erinnert:

1. "Sorry, but your browser does not support WebGL!" - sorry, you are a shit coder. [687616620529844224]
2. then show a fucking video of what people are missing instead of saying "your browser sucks" [687619858033438720]

Dasselbe gilt auch für Videos. Zeige einen Alternativtext fürs Video an, nicht einen Dein-Browser-ist-blöd-Text.

Außerdem halte ich es nie für sinnvoll, Markup mit PHP auszugeben. Stattdessen:

<figure class="mediabox">
  <?php if ($values['file']['type'] == 'image'): ?>
    <img src="<?php echo $values['file']['filename']; ?>" alt="" />
  <?php elseif ($values['file']['type'] == 'video'): ?>
    <video …>
    ⋮
    </video>
  <?php else: ?>
    <p>…</p>
  <?php endif; ?>
</figure>

Dazu sei noch angemerkt:

1. Auch fürs Bild wäre ein Alternativtext schön.
2. Statt <?php echo $values['file']['filename']; ?> kannst du auch kurz <?= $values['file']['filename'] ?> schreiben.
3. RTFM: Alternative Syntax für Kontrollstrukturen

echo '<b>Die aufgerufene Datei existiert leider nicht.<br /> Leite zum Anfang zurück ...</b><meta http-equiv="refresh" content="3; URL=work.php">';

Das meta-Element hat an dieser Stelle in HTML-Code nichts zu suchen. (Es gehört in den head.)

Meine Idee ist es nun im Abschnitt der Videos behandelt, eine Art Browserweiche einzubauen,

Wann immer deine Idee „Browserweiche“ ist, vergiss sie!

LLAP 🖖

[einsiedler]

DANKE! Da ist vieles dabei, das ich umändern/verbessern werde.

Doch mein Hauptproblem bleibt: Da ich die Medien-Daten aus einem Ordner auslese und bei den Videos stelle ich natürlich die drei Formate (mp4, webm, ogg) zur Verfügung, dann werden nach dem jpg= a_img.jpg, b_img.jpg, c_img.webm, c_img.mp4, c_img.ogg alle drei Video-Formate nacheinander angezeigt, also dasselbe Video drei-Mal hintereinander. Das ist doch Unsinn und ich möchte das andern. Doch wie? Wenn nicht eine Browser-Weiche, dann muss beim Auslesen etwas geändert werden, ein Vergleich: c_img.mp4 ist gleich C_img.ogg und ist gleich c_img.webm Doch wie soetwas coden..... puuuuh............ ????

[Gunnar Bittersmann]

@@einsiedler

Doch mein Hauptproblem bleibt

?? Auch das hatte ich bereits beantwortet.

dann werden nach dem jpg= a_img.jpg, b_img.jpg, c_img.webm, c_img.mp4, c_img.ogg alle drei Video-Formate nacheinander angezeigt, also dasselbe Video drei-Mal hintereinander. Das ist doch Unsinn und ich möchte das andern. Doch wie?

Indem du halt nicht

<video src="c_img.webm"></video>
<video src="c_img.mp4"></video>
<video src="c_img.ogg"></video>

generierst, sondern ein video-Element. Was es mit dem source-Element auf sich hat, hatte ich dir schon verlinkt. Du hast dir das Beispiel dort angesehen?

Wenn nicht eine Browser-Weiche, dann muss beim Auslesen etwas geändert werden, ein Vergleich: c_img.mp4 ist gleich C_img.ogg und ist gleich c_img.webm

Ja, du musst bei den Dateinamen jeweils alles vor dem letzten(!) Punkt miteinander vergleichen. Bei Gleichheit mit dem vorigen kommt’s in selbe video-Element; bei Verschiedenheit in ein neues. Öhm, ist denn gewährleistet, dass die Dateien in alphabetischer Reihenfolge durchlaufen werden?

LLAP 🖖

[einsiedler]

a) Der alternativ-Text (für das Video in dem oben beschriebenen Fall!) kann ja aus einem download-Link bestehen, oder?

b) Wenn das "meta-Element" in den head-Bereich gehört, wie bezieht er sich dann auf die == else == Alternative? Das verstehe ich nicht ganz!

c) Neben dem: alt="" ist es auch wichtig die Grössenangaben für die Bilder anzugeben? Wenn ja, dann müsste ich die Grössenangaben bei jedem Bild auslesen (jedes Bild ist leider unterschiedlich, ebenso horizontal als auch vertikal dargestellt): Ich habe ja: $values['file']['filename']; also: $size = GetImageSize ($values['file']['filename']); <=== ist das richtig??? und hinter dem alt="Performance_Muenster_2016" "width=$werte[0], height=$werte[1]" hinzufügen.... <=== ist das richtig???

[einsiedler]

c) Neben dem: alt="" ist es auch wichtig die Grössenangaben für die Bilder anzugeben? Wenn ja, dann müsste ich die Grössenangaben bei jedem Bild auslesen (jedes Bild ist leider unterschiedlich, ebenso horizontal als auch vertikal dargestellt): Ich habe ja: $values['file']['filename']; also: $size = GetImageSize ($values['file']['filename']); <=== ist das richtig??? und hinter dem alt="Performance_Muenster_2016" "width=$werte[0], height=$werte[1]" hinzufügen.... <=== ist das richtig???

also: <img src="<?php echo $values['file']['filename']; ?>" alt="performance_muenster_2016" width="<?php echo $werte[0]?>" height="<?php echo $werte[1]?>"/>

[einsiedler]

KORREKTUR:

$image_size = getimagesize($values['file']['filename']);

$image_width = $image_size[0];
$image_height = $image_size[1];

<img src="<?php echo $values['file']['filename']; ?>" alt="performance_muenster_2016" width="<?php echo $image_width?>" height="<?php echo $image_height?>"/>

[Gunnar Bittersmann]

@@einsiedler

a) Der alternativ-Text (für das Video in dem oben beschriebenen Fall!) kann ja aus einem download-Link bestehen, oder?

Ja.

b) Wenn das "meta-Element" in den head-Bereich gehört, wie bezieht er sich dann auf die == else == Alternative? Das verstehe ich nicht ganz!

Du müsstest die Prüfung, ob die Datei vorhanden ist, früher machen – bevor du mit der HTML-Ausgabe anfängst. Dann kannst du das meta-Element auch in den head setzen.

Eine automatische Weiterleitung nach x Sekunden ist aber immer bedenklich. Manch Nutzer hat nicht genügend Zeit, um den Text zu erfassen. Warum leitest du nicht sofort weiter und informierst den Nutzer auf der neuen Seite über das Nichtvorhandensein der Datei?

c) Neben dem: alt="" ist es auch wichtig die Grössenangaben für die Bilder anzugeben?

Die Größenangaben würden dem Browser beim Rendern der Seite helfen: Er würde den entsprechenden Platz für das Bild freihalten, so dass sich die Seiteninhalte nicht nochmals verschieben, wenn das Bild geladen ist. Inwiefern das relevant ist, musst du testen. Das serverseitige Auslesen der Bildgröße braucht ja auch seine Zeit.

LLAP 🖖