Come rendere sfumato il video HTML5 quando è stato completato il caricamento?

Question

Sto provando a far sbiadire il mio elemento video HTML5 quando viene caricato, (attualmente sto facendo apparire usando Javascript canplaythrough come puoi vedere nel codice che vedi qui sotto, ma è un po 'duro.) Come posso fai in modo che l'elemento video HTML5 si sbiadisca delicatamente? Sto bene con JavaScript o jquery, ma non conosco nessuno dei due, quindi un codice completo sarebbe molto utile!

Ecco il codice: (se si esegue il codice con il frammento di codice di esecuzione, non funziona bene, quindi consiglio vivamente di visitare il mio sito Web, è la pagina del mio video qui e funziona se si aspetta un 30 secondi/minuto (fino a quando i carichi di video):.! jeffarries.com/videos

<script> 
 
var e = document.getElementById("myVideo"); 
 
e.style.display = 'none' 
 

 
var vid = document.getElementById("myVideo"); 
 
vid.oncanplaythrough = function() { 
 
    var e = document.getElementById("myVideo"); 
 
     e.style.display = 'block' 
 
}; 
 

 
</script>

<video style="display: block;" id="myVideo" width="320" height="176" controls> 
 
    <source src="http://www.jeffarries.com/videos/jeff_arries_productions_intro.mp4" type="video/mp4"> 
 
    Your browser does not support HTML5 video. 
 
</video>

Grazie per voi tempo e fatica

Answer 1

Ecco come dissolvenza nel video con javascript

var e = document.getElementById("myVideo"); 
e.style.opacity = 0; 

var vid = document.getElementById("myVideo"); 
vid.oncanplaythrough = function() { 
    setTimeout(function() { 
     var e = document.getElementById('myVideo'); 
     fade(e); 
    }, 5000); 
}; 

function fade(element) { 
    var op = 0; 
    var timer = setInterval(function() { 
     if (op >= 1) clearInterval(timer); 
     element.style.opacity = op; 
     element.style.filter = 'alpha(opacity=' + op * 100 + ")"; 
     op += op * 0.1 || 0.1; 
    }, 50); 
} 

FIDDLE