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:
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:
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:
Ecco il codice completo:
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:
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
