Lazy Loading Videos und der Viewport - Vanilla JS

Lazy loading von Videos wird leider noch nicht nativ von den Browsern unterstützt und so realisiert man es halt genauso wie es früher auch für Bilder notwendig war, oder vielmehr wie es für ältere Browser noch als Fallback eingesetzt wird.

HTML:

video_lazy.htm

JavaScript:

video_lazy.js

Video.js - HTML5 Video Player

Hier nun eine simple Implementierung des HTML5 Video-Tags mit Flash Fallback. Mehr Informationen unter https://videojs.com/.

Damit das Video auch auf dem iPad läuft, müssen die richtigen Kodierungseinstellungen verwendet werden:

• H.264 Baseline Profile Level 3.0
• Auflösung unter 640 x 480 und Frameraten bis 30 Frames/Sec
• keine B Frames
• Bitraten bis 900kb

video.htm