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
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:
Play
Pause
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:
Play/Pause
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:
Play
Pause
Vol +
Vol -
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).
16c1- Custom audio player
16c1- Player audio personalizzato
Esempio:
16c- Multiple custom audio players
16c- Player audio multipli personalizzati
Più audio player personalizzati nella medesima pagina.
16p- Spotify video player with playlist - HTML, CSS, jQuery
16p- Player per Spotify con playlist - HTML, CSS, jQuery
Comprese versioni per Youtube e video HTML5.
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
16e- YouTube video player with lightbox - HTML, CSS, JS
16e- Video player YouTube con lightbox - HTML, CSS, JS
16f- All video type player (example with HTML5 video) - HTML, CSS
16f- Player per tutti i video (esempio con HTML5 video) - HTML, CSS
16g- Video with overlay image - HTML, CSS
16g- Video con immagine sovrapposta - HTML, CSS
16h- Video background with text - HTML, CSS
16h- Video background con testo - HTML, CSS
16i- Text with background video - HTML, CSS
16i- Testo con video come background - HTML, CSS
16l- Header with rounded background video - HTML, CSS
16l- Header con video background a base arrotondata - HTML, CSS
16m- Header with tilted background video - HTML, CSS
16m- Header con video background a base inclinata - HTML, CSS
16n- Video player with playlist - HTML, CSS, jQuery
16n- Player per video con playlist - HTML, CSS, jQuery
16o- Video player with playlist and thumbnails - HTML, CSS, JS
16o- Player per video con playlist e miniature - HTML, CSS, JS
16p- YouTube video player with playlist - HTML, CSS, jQuery
16p- Player per video YouTube con playlist - HTML, CSS, jQuery
Comprese versioni per Spotify e video HTML5.
16r- Play all video from a folder as slider- HTML, CSS, jQuery
16r- Riprodurre tutti i video di una cartella come slider- HTML, CSS, jQuery
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:
Leggi tutto