Membership index

NOTE: NOTA: Downloads reserved for members can also be made without registration with a free donation in support of the site. I download riservati ai membri possono essere effettuati anche senza registrazione con una donazione libera in sostegno del sito.

List of downloadable sresources with donationLista delle risorse scaricabili con donazione

Review of different resources for uploading and playing audio and videos.

ATTENTION: Don't forget to add the vendor prefixes to the basic codes.

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.

ATTENTION: Don't forget to add the vendor prefixes to the css basic codes.

ATTENZIONE: Non dimenticate di aggiungere i vendor prefixes ai codici css 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

Need jQuery Necessita di jQuery
Example: Esempio:


Code: 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

Example: Esempio:

Code: 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

Example: Esempio:


Code: 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

Example: Esempio:

Code: 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

Example: Esempio:

Code: 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-Multiple audio files version (jQuery). 16b-Versione per file audio multipli (jQuery).

Download (member only)

Download with donationDownload con donazione

16c1-Custom audio player

16c1-Player audio personalizzato

Example: Esempio:

Download (member only)

Download with donationDownload con donazione

16c-Multiple custom audio players

16c-Player audio multipli personalizzati

Multiple custom audio players in the same page. Più audio player personalizzati nella medesima pagina.

Preview + download

Video effects

Effetti video

NOTE: Some features may not be supported by all browsers. NOTA: alcune funzionalità potrebbero non essere supportate da tutti i browser.

Video background

Un video come background

Animated gifs are now deprecated and Google recommends the use of videos.
To put a video as a full page background, use this code:
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:

<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-Also version for HTML5 video 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

<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>

For HTML5 video replace iFrame with 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

<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

<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

Need jQuery Necessita di jQuery
<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

Need jQuery Necessita di jQuery
<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

This script solves the conflict problem by stopping a song when another player is started on the same page Questo script risolve il problema dei conflitti fermando la riproduzione di un brano quando viene avviato un altro player nella medesima pagina.
Need jQuery Necessita di jQuery
<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.
<script>
var video = document.getElementById("video_background");
video.addEventListener("canplay", function() {
  setTimeout(function() {
    video.play();
  }, 10000);
});
</script>

Membership index

Argomenti del sito correlati: