\documentclass[a4paper, 11pt]{article}
\renewcommand{\familydefault}{\sfdefault}
\usepackage{a4wide}
\usepackage[utf8]{inputenc}
\usepackage[ngerman]{babel}
\usepackage{color}
\usepackage{graphicx}
\usepackage{setspace}
\usepackage{ulem}
\usepackage{listings}
\usepackage{float}
\usepackage[rflt]{floatflt}
\usepackage{tabularx}
\setlength{\parindent}{0pt}
\title{Lazy Loading Videos und der Viewport - Vanilla JS}
\usepackage[
pdftitle={Lazy Loading Videos und der Viewport - Vanilla JS}
pdfsubject={JavaScript basiertes Video Lazy Loading inklusive Autoplay, Poster und Sourcen}
pdfauthor={Udo Schmal}
pdfkeywords={JavaScript, HTML5, tags, video, lazy loading}
]{hyperref}
\definecolor{darkblue}{rgb}{0,0,.5}
\hypersetup{pdftex=true, colorlinks=true, breaklinks=true, linkcolor=darkblue, menucolor=darkblue, pagecolor=darkblue, urlcolor=darkblue}
\begin{document}Lazy Loading Videos und der Viewport - Vanilla JS
\singlespacing
{\LARGE \textbf{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 genau so wie es früher auch für Bilder notwendig war, oder vielmehr wie es für ätere Browser noch als Fallback eingesetzt wird.

\singlespacing
{\small \textbf{HTML:}}

\href{https://www.gocher.me/code/video_lazy.htm}{video\_lazy.htm}

\singlespacing
{\small \textbf{JavaScript:}}

\href{https://www.gocher.me/code/video_lazy.js}{video\_lazy.js}

\singlespacing
{\Large \textbf{Video.js - HTML5 Video Player}}

Hier nun eine simple Implementierung des HTML5 Video-Tags mit Flash Fallback. Mehr Infos unter \href{https://videojs.com/}{https://videojs.com/}.
\label{sec:example_video_1}
To view this video please enable JavaScript, and consider upgrading to a web browser that \href{https://videojs.com/html5-video-support/}{supports HTML5 video}

Damit das Video auch auf dem iPad läuft müss auf die richtigen Einstellungen beim Encoden geachtet werden:

\begin{itemize}
\item H.264 Baseline Profile Level 3.0
\item Auflösung unter 640 x 480 und Frameraten bis 30 Frames/Sec
\item keine B Frames
\item Bitraten bis 900kb
\end{itemize}

\href{https://www.gocher.me/code/video.htm}{video.htm}
\end{document}