MP4 Skin VideoPlayer - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Direkt zum Seiteninhalt

MP4 Skin VideoPlayer

Scripte > Multimedia

HTML5 Videoplayer mit Skinauswahl und LiveStream

Dieser Videoplayer ist ein speziell für HTML5 entwickelter Webvideoplayer und unterstützt neben Vimeo und YouTube auch HTML5- und Flash-Videos sowie die LiveStream Wiedergabe. Eine Wiedergabe auf dem Desktop und auf Mobilgeräten wird ebenfalls unterstützt. Es sind neben der Standardausführung noch 4 weiter Skins hinterlegt. Dazu muss im Head-Bereich der entspechende CSS-Verweis zusätzlich eingetragen und im HTML-Code die Classifizierung ergänzt werden, z. B.: class="video-js vjs-theme-fantasy". Werden eigene Videodateien abgespielt (also kein LiveStream), die entsprechenden Videiodateien nebst zugehöriger Image-Datei in das Verzeichnis "files" hinterlegen.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>...</head>  und HTML-Code in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.
Beigefügt sind neben den Codes als Textdateien als Zugabe die entsprechenden Video-Konverter.
Über eine kleine Spende für unseren Aufwand würden wir uns sehr freuen.
Download Button
Downloads:
Die wichtigsten Konfigurations-Parameter:
class
Skin Festlegung

controls
Steuerung (Player-Skin)

preload
Video vorladen

poster
Startbild zufügen (poster="poster.jpg")

Standard Player

HTML5 Skin
width:auto

Standard Player

Fantasy Skin
width:auto

LiveStream Player

Sea Skin
width:300px

LiveStream Player

Forest Skin
width:400px

LiveStream Player

Fantasy Skin
width:500px

LiveStream Player

City Skin
width:600px
Code für den <HEAD> Bereich
<script src="wsX5Obj/Obj114_0/video.js"></script>
<link rel="stylesheet" href="wsX5Obj/Obj114_0/video-js.css" />
<!-- Bei den folgenden 4 CSS-Verweisen wird nur der CSS-Verweis benötigt, der auch zur Anwendung kommt. -->
<link rel="stylesheet" href="wsX5Obj/Obj114_0/skins/sea/index.css" />
<link rel="stylesheet" href="wsX5Obj/Obj114_0/skins/forest/index.css" />
<link rel="stylesheet" href="wsX5Obj/Obj114_0/skins/fantasy/index.css" />
<link rel="stylesheet" href="wsX5Obj/Obj114_0/skins/city/index.css" />
Code für den <BODY> Bereich (Standard Player HTML5 Skin)
<div align="left">
<video
id="Obj114_1"
class="video-js"
controls
preload="auto"
poster="wsX5Obj/Obj114_0/files/pixar_jungle.jpg"
data-setup='{}'>
<source src="wsX5Obj/Obj114_0/files/pixar_jungle.mp4" type="video/mp4"></source>
<source src="wsX5Obj/Obj114_0/files/pixar_jungle.webm" type="video/webm"></source>
<source src="wsX5Obj/Obj114_0/files/pixar_jungle.ogv" type="video/ogg"></source>
<p class="vjs-no-js">
Um dieses Video ansehen zu können, installieren und/oder aktivieren Sie bitte JavaScript<br>
<a href="https://java.com/de/download/manual.jsp" target="_blank"></a>
</p>
</video>
</div>
Code für den <BODY> Bereich (Standard Player Fantasy Skin)
<div align="left">
<video
id="Obj114_2"
class="video-js vjs-theme-fantasy"
controls
preload="auto"
poster="wsX5Obj/Obj114_0/files/big_buck_bunny.jpg"
data-setup='{}'>
<source src="wsX5Obj/Obj114_0/files/big_buck_bunny.mp4" type="video/mp4"></source>
<source src="wsX5Obj/Obj114_0/files/big_buck_bunny.webm" type="video/webm"></source>
<source src="wsX5Obj/Obj114_0/files/big_buck_bunny.ogv" type="video/ogg"></source>
<p class="vjs-no-js">
Um dieses Video ansehen zu können, installieren und/oder aktivieren Sie bitte JavaScript<br>
<a href="https://java.com/de/download/manual.jsp" target="_blank"></a>
</p>
</video>
</div>
Code für den <BODY> Bereich (LiveStream Player mit Skins)
<div align="left" style="width:300px;">
<h2>Sea</h2>
<video
id="Obj114_3"
class="video-js vjs-theme-sea"
controls
preload="auto"
poster="wsX5Obj/Obj114_0/skins/thumbnail.jpg"
data-setup='{ "fluid": true }'>
<source
src="https://stream.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3.m3u8"
type="application/x-mpegurl"
/>
</video>
</div>
<br><br>
<div align="left" style="width:400px;">
<h2>Forest</h2>
<video
id="Obj114_4"
class="video-js vjs-theme-forest"
controls
preload="auto"
poster="wsX5Obj/Obj114_0/skins/thumbnail.jpg"
data-setup='{ "fluid": true }'>
<source
src="https://stream.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3.m3u8"
type="application/x-mpegurl"
/>
</video>
</div>
<br><br>
<div align="left" style="width:500px;">
<h2>Fantasy</h2>
<video
id="Obj114_5"
class="video-js vjs-theme-fantasy"
controls
preload="auto"
poster="wsX5Obj/Obj114_0/skins/thumbnail.jpg"
data-setup='{ "fluid": true }'>
<source
src="https://stream.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3.m3u8"
type="application/x-mpegurl"
/>
</video>
</div>
<br><br>
<div align="left" style="width:600px;">
<h2>City</h2>
<video
id="Obj114_6"
class="video-js vjs-theme-city"
controls
preload="auto"
poster="wsX5Obj/Obj114_0/skins/thumbnail.jpg"
data-setup='{ "fluid": true }'>
<source
src="https://stream.mux.com/FGZHQaIg7cjVNS2dgTrnMYSdCkXohOl3.m3u8"
type="application/x-mpegurl"
/>
</video>
</div>
Feedbacks zu ""

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 2 Online
            » 67 Heute
            » 115 Gestern
            » 390 Woche
            » 2598 Monat
            » 49559 Jahr
            » 273765 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt