Un Video Player con play list

filomeni

Moderatore
Membro dello Staff
MOD
14 Mag 2006
1.052
6
38
50
Roseto degli Abruzzi (TE)
www.sitiweb.cloud
Ciao a tutti,
ho voluto realizzare questo video player molto semplice ma funzionale perchè in rete ci sono molti progetti ma in alcune occasioni richiedono tempo ed esperienza per l'installazione nel proprio sito!
Nel mio video player ci sono solo due righe javascript, un pò di css e il semplicissimo TAG HTML "video".
Spiego, anche se vedendo il codice non c'è nulla da spiegare è tutto molto elementare ma spesso le cose elementari sono le più belle e funzionali...

uno screen shot del risultato finale:
FireShot Screen Capture #001 - '' - _I__A-Nuova_Era_allevamentogattibengala_it_Player-html5-237_.jpg

Partiamo dal css, serve solo ed esclusivamente al posizionamento e personalizzazione della semplice grafica, come colore del videoplayer, la stondatura dei bordi ecc. che potrete cambiare a piacimento...

CSS:
Codice:
<style>
video{width:100%;-webkit-border-radius: 8px 8px 8px 8px;border-radius: 8px 8px 8px 8px;}
#video,#containerVid{background-color:#c0c0c0;-webkit-border-radius: 15px 15px 15px 15px;border-radius: 15px 15px 15px 15px;padding:25px}
#containerVid{max-width:700px;border-left: solid 2px #191919;border-bottom: solid 2px #191919;-webkit-border-radius: 15px 15px 15px 15px;border-radius: 15px 15px 15px 15px;background-color:#696969;height: auto;}
#media-play-list{border-left: 2px solid #191919;position: relative;left: 780px;top: -480px;padding-left: 10px;}
ul, li{list-style:none}
</style>

poi abbiamo due semplici righe javascript che tramite un ID vanno a costruire, quando chiamata la funzione, il video player con il relativo file video.
Per mettere un segnaposto al video player ho usato il tag video con un "poster", questo perchè al caricamento della pagina non va in esecuzione nessuna funzione javascript se non al click su una miniatura della play list. Quando si va a chiamare la funzione per il caricamento effettivo bisogna "eliminare" il segnaposto creato e questo lo fa la funzione con ID "clear" mettendo il "contenitore" in display:none.

javascript:
Codice:
<script type='text/javascript'>
function vid1() {
    document.getElementById("player").innerHTML = "<video id='media-video' controls preload><source src='http://www.allevamentogattibengala.it/responsive/pappa-rudy.mp4' type='video/mp4'></video>";
    document.getElementById("clear").innerHTML = "<div style='display:none'>";
}...
</script>

Ecco il codice completo:

HTML:
<!DOCTYPE html>
<html>
<head>
<style>
video{width:100%;-webkit-border-radius: 8px 8px 8px 8px;border-radius: 8px 8px 8px 8px;}
#video,#containerVid{background-color:#c0c0c0;-webkit-border-radius: 15px 15px 15px 15px;border-radius: 15px 15px 15px 15px;padding:25px}
#containerVid{max-width:700px;border-left: solid 2px #191919;border-bottom: solid 2px #191919;-webkit-border-radius: 15px 15px 15px 15px;border-radius: 15px 15px 15px 15px;background-color:#696969;height: auto;}
#media-play-list{border-left: 2px solid #191919;position: relative;left: 780px;top: -480px;padding-left: 10px;}
ul, li{list-style:none}
</style>
</head>
<body>
<h1>Media Player con play list By: Filomeni</h1>
<script type='text/javascript'>
function vid1() {
    document.getElementById("player").innerHTML = "<video id='media-video' controls preload><source src='http://www.allevamentogattibengala.it/responsive/pappa-rudy.mp4' type='video/mp4'></video>";
    document.getElementById("clear").innerHTML = "<div style='display:none'>";
}
function vid2() {
    document.getElementById("player").innerHTML = "<video id='media-video' controls preload><source src='http://www.allevamentogattibengala.it/responsive/pappa-rudy.mp4' type='video/mp4'></video>";
    document.getElementById("clear").innerHTML = "<div style='display:none'>";
}
function vid3() {
    document.getElementById("player").innerHTML = "<video id='media-video' controls preload><source src='http://www.allevamentogattibengala.it/responsive/pappa-rudy.mp4' type='video/mp4'></video>";
    document.getElementById("clear").innerHTML = "<div style='display:none'>";
}
function vid4() {
    document.getElementById("player").innerHTML = "<video id='media-video' controls preload><source src='http://www.allevamentogattibengala.it/responsive/pappa-rudy.mp4' type='video/mp4'></video>";
    document.getElementById("clear").innerHTML = "<div style='display:none'>";
}
</script>
<div id="video">
<div id="containerVid">
<span  id='clear'><video controls poster="http://www.tuosito.com/img/poster.jpg"></video></span>
<span id="player"></span>
</div>
<div id="media-play-list">
<h2>Play List</h2>
<ul>
<li><span class="vid1" onclick="vid1()"><img src="http://www.tuosito.com/img/miniatura1.jpg" width="100"></img></span></li>
<li><span class="vid2" onclick="vid2()"><img src="http://www.tuosito.com/img/miniatura2.jpg" width="100"></img></span></li>
<li><span class="vid3" onclick="vid3()"><img src="http://www.tuosito.com/img/miniatura3.jpg" width="100"></img></span></li>
<li><span class="vid4" onclick="vid4()"><img src="http://www.tuosito.com/img/miniatura4.jpg" width="100"></img></span></li>
</ul>
</div>
</div>
</body>
</html>

Ciao a tutti
 
Discussioni simili
Autore Titolo Forum Risposte Data
A [Javascript] La larghezza del video player, diminuisce nel passaggio dal primo video ai successivi Javascript 0
F inserire un video windows media player HTML e CSS 2
F Player per riproduzione "streaming live" di video Flash 5
F Player Video da inserire in sito streaming, tipo Shadowbox Javascript 0
M Quale video player utilizzare? Webdesign e Grafica 1
R video player per sito off line HTML e CSS 13
G leggere file txt e stampare con php il contenuto a video PHP 7
F stampare a video i risultati della query PHP 1
R inserire video nel sito HTML e CSS 15
D Stampa a video in altra pagina html Database 3
felino Importare VHS: video in bianco e nero Discussioni Varie 6
Z Video protetto con PHP PHP 0
P Mascheramento video youtube su sito proprio HTML e CSS 5
Beppe2 Visualizzazione sottotitoli video HTML e CSS 2
M [VENDO] Banner / Video Vendere e Acquistare pubblicita' online 1
elpirata Query per leggere dati da una tabella mysql e mostrarli a video in base a parametri passati tramite GET PHP 5
L Come spostare cartella immagini/video PHP 1
L [RISOLTO] Stampa a video risultato count in html PHP 13
J estrarre url dei file video da youtube "get_video_info" PHP 6
F [PHP] Slideshow video PHP 0
F [PHP] Visualizzazione video PHP 3
T Come ruotare un video in maniera veloce? Discussioni Varie 2
S [PHP] Stampa a video Nome e Cognome in seguito a login PHP 1
C [Vendo] Sito web video animali e divertenti Compravendita siti e domini 0
A sommare valori a video per lo stesso giorno jQuery 1
trattorino estrarre titolo video facebook in php PHP 0
M problema con video in html 5 HTML e CSS 7
K [CERCO -RETRIBUITO] Realizzazione logo , banner, video copertina pagina FB Offerte e Richieste di Lavoro e/o Collaborazione 0
T [HTML] video in apertura sito. su pc ok, su smartphone KO HTML e CSS 0
F [PHP + MYSQLI] Stampa a video di una tabella nel database PHP 4
F Ipcam cinesi senza pagina web, come prelevo il flusso video, audio e tilt? IP Cam e Videosorveglianza 0
fida convertire i video in mp3 Discussioni Varie 2
M Esiste un sistema di video sorveglianza simile? IP Cam e Videosorveglianza 1
felino Software per video editing Windows e Software 14
W Followers, visualizzazioni video e storie + like instagram (rapidi) Annunci servizi di Social Media Marketing 1
P [PHP] Riconoscere video PHP 4
F Realizzare video su Mac Mac e Software 0
L [Photoshop] Aggiungere file video in timeline Photoshop 1
O [Javascript] overlay video Javascript 14
F FLUSSO VIDEO IP CAM IP Cam e Videosorveglianza 1
B [Photoshop] Scheda video esterna Photoshop 2
D Cerco pagina FB tema Cibo o travel o video Annunci servizi di Social Media Marketing 2
momeraths [HTML] Come non far scaricare video HTML e CSS 1
G [PHP] RICHIAMARE TABELLA I CUI VALORI SONO STAMPATI A VIDEO E MODIFICARLI PHP 6
R Traduzione del parlato in un video Youtube Social Media Marketing 1
M [Compro] video post su pagine facebook Vendere e Acquistare pubblicita' online 1
E [PHP] associazione id e stampa a video PHP 0
F Ip cam e salvataggio video IP Cam e Videosorveglianza 1
elpirata Realizzare video con immagini testo e transizioni Windows e Software 5
MikSkagit [PHP] Risultati a video sulla stessa riga PHP 12

Discussioni simili