html5 videos für mobile geräte

Mango schrieb am 04.04.2015 um 18:37 Uhr

hallo forum,

ich weiß, es gab schon einige fragen zu html5 videos für mobile geräte... z.b. hatte bero viele gute links und tipps und sogar einen downloadlink für eine kostenlose software zum konvertieren seiner videos in html5-format gegeben ("easy-html5 video"- freeware leider mit logo/wasserzeichen oben rechts).

ich habe nun einen html5-converter gefunden, der das eigene video auch in html5 konvertiert und bietet dazu noch mehrere möglichkeiten einer player-auswahl, alles ohne eingeblendetem logo bei der freeware, siehe>  link

nun meine frage: kennt sich jemand mit dem einbinden in die webseitenvarianten mit dieser möglichkeit aus? das programm erzeugt einen code und mehrere unterordner. kann man diese ordner in die index.datei laden und den erzegten code per platzhalter einfach auf die seite einfügen oder braucht es dazu einen anderen code? ich bin da etwas unsicher...

weiß jemand mehr dazu?

vorab danke fürs mitüberlegen

 

Kommentare

BeRo schrieb am 05.04.2015 um 21:19 Uhr

[...] kennt sich jemand mit dem einbinden in die webseitenvarianten mit dieser möglichkeit aus? [...]

Mit dem "Free HTML5 VideoPlayer" habe ich noch keine Erfahrungen sammeln können. Vor dem Download- und der Installation sollte man sich aber die u. a. Warnung durchlesen...

-----------------------
Vorsicht:
Der Software-Installer bringt Adware mit, die sich teilweise nicht abwählen lässt. Daneben versucht der Converter weitere unnötige Software mitzuinstallieren und Änderungen am Browser vorzunehmen. Wir empfehlen Ihnen, jeden Installationsschritt genauestens zu hinterfragen und die geladene Adware noch vor dem ersten Start wieder zu deinstallieren.

----------------------

Wenn man das beherzigt, scheint der Player/Konverter aber nahezu universell zu sein.

[...] das programm erzeugt einen code und mehrere unterordner. kann man diese ordner in die index.datei laden [...]

Gegenfrage:
Warum möchtest Du den Code Overhead benutzen?

Der Player/Konverter erzeugt zunächst die 2-3 Dateiformate, die Du für die fehlerfreie Wiedergabe in den meisten (modernen) Browsern benötigst.
Diese Dateien referenzierst Du im Video Tag, das Du in einem beliebigen Platzhalter ablegst. Das sind max. 4 Zeilen Code. Mehr benötigst Du nicht. Damit läuft das Video sowohl auf mobilen Geräten, als auch auf Desktop Geräten (Win/Mac).

Mehr ist für die Wiedergabe von HTML5 Videos nicht erforderlich.

So kann der Code aussehen:

---------------------------
<video width="640" height="480" poster="preview.png" controls autoplay>
<source src="video/demo.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="video/demo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
</video>

--------------------------

Wenn Du allerdings vom Standard Player abweichen möchtest, der generell von den modernen Browsern angeboten wird, dann brauchst Du Zusatzcode, mit dem ein frei definierbarer, neuer Player erzeugt- und eingebunden wird.

Die dafür nötigen Aktionen können mehr oder weniger aufwändig sein. Das müssten wir dann im Einzelfall analysieren...

Entscheide zunächst mal, ob Du das wirklich möchtest.

Zuletzt geändert von BeRo am 05.04.2015, 21:19, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Mango schrieb am 06.04.2015 um 08:31 Uhr

hi bero, lieben dank für deine antwort. ja das stimmt, ich habe die warnung auch gelesen und trotzdem installiert. die ungewünschte adware habe ich deinstalliert, natürlich bekam man auch eine andere startseite aufgebrummt... aber ich hoffe alles erwischt zu haben.

wieso sollte ich den player "overhead" benutzen? keine ahnung was das sein soll? die software liefert verschiedene player, da habe ich mir einen von ausgesucht...

ich weiß nur einfach nicht, wie ich die nun erzeugte dateien/ordner wohin schieben soll und den erzeugten code... und was mache ich zusätzlich mit deinem code-vorschlag?

im hinweis der software steht nach dem konvertieren nur, dass man den erzeugten ordner auf seinen server hochladen soll (aber wo genau hin???) und den code in seine seite einfügen. dies machte ich über einen platzhalter, es funktioniert aber nicht, ich mache etwas falsch, es ist bestimmt total schlicht, aber ich weiß nicht was es ist?

BeRo schrieb am 06.04.2015 um 12:59 Uhr

[...] wieso sollte ich den player "overhead" benutzen? keine ahnung was das sein soll? die software liefert verschiedene player [...]

Genau das (die verschiedenen Player) ist der Overhead

Um in einem HTML5 fähigen Browser ein Video abzuspielen, benötigst Du keinen zusätzlichen Player. Alle HTML5 fähigen Browser haben einen geeigneten Player an Bord, der automatisch gestartet wird, wenn Du mit den u. a. 4 Zeilen Code ein Video eingebunden hast...

---------------------------
<video width="640" height="480" poster="preview.png" controls autoplay>
<source src="video/demo.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="video/demo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
</video>

--------------------------

Die einzigen Änderungen, die Du vornehmen musst, betreffen die Größe des dargestellten Players (oben grün markiert), die Anweisung dass das Video automatisch abgespielt wird und/oder den Namen des Bilds, das als Vorschau angezeigt wird (oben orange markiert), das evtl vorhandene Unterverzeichnis, in dem Du das Video abgelegt hast (oben blau markiert) und den Namen des Videos (oben gelb  markiert).

That's all!

Wenn Du nun unbedingt einen zusätzlichen, externen Player einbinden willst, weil Du den optisch aufbrezeln kannst, dann (und nur dann), benötigst Du den zusätzlichen Code den der "Free HTML5 VideoPlayer" installiert haben möchte...

[...] im hinweis der software steht, [...] dass man den erzeugten ordner auf seinen server hochladen soll [...]

Im erzeugten Video Tag ist das Video referenziert und genau dahin gehört der Ordner. Steht in der Pfadangabe also z. B. <source src="video/demo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/> dann gehört der Ordner "video" in das root Verzeichnis des Servers, also dahin, wo auch die Startdatei "index.htm" Deiner Site liegt.

[...] ich mache etwas falsch, es ist bestimmt total schlicht [...]

Vermutlich ist die falsche Position des Video Ordners der einzige Fehler. In dem Fall kann der komplette Code zum Aufruf des Players nicht funktionieren, weil der Verweis auf den Player ins Leere geht.

Du hast ja noch einen langen Rest des letzten Feiertags vor Dir. Versuch's einfach nochmal...

Viel Erfolg

Zuletzt geändert von BeRo am 06.04.2015, 13:05, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Mango schrieb am 06.04.2015 um 19:47 Uhr

lieber bero, ganz lieben dank für deine erneute umfangreiche antwort. 

achso, das ist also "overhead", grundgütiger... die farbe und form vom video ist mir wirklich egal, hauptsache es spielt ab...ich werde mich gleich morgen dran setzen und alles ausprobieren und wenn es funktioniert hat nochmal ein kleines feedback geben.

dankifein!

Mango schrieb am 07.04.2015 um 09:25 Uhr

ich bekomme es nicht hin. so bin ich vorgegangen:

den erzeugten ordner "video" mit der startbilddatei und den beiden videodateien> video.ogv und video.mp4 habe ich per filezilla in das verzeichnis meiner webseite geladen, wo auch meine startdatei index.htm liegt, das ist bei mir der ordner >index_htm_files. da liegt nun dieser erzeugte ordner "video". bezeichnungen und playerabmessungen habe ich dementsprechend in dem code von bero angepaßt. im wd erzeugte ich einen platzhalter und fügte nun diesen code in den body-html ein (mit den neuen namen+abmessungen des players). in der vorschau des wd sehe ich nur ein schwarzes feld...?
da ich meine seite aber noch nicht hochgeladen habe, dachte ich mir, ich lade für meine vorschau im wd den erzeugten ordner "video" in meinem rechner in diesen pfad meiner webseite, also auch in den index_htm_files-ordner, wo auch die startdatei index_htm liegt...aber auch da, nur ein schwarzes feld. 

was mache ich nur falsch?

 

BeRo schrieb am 07.04.2015 um 12:34 Uhr

[...] wo auch meine startdatei index.htm liegt, das ist bei mir der ordner >index_htm_files. da liegt nun dieser erzeugte ordner "video" [...]

Der Ordner "index_htm_files" wird vom WD als Datenverzeichnis für jede Website angelegt. Die HTML Dateien (auch die Startseite) liegen normalerweise auf derselben Ebene. Nicht im Ordner "index_htm_files".

Wenn Du den Ordner "video" in das Verzeichnis "index_htm_files" gelegt hast, ist das nicht falsch. Du musst aber dann den Verweis im Video Tag anpassen.
So (unten gelb markiert) kann dann der ergänzte Eintrag für das mp4 Video aussehen, wenn es funktionieren soll.

------------------------------
[...]
<source src="./index_htm_files/video/demo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
[...]
----------------------------

Aber wie oben schon angedeutet, scheint die Verzeichnisstruktur Deiner Site ein bisschen durcheinander geraten zu sein. Die Links/Verweise der einzelnen Seiten dürften zumindest unübersichtlich sein, wenn sie denn überhaupt funktionieren...

Da könnte ein  "Frühjahrsputz" nicht schaden

Viel Erfolg

Zuletzt geändert von BeRo am 07.04.2015, 12:34, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Mango schrieb am 07.04.2015 um 13:02 Uhr

nee nee, da ist nix durcheinander bei meinen ordnern, aber ich bin durcheinander....

jetzt tut sich was. habe den video-ordner in den pfad getan, wo auch der index-files und die web-files ordner ist. jetzt sah ich auch die index-startseite dort...

nun jedenfalls erzeugt die wd-vorschau nicht immer ein video im ie, gehe ich in der vorschau auf firefox, tut sich aber etwas.

ich bastel mal weiter, denn ich sehe noch kein bild der angelegten startframe. auch wenn ich in der vorschau auf das symbol klicke des vollbildmodus, fängt das video erneut an und läuft doppelt. ich habe auch das gefühl, als ob man die laustärke nicht bedienen kann. ich gucke aber nur in meinem browser (verkleinert für die smartphone-variante) denn die seite ist noch nicht wieder hochgeladen, bin ja noch am werkeln...

welchen befehl muß man denn geben, damit es nicht automatisch beginnt und auch  nur einmal läuft?

vielen dank nochmals für deine super hilfe, wir kommen der sache näher...

Mango schrieb am 07.04.2015 um 14:24 Uhr

startframe sehe ich nun auch, ich hatte einfach eine ".jpg"-endung zu viel.

das video beginnt ja automatisch, da sehe ich das start-bild nur kurz, das video endet allerding im schwarzen feld, vielleicht liegt es schlicht am "autoplay" im videocode? wie kann man das ändern, das video soll einfach bei klick auf "play" beginngen und am ende im startbild enden? mit dem magix- wd-player ist dies ja einfach, da dieser transparent ist und die startframe darunter liegt. aber hier nun ist dies nicht möglich.

nun stellt sich mir noch eine letzte frage: ich wollte das html5 -video eigentlich nur für die mobile version einbauen, da ich in meiner desktop-variante mit dem mp4-video keine probleme habe (außer bei chrome) und diese übver den magix-player laufen lasse. wenn nun das html-video in 2  verschiedenen videoformaten bereit steht, wie erkennt der browser "sein" videoformat? ich höre ja in meiner wd-vorschau die 2 varianten (mp4 und ogv) gleichzeitig laufen, weil offensichtlich mein browser diese beiden videoformate unterstützt?

 

BeRo schrieb am 07.04.2015 um 14:25 Uhr

[...] jedenfalls erzeugt die wd-vorschau nicht immer ein video im ie [...]

Das liegt eindeutig an der "Sparversion" des IE, die als Vorschau gestartet wird. Selbst die vermeintliche Vollversion, die nach einem Klick auf eins der Icons am oberen Rand der Vorschau gestartet wird, entspricht nicht wirklich der Vollversion. Das gilt nicht nur für den IE, sondern auch für den FF

Die sicherste Methode zum Test einer erstellten Site ist immer noch der Doppelklick auf die Startdatei nach einem Export in ein lokales Verzeichnis oder nach dem Upload auf den Webserver...

[...] ich sehe noch kein bild der angelegten startframe [...]

Diese Option funktioniert nicht in allen Browsern. Die Programmierer haben das Startbild auch nur zur Überbrückung der Ladezeit vorgesehen, bis der Player startet.

Es ist also besser, stattdessen (oder zusätzlich) die bekannte Methode zu wählen, nach der ein Startbild in der Größe des Players unter den Platzhalter gelegt wird.

[...] welchen befehl muß man denn geben, damit es nicht automatisch beginnt [...]

Dazu setzt Du die "autoplay" Option auf "false". Das sieht im Code so aus (unten gelb markiert):

------------------------------
<video width="640" height="480" poster="preview.png" controls autoplay:false>
[...]
----------------------------

[...] welchen befehl muß man denn geben, damit es [...] auch  nur einmal läuft? [...]

Wenn das Video beim Öffnen der Seite startet, also kein eigener "Start" Button bedient werden muss, sollte es nicht mehrfach parallel gestartet werden können.

Passiert das doch, kannst Du auch dagegen etwas tun. Allerdings wird es dann leider etwas aufwändiger...

Lies Dir mal diesen Thread durch, da habe ich zu dem Thema in mehreren Kommentaren recht ausführlich beschrieben, wie ein HTML 5 Video beeinflusst werden kann.

Viel Erfolg

Zuletzt geändert von BeRo am 07.04.2015, 14:25, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Mango schrieb am 07.04.2015 um 15:01 Uhr

hi bero, da hatten wir zeitgleich geschrieben, mein eintrag mit den "news" ist kurz vor deinem gelandet.

erneuter dank an dich für die vielen tipps! das startbild stört mich noch bissel am ende, da nutzt keine selbstgebastelte startframe unter dem platzhalter, der player ist nicht transparent wie der von magix. hier endet es im schwarzen feld. gibt es nicht noch ein html-"endbefehl" dafür?

ich lese mich mal durch deine ganzen links, vielleicht taucht noch etwas an die oberfläche...

also, 1000 dankeschöns!

BeRo schrieb am 07.04.2015 um 17:23 Uhr

[...] hier endet es im schwarzen feld. gibt es nicht noch ein html-"endbefehl" dafür? [...]

Ja, den gibt es.

Es handelt sich dabei um das "onended" Ereignis, das z. B. benutzt werden kann, um eine JavaScript Funktion zu starten, die ihrerseits z. B. eine popup Ebene einblenden kann, die anstelle des schwarzen Fensters des Players das Schlussbild zeigt.
Das hört sich vielleicht kompliziert an, es ist aber recht schnell umzusetzen.

So (unten gelb markiert) kann die dazu gehörende Ergänzung im Video Tag aussehen:

------------------------------
<video width="640" height="480" poster="preview.png" controls autoplay:false onended="xr_ppc('xr_xp4')">
[...]
----------------------------

Mit der o. a. Ergänzung wird bei Ende des Videos eine JS Funktion gestartet.

  • Die Funktion "xr_ppc('xr_xp4')" blendet die popup Ebene (Index 4) aus, die den Player trägt

Den Indexwert der popup Ebene musst Du natürlich an Deine Projektdatei anpassen.

Wenn Du Dein Video nach der hier beschriebenen Methode über eine popup Ebene einblendest, kannst Du ohne Tricks ein Startbild in der MouseOff Ebene an der Position ablegen, an der der Player nach dem Einblenden zu sehen sein wird.
Dieses Startbild wird auch nach Ende des Videos zu sehen sein (Demo), es sei denn, Du blendest über das "onended" Ereignis eine locked Ebene mit einem speziellen Schlussbild ein...

Du siehst, wenn Du willst, kann es auch kompliziert werden

Viel Erfolg

 

Zuletzt geändert von BeRo am 07.04.2015, 17:51, insgesamt 3-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Mango schrieb am 07.04.2015 um 17:50 Uhr

meine güte, das artet in arbeit aus... hab dank für deine tipps! ich werde diese mal sacken lassen und mich daran versuchen. der nachteil wird wahrscheinlich aber wie bei einem onloadcode einer pop-up-ebene sein, denn wenn man im laufe der zeit weitere pop-up-ebenen in seine webseite einfügt, ändert sich diese cpu-nummer, die man dann wieder im code aktualisieren muß, oder ist dies hier nicht notwendig?

BeRo schrieb am 07.04.2015 um 18:06 Uhr

[...] wenn man im laufe der zeit weitere pop-up-ebenen in seine webseite einfügt, ändert sich diese cpu-nummer, die man dann wieder im code aktualisieren muß, [...]

Jein

Einmal angelegte popup Ebenen behalten ihren Indexwert auf Dauer, egal, wie viele neue Ebenen Du zusätzlich anlegst. Es sei denn, Du verschiebst die Ebenen von einer Hierarchieebene auf eine andere.

Da der Indexwert der popup Ebenen von unten nach oben gezählt wird, hat (in einer einfachen Seite) die popup Ebene, die über der MouseOver Ebene liegt den Indexwert 4. Die nächste, darüber liegende Ebene bekommt den Indexwert 5 usw.
Verschiebst Du nun die Ebene mit dem Indexwert 5 nach unten, direkt über die MouseOver Ebene, bekommt sie den Indexwert 4. Dann musst du alle JavaScript Funktionsaufrufe anpassen. Aber eben nur dann, wenn Du in die Ebenen Hierarchie eingreifst...

Zuletzt geändert von BeRo am 07.04.2015, 18:06, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Mango schrieb am 08.04.2015 um 07:52 Uhr

ok, da muß ich mal darauf achten mit der hierarchie der ebenen. vielen dank bero!