Un Video Player con play list

Discussione in 'Snippet Javascript' iniziata da filomeni, 18 Giugno 2015.

  1. filomeni

    filomeni Moderatore Membro dello Staff MOD

    Registrato:
    14 Maggio 2006
    Messaggi:
    1.039
    Mi Piace Ricevuti:
    6
    Punteggio:
    38
    Sesso:
    Maschio
    Occupazione:
    Web Developer
    Località:
    Roseto degli Abruzzi (TE)
    Home Page:
    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
     
Sto caricando...

Condividi questa Pagina