Jak sprawić, aby wideo HTML5 zniknęło po zakończeniu ładowania?

Question

Staram się, aby element wideo HTML5 zniknął po załadowaniu (obecnie mam go wyświetlany przy użyciu kodu JavaScript canplaythrough, co widać w poniższym kodzie, ale jest to trochę trudne). Jak mogę to zrobić? dostać element wideo HTML5 delikatnie znikać? Czuję się dobrze z JavaScriptem lub jquery, ale nie znam żadnego z nich zbyt dobrze, więc niektóre kompletne kody byłyby bardzo pomocne!

Oto kod: (jeśli uruchomisz kod z fragmentem kodu uruchamiania, nie działa dobrze, więc bardzo polecam, aby przejść do mojej witryny, to jest na mojej stronie wideo tutaj i działa, jeśli czekasz 30 sekund/minut (do obciążeń wideo).! 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>

Dzięki za czas i wysiłek

Answer 1

Oto jak zanikać w filmie z 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