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.
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"controlspreload="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"controlspreload="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"controlspreload="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"controlspreload="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"controlspreload="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"controlspreload="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 «