HTML 5 Video

Hallo,

ich besitze von Siquando die Version WEB 9 und benutze dort das responsive Design Riga. Damit bin ich bisher auch sehr gut zurecht gekommen. Jetzt wollte ich auf meiner Webseite einen kurzen Videoclip mit einbauen und hier stoße ich an meine Grenzen.

Das  HTML 5 Video konfigurieren ist überhaupt kein Problem gewesen und auf herkömmlichen normalen PCs läuft es nach Veröffentlichung auch. Aber ich habe ja extra ein responisves Design gewählt, damit es auch auf den Smartphones läuft und das tut es nicht.

Jetzt steht beim Plugin selbst dabei, das man auf den Website Eigenschaften unter erweitert die Option Experimentelle HTML5 Features (IE9) aktivieren soll. Diese Möglichkeit gibt es aber bei den Website Eigenschaften nicht. Also hab ich im Handbuch nachgelesen, dass es bei wenigen älteren Siquando-Designs diese Option nicht zur Verfügung steht.

Aber erstens ist das Design Riga keine ältere Version und es wird auch extra im Design auf die Kompatiblität des HTML5 hingewiesen also mache ich wohl noch irgendetwas anderes falsch.

Kennt sich vielleicht irgendwer mit diesem Plugin aus und kann mir auf die Sprünge helfen. Ich bin wirklich hoffnungslos überfragt. 

Das Plugin gibt es sowohl in den alten, wie auch in den neuen responsiven Designs. Die "alten" Designs müssen dazu aber eben die experimentellen HTML5 Features (IE9) einschalten. In den neuen responsiven Designs steht Dir diese erweiterte Eigenschaft deshalb nicht zur Verfügung, da es dort nicht mehr nötig ist.

Welche(s) Videoformat(e) hast Du denn geladen? Hast Du einen Link zur fehlerhaften Seite?

Hallo Walti,

Ja klar, hier ist der Link 

1

http://www.schreibersontour.de/reiseberichte/newzona---usa-suedwesten-2017/01102017---rattlesnake-and-desert-dust.html

 Als Videoformat hatte ich eine Mp4 Datei genommen, die sogar mit dem gleichen Handy erstellt wurde auf dem es jetzt nicht läuft.

Hallo Tina

Ja, das mag Dir jetzt merkwürdig vorkommen, aber das ist durchaus möglich.

Wenn Du das Video aufnimmst, oder Dir dann auch auf dem Handy anschaust, dann ist die handy-eigene Software für die Wiedergabe verantwortlich.

Wenn Du das Video hingegen auf einer Website anschaust, dann ist der Browser für die Wiedergabe verantwortlich.

Auf Deiner Website hast Du das Video nur im Format mp4 mit h.264-Codec zur Verfügung gestellt. Es war zwar nicht immer so, aber nun können die aktuellen Versionen aller gängigen Browser mit diesem Format umgehen, so dass es eigentlich genügen sollte, lediglich ein Video in diesem Format einzubinden.

Diese Tabelle http://caniuse.com/#feat=mpeg4  zeigt gut, ab welcher Version welche Browser dieses Format unterstützen. Wenn Du hier alledings auf "Showing all" klickst, dann kommen auch noch die Mobile-Browser hinzu und da ist auffällig, dass bei einigen Browsern wirklich nur die jeweils letzten Versionen dieses Format unterstützen.

Sollten also Handys im Umlauf sein, die keine Updates gemacht haben und noch mit älteren Versionen unterwegs sind, dann könnte dies z.B. eine Erklärung sein, warum das Video in diesem Format (wie z.B. bei Dir) nicht läuft.

Und da Du auch nicht weisst und beeinflussen kannst, mit welchen Browsern und Software-Versionen Deine Besucher unterwegs sind, ist es nach wie vor empfehlenswert Ausweichformate zur Verfügung zu stellen:

 

Hier gibt's noch einige gute Erklärungen zum nicht ganz einfachen Thema "Video":

https://www.mediaevent.de/xhtml/video-audio.html

https://www.mediaevent.de/tutorial/html-video.html

Und zum Schluss noch einige Bemerkungen zu Deinem Video:

Du solltest unbedingt die Steuerelemente im Video anzeigen und auf einen Autostart verzichten! Bei Smartphone-Usern machst Du Dir keine Freunde, wenn Dein Video ungefragt abspielt und ihre Nutzungsrate auffrisst... 

Dies umsomehr, da Dein 14-Sekunden-Spot mit 48 MB "ziemlich gross" ist, was Deiner stolzen full-HD-Auflösung von 1920x1080 geschuldet ist.

Oben, im letzten Link findest Du unter "Auflösung des Videos" entsprechende Hinweise, wie man Videos in den responsiven Designs für verschiedene Ausgabegeräte zur Verfügung stellen kann.

Dies ist jedoch im Siquando-Plugin nicht möglich, dazu müsstest Du das Video über einen HTML-Absatz selbst einbinden.

Aber auf das Siquando-Plugin würde ich persönlich sowieso verzichten, da es einen Flic hat... Im Plugin sind nämlich nur Bildschirmformate 4:3 und 16:9 vorgesehen, und deshalb ist Dein Hochformat-Video z.B. im IE  wohl vor Angst vor der Schlange "umgekippt"...  

Vielen Dank für Deine sehr ausführliche Antwort. Kannst du mir vielleicht für "Dumme" erklären was ich machen kann? Ich hab echt null Ahnung von sowas.

Wenn Du (obwohl der Film "umgekippt" ist) mit dem Plugin arbeiten willst, dann denke ich, dass Du Dein Video noch in "Ausweichformaten" zur Verfügung stellen solltest und zwar dort, wo ich es Dir im Siquando-Printscreen gezeigt habe. Dann solltest Du aber den Haken bei "Automatisch starten" raus nehmen und dafür den Haken bei "Abspielkontrolle anzeigen" setzen.

In meinem letzten Link im Beitrag #4 findest Du unter "Browserunterstützung für Videoformate" Links zu Konvertern, womit Du die "Ausweichformate" erzeugen kannst. Tante Google kennt noch hunderte anderer Koverter... 

Falls Du nicht mit dem Plugin arbeiten möchtest, so findest Du für Deinen HTML-Absatz Code und erste Schritte hier: https://www.w3schools.com/html/html5_video.asp

Und im letzten Link von Beitrag #4 findest Du unter "Auflösung des Videos" entsprechende Hinweise, wie man Videos in den responsiven Designs für verschiedene Ausgabegeräte zur Verfügung stellen kann.

Sorry, ich weiss jetzt nicht genau, was Du unter "for Dummies" erwartest...? 

@Tina40:

Schaue Dir auch mal DIESES und DIESES Thema an. U.U. handelt es sich bei Deinem Video nicht um ein MP4-Video im benötigten H.264 Format.

@Volker:

...doch, doch...  ist (wie in meinem Beitrag #4 geschrieben) im h.264-Codec...

 

O.K.! Na denn...

...aber das Lesen der anderen Beiträge lohnt sich zum Einarbeiten in das Thema Video auf alle Fälle...

Hallo Tina,

mein Tipp wäre. Erstelle dir einen Youtube Account, lade deine Videos dort hoch und verknüpfe dann deine Videos per HTML Code auf deiner Seite. Dann hast du Ruhe und musst dich um nichts weiteres kümmern. 

Siehe unsere Vereinsseite

Erst mal vielen lieben Dank für Eure zahlreichen Tipps. Ich habe jetzt den Autostart rausgenommen, bei mir auf dem Handy läuft es jetzt wenn auch ruckelig weil das laden dauert ich vermute, das ist der Auflösung geschuldet ich werde daher morgen das ganze nochmal in einer niedrigeren Auflösung laden, vielleicht ist das ja der Fehler.

Warum willst du die Videoqualität kaputt machen?

Weil es bei dem Full HDauf Handy ewig dauert bis es geladen ist und dadurch hängt es. 

Wie schon geschrieben. Ich habe viele Stunden damit verbracht die Videos in ordentlicher Qualität auf der Webseite einzubinden. Und am Ende bin ich den Weg über Youtube gegangen. Und es funktioniert seitdem tadellos. Und macht weniger Arbeit.

Hallo Klaus,

wie würdest Du ein 6 min. Video, knapp 800 MB in FullHD auf Youtube hochladen.
Ich habe da null Ahnung, wollte aber auch nicht ein neues Thema erstellen.

Gruß Franz

Du kannst es direkt hochladen. Das braucht dann zwar seine Zeit, dementsprechend deiner Internetgeschwindigkeit. Ich mache es fast nur noch so und mache in der Zeit was anderes, oder lasse den Rechner über Nacht einfach laufen.

Kann ich denn das Video auf YouTube  auf privat stellen und trotzdem in der Homepage hochladen? Denn sonst könnte man ja alle Clips in meinem Kanal sehen und das würde ich nicht so gut finden.

Du kannst nur dieses eine Video am gewünschten Ort einbinden, entweder mit dem von Youtube zur Verfügung gestellten Code oder mit dem Plugin-Absatz "YouTube"

Man muß nicht über YouTube gehen, um Videos in ordentlicher Qualität auf der Website einzubinden. Das geht auch via MP4 im <video>-Tag.

Beispielcode:

<div style="text-align: center;">
	<video style="width: 99%; max-width: 1920px; height: auto;" controls="controls" loop="loop" muted="muted" preload="none">
		<source src="https://video.warmers.de/wildhrs4.mp4" type="video/mp4">
	</video>
</div>

Dies führt zu folgendem Ergebnis:

Ich habe Youtube deswegen empfohlen, da sie dort keine Codec oder ähnliches beachten muss. 

<div style="text-align: center;">
	<video style="width: 99%; max-width: 1920px; height: auto;" controls="controls" loop="loop" muted="muted" preload="none">
		<source src="https://video.warmers.de/wildhrs4.mp4" type="video/mp4">
	</video>
</div>

Ist der Code denn bis auf https immer der gleiche? Dann könnte ich es ja mit HTML-Einbindung mal versuchen?

Das kommt ganz darauf an, was Du wie darstellen willst...

Den "Grundcode" hatte ich Dir ja bereits in Beitrag #6 gelinkt.

Die vollständigen Einstellungsmöglichkeiten findest Du hier unter den Attributes: https://www.w3schools.com/tags/tag_video.asp