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 donation Lista delle risorse scaricabili con donazione
Review of different resources for uploading and playing audio and videos.
Rassegna di diverse risorse per il caricamento e la riproduzione di audio e video.
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
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:
Play
Pause
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:
Play/Pause
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:
Play
Pause
Vol +
Vol -
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).
16c1- Custom audio player
16c1- Player audio personalizzato
Example:
Esempio:
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.
Video effects
Effetti video
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
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
16q- Also version for HTML5 video
16q- Anche in versione per HTML5 video.
16r- Play all video from a folder - HTML, CSS, jQuery
16r- Riprodurre tutti i video di una cartella - HTML, CSS, jQuery
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
Share on Social:
Condividi sui social:
Argomenti del sito correlati: