Setup - Video-JS

(Übersetzung nach dem englischen Original auf GitHub: https://github.com/videojs/video.js/blob/v4.3.0/docs/guides/setup.md )

Orginaler Download: http://www.videojs.com/

Video.js kann in zwei einfachen Schritten installiert werden. Dazu müssen die externen Dateien im Head-Element verlinkt und das HTML5-Video-Element in die Seite eingefügt werden.

Schritt 1: Video.js Javascript- und CSS-Dateien einbinden.

Die externen Dateien werden im <Head>-Bereich eingebunden. Die Javascript-Bibliothek übernimmt die korrekte HTML-Ausgabe, die CSS-Datei beinhaltet die Stile für die Darstellung von Video, Vorschaubild und Abspielkonsole.

Variante 1: CDN Version (Content Delivery Network)

Die Javascript- und CSS-Dateien werden auf dem Server (zencdn.net) zur Einbindung über einen Hyperlink angeboten.
(Die Pfadangabe kann übernommen werden.)

<link href="//vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.2/video.js"></script>

Variante 2: Self Hosted (Die Dateien auf dem eigenen Server verlinken).

Werden die nötigen Dateien und Bibliotheken selber bereitgestellt, müssen sie entsprechend verlinkt werden:

Die SWF-Datei muss verknüpft werden, sofern die älteren Browserversionen unterstützt werden sollen.

<link href="server/pfad/video-js.css" rel="stylesheet">
<script src="server/pfad/video.js"></script>
<script>videojs.options.flash.swf = "server/pfad/video-js.swf"</script>  

Schritt 2: Die HTML5 Video-Elemente in die Seite einfügen.

Die eingebundene Bibliothek Video.js bietet verschiedene optionale Möglichkeiten und einen einfachen Umgang mit dem HTML5 Videoelement.

Warum eine Bibliothek verwenden, wenn es ein HTML-Video-Element gibt?

<video id="video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="videos/oceans-clip.png"
data-setup="{}">
<source src="videos/oceans-clip.mp4" type='video/mp4' />
<source src="videos/oceans-clip.webm" type='video/webm' />
<source src="videos/oceans-clip.ogv" type='video/ogg' />
</video>