jedihamster jedihamster - 5 months ago 9
Javascript Question

Updated: Javascript Video Fade in Chrome

Update: This works perfectly in Safari but does the action detailed in the original post below in Chrome - any suggestions.

I am using the following video which should fade up on mouse click, the control visibility fades up without issue but the video is on or off (opacity 0 or 1 - all or nothing). Any help appreciated in connecting the video content to the fade, not just the controls - (for the sake of consistency in pure Javascript if possible).



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

You have to toggle the opacity, try something along the lines of:

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