MP4 Skin VideoPlayer - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
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
x runter geladen
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>

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt