le formule magiche

Risorse audio e videoAudio and video resources

Informazioni sull'accesso a queste risorse

Modulo di contatto per i membri
Per aiuto e segnalazioni

Membership index

NOTA:> I download riservati ai membri possono essere effettuati anche senza registrazione con una piccola donazione a sostegno del sito.

Lista delle risorse scaricabili con donazione

Rassegna di diverse risorse per il caricamento e la riproduzione di audio e video.

ATTENZIONE: Non dimenticate di aggiungere i vendor prefixes ai codici di base.


Audio effects

Effetti audio

16a-Audio player with playlist - HTML, CSS, jQuery

16a-Player per file audio con playlist - HTML, CSS, jQuery

Preview + download

Load and play a song

Carica e suona un brano

Necessita di jQuery
Esempio:


Apri codice:
<p><input type="file"></p>

<audio controls id="myAudio" autoplay></audio>

<script>
var $audio = $('#myAudio');
$('input').on('change', function(e) {
  var target = e.currentTarget;
  var file = target.files[0];
  var reader = new FileReader();
 
  console.log($audio[0]);
   if (target.files && file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $audio.attr('src', e.target.result);
            $audio.play();
        }
        reader.readAsDataURL(file);
    }
});
</script>

Play Pause buttons

Bottoni Play Pause

Esempio:

Apri codice:
<audio id="player" src="XXXXXXXXX"></audio>
<div>
    <button onclick="document.getElementById('player').play()">Play</button>
    <button onclick="document.getElementById('player').pause()">Pause</button>
</div>

Play Pause unique button

Bottone unico Play Pause

Esempio:


Apri codice:
<audio id="player" src="XXXXXXXXXXX"></audio>
<button type="button"  onclick="aud_play_pause()">Play/Pause</button>

<script>
function aud_play_pause() {
  var myAudio = document.getElementById("player");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}
</script>

Play Pause Volume buttons

Bottoni Play Pause Volume

Esempio:

Apri codice:
<audio id="player" src="XXXXXXXXXX"></audio>
<div>
  <button onclick="document.getElementById('player').play()">Play</button>
  <button onclick="document.getElementById('player').pause()">Pause</button>
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button>
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
</div>

Play Pause unique button icons

Bottone unico play pause con icone

Esempio:

Apri codice:
<style>
#player-container #play-pause {
  cursor: pointer;
  height:40px;
  width: 40px;
  padding: 12px 14px;
  background-repeat: no-repeat;
  background-position:center;
  background-size:20px;
  background-color: #cfced2;
}
.play {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiAyNHYtMjRsMjAgMTItMjAgMTJ6Ii8+PC9zdmc+);
}
.pause {
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAgMjRoLTZ2LTI0aDZ2MjR6bTEwLTI0aC02djI0aDZ2LTI0eiIvPjwvc3ZnPg==)!important;
}
</style>

<audio id="track">
  <source src="XXXXXXXXXXX" type="audio/mpeg" />
</audio>

<div id="player-container">
  <div id="play-pause" class="play"></div>
</div>

<script>
var track = document.getElementById('track');
var controlBtn = document.getElementById('play-pause');
function playPause() {
    if (track.paused) {
        track.play();
        controlBtn.className = "pause";
    } else {
        track.pause();
        controlBtn.className = "play";
    }
}
controlBtn.addEventListener("click", playPause);
track.addEventListener("ended", function() {
  controlBtn.className = "play";
});
</script>

16b-Versione per file audio multipli (jQuery).

Download (member only)

Download con donazione

16c1-Custom audio player

16c1-Player audio personalizzato

Esempio:

Download (member only)

Download con donazione

16c-Multiple custom audio players

16c-Player audio multipli personalizzati

Più audio player personalizzati nella medesima pagina.

Preview + download

Video effects

Effetti video

NOTA: alcune funzionalità potrebbero non essere supportate da tutti i browser.

Video background

Un video come background

C'erano una volta le gif animate, ma ora sono deprecate e Google raccomanda l'uso dei video.
Per mettere un video come background a tutta pagina, si usa questo codice:
Apri codice:
<style>
video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
.content {
  position: relative;
}
</style>

<video autoplay loop playsinline muted
src="video.mp4" type="video/mp4">
</video>
<div class="content">
    Page content
</div>

16d-Video player with lightbox - HTML, CSS, JS

16d-Video player con lightbox - HTML, CSS, JS

Preview + download

16e-YouTube video player with lightbox - HTML, CSS, JS

16e-Video player YouTube con lightbox - HTML, CSS, JS

Preview + download

16f-All video type player (example with HTML5 video) - HTML, CSS

16f-Player per tutti i video (esempio con HTML5 video) - HTML, CSS

Preview + download

16g-Video with overlay image - HTML, CSS

16g-Video con immagine sovrapposta - HTML, CSS

Preview + download

16h-Video background with text - HTML, CSS

16h-Video background con testo - HTML, CSS

Preview + download

16i-Text with background video - HTML, CSS

16i-Testo con video come background - HTML, CSS

Preview + download

16l-Header with rounded background video - HTML, CSS

16l-Header con video background a base arrotondata - HTML, CSS

Preview + download

16m-Header with tilted background video - HTML, CSS

16m-Header con video background a base inclinata - HTML, CSS

Preview + download

16n-Video player with playlist - HTML, CSS, jQuery

16n-Player per video con playlist - HTML, CSS, jQuery

Preview + download

16o-Video player with playlist and thumbnails - HTML, CSS, JS

16o-Player per video con playlist e miniature - HTML, CSS, JS

Preview + download

16p-YouTube video player with playlist - HTML, CSS, jQuery

16p-Player per video YouTube con playlist - HTML, CSS, jQuery

16q-Anche in versione per HTML5 video.

Preview + download

16r-Play all video from a folder - HTML, CSS, jQuery

16r-Riprodurre tutti i video di una cartella - HTML, CSS, jQuery

Preview + download

Open video by link - HTML, CSS

Aprire un video con un link - HTML, CSS

Apri codice:
<style>
    .lightbox {
        display: none;
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        text-align: center;
        top: 0;
        left: 0;
        padding-top: 40px;
        background: rgba(0,0,0,0.8);
    }
    .lightbox:target {
        outline: none;
        display: block;
    }
    #videoModal {
        max-width: 800px;
        margin: 0 auto;
        width:100%;
    }
    .video-container {
        position:relative;
        padding-bottom:56.25%;
        padding-top:30px;
        height:0;
        overflow:hidden;
    }
    .video-container iframe, .video-container video {
        position:absolute;
        width:100%;
        height:100%;
        max-width:90%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>    

<a href="#watch">watch video</a>
    <a href="#" class="lightbox" id="watch">
    <div id="videoModal">
      <div class="video-container">
     <iframe src="http://www.youtube.com/embed/XXXXXXXXXXX"
     allowfullscreen="" width="600" height="380" frameborder="0"></iframe>
   </div>
    </div>
    </a>

Per video HTML5 sostituire iFrame con:
<video controls>
<source src="XXXXXXXXXXXXXXXX.mp4" type="video/mp4">
</video>

Usefull solutions

Soluzioni utili

Stop all HTML5 video on click

Fermare tutti i video HTML5 al click

NOTA: se il player si apre in un popup, basta aggiungere la classe al tag del pulsante di chiusura.
Apri codice:
<button onclick="stopVideo()">Stop</button>

<script>
   function stopVideo() {
var videoList = document.getElementsByTagName("video");
for (var i = 0; i < videoList.length; i++) {
    videoList[i].pause();
}
}
</script>

Stop all html5 audio on click

Fermare tutti gli audio HTML5 al click

Apri codice:
<button onclick="stopAudio()">Stop</button>

<script>
   function stopAudio() {
var audioList = document.getElementsByTagName("audio");
for (var i = 0; i < audioList.length; i++) {
    audioList[i].pause();
}
}
</script>

Stop a YouTube video on click

Fermare un video Youtube al click

Necessita di jQuery.
NOTA: se il player si apre in un popup, basta aggiungere la classe al tag del pulsante di chiusura.
Apri codice:
<button class="youtube-close">Stop</button>

<script>
jQuery('iframe[src*="https://www.youtube.com/embed/"]').addClass("youtube-iframe");
    jQuery(".youtube-close").click(function() {
      $('.youtube-iframe').each(function(index) {
        $(this).attr('src', $(this).attr('src'));
        return false;
      });
    });
</script>

Stop all YouTube videos on click

Fermare tutti i video Youtube al click

Necessita di jQuery.
Apri codice:
<button class="close">Stop all videos</button>

<script>
$(function(){
    $('.close').click(function(){      
        $('iframe').attr('src', $('iframe').attr('src'));
    });
});
</script>

Stop html5 audio or video if a next one starts

Stop audio o video html5 se si avvia un successivo

Questo script risolve il problema dei conflitti fermando la riproduzione di un brano quando viene avviato un altro player nella medesima pagina.
Necessita di jQuery.
Apri codice:
<script>    
window.addEventListener("play", function(evt)    
{    
    if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)    
    {    
        window.$_currentlyPlaying.pause();    
    }    
    window.$_currentlyPlaying = evt.target;    
}, true);    
</script>

HTML5 video player with autoplay delay

Player video HTML5 con autoplay delay

Questo script permette di avviare l'autoplay con un ritardo prestabilito.
Apri codice:
<script>
var video = document.getElementById("video_background");
video.addEventListener("canplay", function() {
  setTimeout(function() {
    video.play();
  }, 10000);
});
</script>

Membership index

Argomenti del sito correlati: