Molti video, file di piccole dimensioni. Caricamento su richiesta.

in data

Ora che il caricamento rapido delle pagine è di gran moda – o meglio, praticamente una necessità – bisogna pensarci due volte prima di mettere più video sulla stessa pagina.
Tuttavia, a volte è necessario farlo, quindi che ne dite se li rendiamo tutti visibili ma ne carichiamo solo uno inizialmente? Immagino che ne guadagneremmo qualcosa.
Beh, questo è più o meno l'uso principale del piccolo gadget che vedremo oggi. L'altro è evitare di riempire l'intera pagina di video e, come bonus, aggiungeremo anche un tocco personale all'aspetto generale.
L'idea di base è quella di utilizzare una semplice riga di codice JavaScript che sostituisca un video con un altro su richiesta (con un clic su una miniatura), caricando solo quello che si desidera guardare. Useremo un codice HTML specifico per questo, e un po' di codice CSS si occuperà del resto. Quindi, iniziamo...

Caricatore video

Per prima cosa, dobbiamo utilizzare la seguente struttura HTML, che può essere utilizzata in un post, una pagina o un gadget. L'unica cosa che deve essere modificata è la parte evidenziata in un colore diverso, che è il codice per ogni video.
Questo codice deve essere ripetuto due volte in ciascuno dei link iniziali. Un'istanza passerà l' ID del video alla routine JavaScript che lo carica e l'altra visualizzerà la miniatura corrispondente.
Il codice per il primo video deve essere ripetuto una terza volta. Questo assicura che appaia per primo. Sarà l'unico che verrà effettivamente caricato inizialmente. Puoi trovare l'ID di ogni video su YouTube nell'URL stesso. In questo esempio ,
sarebbe la stringa alfanumerica di 11 caratteri alla fine, dopo il segno di uguale (=): https://www.youtube.com/watch?v=jCOUeqgYoLM .
Facoltativo: includi il titolo del video in un div all'interno del link.

<div class="yt-general">
 <div class="yt-miniaturas">
  <!-- INCLUDERE L'ID DI OGNI VIDEO DUE VOLTE IN OGNI LINK: UNA PER ORDINARE IL CARICAMENTO E UN'ALTRA PER LA MINIATURA --> <a href="javascript:cargarVideo('id-frame',' RnoDb0bMQuk ');">
   <img src="http://img.youtube.com/vi/ RnoDb0bMQuk /1.jpg" /> <div>1956 - That's amore</div> </a><a href="javascript:loadVideo('id-frame',' 7IjgZGhHrYY ');">
   <img src="http://img.youtube.com/vi/ 7IjgZGhHrYY /1.jpg" /> <div>1957 - Grandi palle di fuoco</div> </a><a href="javascript:loadVideo('id-frame',' noE1u3Xu6Vg ');">
   <img src="http://img.youtube.com/vi/ noE1u3Xu6Vg/1.jpg " /> <div>1956 - Non essere crudele</div> </a><a href="javascript:loadVideo('id-frame',' ty31QY5ZGHo ');">
   <img src="http://img.youtube.com/vi/ ty31QY5ZGHo/1.jpg " /> <div>1957 - Ogni giorno</div> </a><a href="javascript:loadVideo('id-frame',' u0yGXKoA6Ek ');">
   <img src="http://img.youtube.com/vi/ u0yGXKoA6Ek/1.jpg " /> <div>1958 - Johnny .Goode</div> </a>
 </div>
 <div class="yt-caricatore">
  <div id="yt-video" class="yt-video">
   <!-- SCRIVI DI NUOVO IL PRIMO CODICE VIDEO --> 
   <iframe id="id-frame" width="420" height="315" src="https://www.youtube.com/embed/ RnoDb0bMQuk ?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>
</div>
<script>funzione loadVideo(idframe, idvideo) {document.getElementById(idframe).src = 'https://www.youtube.com/embed/' + idvideo + '?rel=0';}</script>

Qui sopra, alla fine dell'HTML, ho aggiunto direttamente il codice JavaScript. Essendo molto breve, non vale la pena includerlo nel template, ma puoi anche includerlo prima del tag ` </head>`, se preferisci . In questo modo, non dovrai includerlo ogni volta che usi questo sistema in un post/pagina.
Avrai visto che è una piccola cosa, ma funziona perfettamente. Quando clicchi sulla miniatura, un ID HTML corrispondente all'iframe del primo video ( `id-frame` ) e l'ID del video da caricare ( `RnoDb0bMQuk` ... o qualsiasi altro nome) vengono inviati alla funzione `cargarVideo` . Quindi la funzione sostituisce quest'ultimo codice, e il gioco è fatto: ora abbiamo un altro video al posto del primo.


E poiché l'HTML senza CSS è praticamente nulla, tutto ciò che dobbiamo fare è aggiungere ciò che segue questa demo al nostro modello per rendere il tutto più gradevole. Cliccate sulle miniature per vedere come avviene la sostituzione.

1956 - Questo è di più

1957 - Grandi palle di fuoco

1956 - Non essere crudele

1957 - Ogni giorno

1958 - Johnny B. Goode

/* Stile del caricatore video */
.yt-general {padding: 10px;box-sizing: border-box;text-align: center;line-height: 0;font-size: 0;}
.yt-loader {width: 1000px;max-width: 100%;margin: 0 auto;padding: 4%;background: #333;border-radius: 0 0 8px 8px;box-sizing: border-box;box-shadow: 0 0 10px #000 inset, 0px 0 25px #666 inset;}
.yt-video{position: relative;max-width: 100%;padding-bottom: 56.25%;height: 0;overflow: hidden;background: #000;}
.yt-video iframe,.yt-video object,.yt-video embed {width: 1600px;max-width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.yt-thumbnails {width: 1000px;max-width: 100%;margin: 0 auto;padding: 1% 4% 2%;background: #333;box-sizing: border-box;border-radius: 8px 8px 0 0;box-shadow: 0 0 10px #000 inset, 0px 0 25px #666 inset;}
.yt-thumbnails a {position: relative;display: inline-block;width: 20%;height: 0;overflow: hidden;padding: 0 0 13% 0;vertical-align:top;margin: 1% 0 0;border: 2px solid #333;box-sizing: border-box;transition: .3s all;}
.yt-thumbnails to:hover {z-index: 2;transform: scale(1.2);}
.yt-thumbnails to img {width: 100%;padding: 0;background: transparent;}
.yt-thumbnails to div {position: absolute;width: 100%;overflow: hidden;padding: 0 4px;box-sizing: border-box;white-space: nowrap;text-overflow: ellipsis;bottom: 0;left: 0;font-size: 14px;line-height: 18px;font-family: Arial;color: white;background: #CC181E;opacity: .8;}
@media (max-width:470px) {.videothumbnails in div {display: none !important;}}
/* Simbolo del caricatore CSS - FACOLTATIVO */
.yt-video:before {content: "";display: inline-block;margin: 20% auto;border-width: 30px;border-radius: 50%;-webkit-animation: spin 1s linear infinite;-moz-animation: spin 1s linear infinite;animation: spin 1s linear infinite;border-style: double;border-color: #999 transparent;}
@-webkit-keyframes spin {100% {-webkit-transform: rotate(359deg);}}
@-moz-keyframes spin {100% {-moz-transform: rotate(359deg);}}
@keyframes spin {100% {transform: ruota(359 gradi);}}

E quasi dimenticavo. Con quel CSS, il caricatore si adatterà a qualsiasi larghezza dello schermo.

fonte

Commenti

Posta un commento

nome-foto