HTML HTML5-Video Browservollbild und ruckelfrei?

DjMG · 15. Januar 2013

Hallo Community,

habe ein Problem bei einer Introseite, wo ein HTML5 Video abgespielt wird.
Im Chrome und Firefox funktioniert alles tadellos, nur im Internet Explorer 9 ruckelt das Video stark und ist überdies auch nicht als (Browserfenster-)Vollbild zu sehen.

Code:

<body style="height:100%; display:block;">
    <div id="videoframe">
        <video style="height:100%;" autoplay>
        <source src="http://www.wartecker-pv.com/wp-content/themes/dt-unicorn/images/2013_01_12.mp4" type="video/mp4"></source>
        <source src="http://www.wartecker-pv.com/wp-content/themes/dt-unicorn/images/2013_01_12.ogg" type="video/ogg"></source>
            Bitte verwenden Sie einen anderen Browser.
        </video>
    </div>
</body>

Der Link zum Selbertesten: http://www.wartecker-pv.com/video-intro/
Was ist da los? Habt ihr einen Tipp?

LG DjMG

kling1 · 15. Januar 2013

ie halt

novle · 15. Januar 2013

gewitter und energie aus sonnenlicht? irgenwas passt da nicht

wertzuiop123 · 15. Januar 2013

Nimm noch „autobuffer“: aktiviert die Zwischenspeicherung, damit das Video möglichst ruckelfrei wiedergegeben wird.
<video src="video...." width="XXX" height="XXX" autobuffer autoplay>
Ansonsten: IE halt

Was macht Ie 8, 10?

Lavaground · 15. Januar 2013

ie10 ruckelt nix... aber fullscreen is nich. versuch doch mal mit: das video in 1080p 16:9 (es geht eher ums 16:9 format als um die auflösung) dann kannste height und width auf 100% stellen dazu noch im head <meta name="viewport" content="width=device-width,initial-scale=1">

alternativ lass es so mach width statt heigth 100% und overflow-y: hidden; desweiteren muss du dann den HP button anpassen, z.b. position:absolut;(position haste ja schon) und bottom: 50px; oder so

DjMG · 15. Januar 2013

Lavaground schrieb:
alternativ lass es so mach width statt heigth 100% und overflow-y: hidden; desweiteren muss du dann den HP button anpassen, z.b. position:absolut;(position haste ja schon) und bottom: 50px; oder so

Das bringt keinen Erfolg, außer dass es im Chrome nun auch nicht mehr Vollbild war ;-)

...autobuffer

Danke! Das half schonmal einiges bzgl. Ruckeln!

Lavaground · 15. Januar 2013

zur zeit ist es so oder so kein vollbild.... zumindest auf 1920x1080...

DjMG · 15. Januar 2013

Naja, die Quelldatei hat nicht Vollbild-Auflösung, hoffte es wird "zwangsweise" gestreckt - das wäre mir lieber, als das Video größer abzuspeichern (laden soll man das Video auch noch können, ohne 2min warten zu müssen

)

Lavaground · 15. Januar 2013

deswegen width statt height ^^

Daaron · 15. Januar 2013

...und die Auflösung (und Länge) des Videos sollte ebenfalls nciht zu hoch werden. Nicht jeder potentielle Besucher hat 16MBit oder mehr. Ich hab zuhause nur ~1,5 MBit.
Statt die Auflösung unnötig hoch zu drücken sollte man eher eine Gitter-Maske drüber legen und somit die Unschärfe verbergen.

DjMG · 17. Januar 2013

Also ich hab die Videoauflösung nun erstmal so belassen.
Aber leider bekomm ich es im IE nicht hin, dass das Video Vollbild (Browserfenster) abgespielt wird :/

RudeRaccoon · 17. Januar 2013

viel wichtiger als die IE-Optimierung wäre mir, dass man die nervige Hintergrundmusik abschalten kann. Ansonsten sehr schönes Design, gefällt mir

Daaron · 17. Januar 2013

Echten Fullscreen kriegst du eh nicht ohne Tricks (v.a. JavaScript) hin. Das <video> - Element, bzw. das Video darin, behält immer sein Seitenverhältnis. Passt das Verhältnis nicht zum Monitor (was bei Fullscreen eben schnell passiert), dann gibts ne Letterbox.

Deine beste Chance: Über JS ermitteln, wie hoch und breit das Bild ist, berechnen wie stark du zoomen müsstest um die Letterbox bestmöglich zu füllen (und dafür eben z.B. links&rechts Bildinhalt zu verlieren) und dann mit CSS3 Scale Transformation das Video-Element zu zoomen.

DjMG · 17. Januar 2013

Die Hintergrundmusik war Wunsch des Kunden

- Muss (leider) bleiben.

@Daaron:
Ich weiß was du meinst, aber es ist ja schonmal weit weg alleine von Letterbox! Im IE fehlen nach unten ganze 400 Pixel oder so. Wenn seitlich ein Rand wäre, macht das nichts. Aber ich möchte es wenigstens in der Höhe füllen. (oder eben genau andersrum - Hauptsache es is entweder horizontal ganz breit, oder vertikal ganz hoch, egal ob schwarze Streifen irgendwo sind)

Daaron · 17. Januar 2013

wenn der IE mal wieder ne Extrawurst will musst du sie ihm wohl schreiben. Ich befürchte fast, du wirst um etwas JS-Voodoo nicht drumrum kommen.

DjMG · 17. Januar 2013

Schade :/
Hast du da ein paar Links, wo ich stöbern/recherchieren kann?

Daaron · 17. Januar 2013

Nö, aber sollte eigentlich auch recht einfach werden.
Beim DOM-Ready - Event und jedes Mal bei einem window-resize löst du eine Funktion aus, die:
- die Browsergröße ermittelt
- die Höhe oder Breite deines Video-Elements ermittelt
- berechnet, um wie viel du zoomen musst, um den gewünschten Pseudo-Fullscreen zu erzielen
- die passende CSS-Deklaration für "transform: scale(n)" auf das Video-Element anwendet.

Natürlich musst du dann dein Video-Element noch absolut positionieren und auf Overflow achten....

DjMG · 17. Januar 2013

Habs jetzt mit dem Plugin "bigVideo.js" versucht. Im Chrome+Firefox klappt alles wunderbar.
Nur der IE ruckelt mal wieder vor sich hin - ärgerlich!

Suche

HTML HTML5-Video Browservollbild und ruckelfrei?

DjMG

Lieutenant

kling1

Gast

novle

Banned

wertzuiop123

Captain

Lavaground

Lt. Commander

DjMG

Lieutenant

Lavaground

Lt. Commander

DjMG

Lieutenant

Lavaground

Lt. Commander

Daaron

Fleet Admiral

DjMG

Lieutenant

RudeRaccoon

Cadet 3rd Year

Daaron

Fleet Admiral

DjMG

Lieutenant

Daaron

Fleet Admiral

DjMG

Lieutenant

Daaron

Fleet Admiral

DjMG

Lieutenant

Ähnliche Themen