Come incorporare in una pagina web un player audio, un player video o una playlist audio con l'HTML5 e i tag audio e video senza l'icona di download.
L'introduzione dell'HTML5 ha avuto un grande impatto nella implementazione di audio e video nelle pagine web. Quando non era disponibile l'HTML5, per aggiungere un audio o un video dovevamo appoggiarci a un servizio esterno che ci fornisse un player per la riproduzione.
Per un video si usava Youtube o Vimeo mentre per un audio ci si rivolgeva a uno dei tanti siti di audio sharing. Queste genere di condivisioni si utilizzano ancora adesso e anzi forse pure di più. Con l'HTML5 però possiamo condividere un audio o un video che sia di nostra esclusiva proprietà e che abbiamo caricato su un nostro spazio come per esempio Tophost per poi averne il link diretto.
Al posto del link diretto per usare il codice HTML5 si può usare il link di download e caricare il file audio o video su servizi di spazio gratuito come Dropbox, Google Sites o Google Drive.
Ho già mostrato come creare dei player audio e video HTML5 avendo solo il link diretto o quello di download di un file caricato nel web. Riporto qui di seguito i codici usati per entrambi i player.
CODICE PLAYER AUDIO<audio controls> <source src="URL DOWNLOAD AUDIO.mp3" /> Se non riesci a vedere il player
significa che il tuo browser non supporta il tag audio </audio>
significa che il tuo browser non supporta il tag audio </audio>
CODICE PLAYER VIDEO
<video controls=" " preload="auto" src="URL DOWNLOAD VIDEO.mp4" width="400"> Se non
riesci a vedere il player significa che il tuo browser non supporta il tag video </video></div>
riesci a vedere il player significa che il tuo browser non supporta il tag video </video></div>
Entrambi i Player oltre ad avere le icone per il Play, per la Pausa e per il Volume avranno anche quella per il Download. Il testo in blu può essere cancellato visto che ora tutti i principali browser supportano l'HTML5. Evidentemente ci può essere una resistenza da parte di chi mette un audio o un video online per farlo scaricare senza nessun problema a tutti gli utenti che lo riproducono.
In questo articolo vedremo come inserire file audio, file video e playlist audio in una pagina web senza l'icona di download. In sostanza l'aspetto dei player cambieranno in questo modo
In entrambi i player audio e video scompariranno le icona per il download. Nel player video scomparirà anche l'icona per la visualizzazione a tutto schermo. Per ottenere questo risultato basterà aggiungere una stringa al codice.
CODICE PLAYER AUDIO SENZA DOWNLOAD
<audio controls=" " controlsList="nodownload" preload="auto" src="URL DOWNLOAD AUDIO.mp3"></audio>
CODICE PLAYER VIDEO SENZA DOWNLOAD
<video controls=" " controlsList="nodownload" preload="auto" src="URL DOWNLOAD VIDEO.mp4" width="400"></video>
Tale stringa è controlsList="nodownload". Nel player video si può scegliere anche la sua larghezza.
COME AGGIUNGERE UNA PLAYLIST AUDIO SENZA DOWNLOAD
In un precedente post ho mostrato come aggiungere una playlist audio in widget di Blogger.
Come si vede nello screenshot viene mostrata anche l'icona di download per tutti i brani che vengono riprodotti dal player. Riporto i codici per aggiungere questo widget su Blogger senza icona di download.
Su Tema -> Modifica HTML, subito sopra alla riga </body> si incolla questo codice
<!-- Playlist Audio Inizio -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
var audio;var playlist;var tracks;var current;initaudio();function initaudio(){current=0;audio=$('audio');playlist=$('#playlist');tracks=playlist.find('li a');len=tracks.length-1;audio[0].volume=1;playlist.find('a').click(function(e){e.preventDefault();link=$(this);current=link.parent().index();runaudio(link,audio[0])});audio[0].addEventListener('ended',function(e){current++;if(current>len){current=0;link=playlist.find('a')[0]}else{link=playlist.find('a')[current]}runaudio($(link),audio[0])})}function runaudio(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().removeClass('active');audio[0].load();audio[0].play()}
//]]>
</script>
<!-- Playlist Audio Fine -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
var audio;var playlist;var tracks;var current;initaudio();function initaudio(){current=0;audio=$('audio');playlist=$('#playlist');tracks=playlist.find('li a');len=tracks.length-1;audio[0].volume=1;playlist.find('a').click(function(e){e.preventDefault();link=$(this);current=link.parent().index();runaudio(link,audio[0])});audio[0].addEventListener('ended',function(e){current++;if(current>len){current=0;link=playlist.find('a')[0]}else{link=playlist.find('a')[current]}runaudio($(link),audio[0])})}function runaudio(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().removeClass('active');audio[0].load();audio[0].play()}
//]]>
</script>
<!-- Playlist Audio Fine -->
La riga evidenziata di giallo è la libreria jQuery che può essere tralasciata se già presente nel Modello. Sempre nel Tema di Blogger subito sopra alla riga ]]></b:skin> si incolla quest'altro codice
/* Aspetto del player audio */
#playlist, #player {
width: 400px; /* Larghezza del contenitore */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#playlist {
margin: 0 auto 20px auto;
display: block;
text-align: center;
font-size: 12px; /* Dimensione caratteri */
font-family: Georgia;
font-weight: normal;
}
#player {
/* Immagine di sfondo del primo contenitore */background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH5ZtHygttE6O6wjyNqx08q-Cn9IeRA56rt8b6C-_4OgDtooY3pyQ4jI4Q7wc4f7YlCdXt4pjJSbF1CyyYR-8Jx0TczcKbBs3fuvz1WwoqJ_8bFMs3fs3QdQw8Cjfdwh8WM2PoWL38nH4V/s300/sfondo.png);
padding: 10px 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
audio {
width:300px; /* Larghezza del player */
margin:0 auto;
display: inline-block
}
#player:after {
/* Immagine animata equalizzatore */content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHxdO5TU2aJ-nwc-TrFpm-yMqzV0rXwYwKiRBuF6KNwWTiRcilMlPBdL35FMo5Fdzn8g8bLn9w7gx9mRCWhWj8yDvD_dVQQGthLAo0Q8SuTTGA5SFc5AHIkvMikcbCz83CuCQ0BQz6DtZ/s75/animata.gif);
padding-left: 10px;
}
#playlist {
background: #424242; /* Sfondo del secondo contenitore */border-top: 5px solid #9F111B;
text-align: left;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#playlist li, #playlist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#playlist li a {
color: #CCC; /* Colore del brano musicale */
background: #222; /* Sfondo del brano musicale */padding: 7px 5px;
display: block;
padding-left: 10px;
text-decoration: none;
}
#playlist li a:hover{
background: #9F111B;
/* Colore dello sfondo al passare del mouse */
text-decoration: none;
}
#playlist .active a {
color: #B11623; /* Colore del brano attivo */
font-style: italic;
font-weight:bold;
text-decoration: none;
}
#playlist .active a:before {
/* Icona prima del brano attivo */content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #222; /* Colore del brano attivo al passaggio del mouse */
}
#playlist, #player {
width: 400px; /* Larghezza del contenitore */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#playlist {
margin: 0 auto 20px auto;
display: block;
text-align: center;
font-size: 12px; /* Dimensione caratteri */
font-family: Georgia;
font-weight: normal;
}
#player {
/* Immagine di sfondo del primo contenitore */background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH5ZtHygttE6O6wjyNqx08q-Cn9IeRA56rt8b6C-_4OgDtooY3pyQ4jI4Q7wc4f7YlCdXt4pjJSbF1CyyYR-8Jx0TczcKbBs3fuvz1WwoqJ_8bFMs3fs3QdQw8Cjfdwh8WM2PoWL38nH4V/s300/sfondo.png);
padding: 10px 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
audio {
width:300px; /* Larghezza del player */
margin:0 auto;
display: inline-block
}
#player:after {
/* Immagine animata equalizzatore */content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHxdO5TU2aJ-nwc-TrFpm-yMqzV0rXwYwKiRBuF6KNwWTiRcilMlPBdL35FMo5Fdzn8g8bLn9w7gx9mRCWhWj8yDvD_dVQQGthLAo0Q8SuTTGA5SFc5AHIkvMikcbCz83CuCQ0BQz6DtZ/s75/animata.gif);
padding-left: 10px;
}
#playlist {
background: #424242; /* Sfondo del secondo contenitore */border-top: 5px solid #9F111B;
text-align: left;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#playlist li, #playlist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#playlist li a {
color: #CCC; /* Colore del brano musicale */
background: #222; /* Sfondo del brano musicale */padding: 7px 5px;
display: block;
padding-left: 10px;
text-decoration: none;
}
#playlist li a:hover{
background: #9F111B;
/* Colore dello sfondo al passare del mouse */
text-decoration: none;
}
#playlist .active a {
color: #B11623; /* Colore del brano attivo */
font-style: italic;
font-weight:bold;
text-decoration: none;
}
#playlist .active a:before {
/* Icona prima del brano attivo */content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #222; /* Colore del brano attivo al passaggio del mouse */
}
quindi si salva il Tema. Nei commenti colorati di verde sono indicati a cosa si riferiscono i vari parametri colorati di rosso. Per le altre personalizzazioni fare riferimento al post linkato all'inizio di questa sezione.
Si va poi su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript e in Sezioni del sito si incolla
<div id='player'>
<audio controls='' controlslist='nodownload' id='audio' preload='auto' tabindex='0' type='audio/mpeg'>
<source src='URL DEL BRANO1.mp3' type='audio/mp3'/>
</source></audio>
</div>
<ul id='playlist'>
<li class='active'><a href='URL DEL BRANO1.mp3'>Nome del Brano 1</a></li>
<li><a href='URL DEL BRANO2.mp3'>Nome del Brano 2</a></li>
<li><a href='URL DEL BRANO3.mp3'>Nome del Brano 3</a></li>
<li><a href='URL DEL BRANO4.mp3'>Nome del Brano 4</a></li>
<li><a href='URL DEL BRANO5.mp3'>Nome del Brano 5</a></li>
<li><a href='URL DEL BRANO6.mp3'>Nome del Brano 6</a></li>
</ul>
<audio controls='' controlslist='nodownload' id='audio' preload='auto' tabindex='0' type='audio/mpeg'>
<source src='URL DEL BRANO1.mp3' type='audio/mp3'/>
</source></audio>
</div>
<ul id='playlist'>
<li class='active'><a href='URL DEL BRANO1.mp3'>Nome del Brano 1</a></li>
<li><a href='URL DEL BRANO2.mp3'>Nome del Brano 2</a></li>
<li><a href='URL DEL BRANO3.mp3'>Nome del Brano 3</a></li>
<li><a href='URL DEL BRANO4.mp3'>Nome del Brano 4</a></li>
<li><a href='URL DEL BRANO5.mp3'>Nome del Brano 5</a></li>
<li><a href='URL DEL BRANO6.mp3'>Nome del Brano 6</a></li>
</ul>
quindi si va su Salva, si posiziona e si termina con Salva disposizione. Si aggiungono gli URL di download dei brani e il nome degli stessi. Per non mostrare il download si aggiunge la stringa controlslist='nodownload'.
L'URL del primo brano va inserito due volte. Se si vogliono inserire più di 6 brani basterà aggiungere prima del tag </ul> una riga come questa per il 7° MP3
<li><a href='URL DEL BRANO7.mp3'>Nome del Brano 7</a></li>
Il lettore potrà cliccare sulla traccia da riprodurre. Se non c'è nessun intervento da parte del lettore i brani verranno riprodotti uno dietro l'altro senza soluzione di continuità. Per aggiungere l'autoplay si aggiunge la stringa autoplay subito dopo audio nella seconda riga del codice. Verrà mostrato un player senza download
Nessun commento :
Posta un commento
Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy