Besucher Statistik
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.
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"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>
Feedbacks zu ""
Keine Kommentare gefunden.
Vielen Dank für Dein Feedback.
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