Aktualisiert: Javascript Video Fade in Chrome

Question

Update: Dies funktioniert perfekt in Safari, aber die Aktion im ursprünglichen Post unten in Chrome - jede mögliche Vorschläge.

Ich benutze das folgende Video, das bei Mausklick eingeblendet werden sollte, die Kontrollsichtbarkeit wird ausgeblendet, aber das Video ist an oder aus (Opazität 0 oder 1 - alles oder nichts). Jede Hilfe, die beim Verbinden des Videoinhalts mit der Überblendung und nicht nur den Steuerelementen geschätzt wird (aus Gründen der Konsistenz in reinem Javascript, wenn möglich).

function assets() { 
 
    "use strict"; 
 
    var elem = document.getElementsByTagName("video")[0]; 
 
    elem.style.transition = "opacity 8s linear 0s"; 
 
    elem.style.opacity = 1.0; 
 
    elem.play(); 
 
}

video { 
 
    opacity: 0; 
 
}

<a href="#" onClick="assets()">video</a> 
 
<br> 
 

 
<video width="200px" height="200px" controls> 
 
</video>

Answer 1

Sie haben die Opazität zu wechseln, versuchen Sie etwas entlang der Linien von:

elem.style.opacity = Math.abs(elem.style.opacity - 1);