Why are the images not showing up when I click the button? I called them via JavaScript, it does part of a button that serves to mutate and dismantle my video. When I click the image does not appear, follow the code.
HTML:
<div id="buttonbar">
<button id="volDn"><img src="images/video/menos.png" id="menos"/></button>
<button id="volUp"><img src="images/video/mais.png" id="btn-mais"/></button>
<button id="mute"><img src="images/video/som.png" id="btn-mudo"/></button>
</div>
JavaScript:
function init() {
var video = document.getElementById("Video1");
if (video.canPlayType) {
document.getElementById("buttonbar").style.display = "inline";
function setVol(value) {
var vol = video.volume;
vol += value;
if (vol >= 0 && vol <= 1) {
video.volume = vol;
} else {
video.volume = (vol < 0) ? 0 : 1;
}
}
document.getElementById("volDn").addEventListener("click", function () {
setVol(-.1); // down by 10%
}, false);
document.getElementById("volUp").addEventListener("click", function () {
setVol(.1); // up by 10%
}, false);
document.getElementById("mute").addEventListener("click", function (evt) {
if (video.muted) {
video.muted = false;
evt.target.innerHTML = "<img alt='volume on button' src='../images/video/mutado.png' />"
} else {
video.muted = true;
evt.target.innerHTML = "<img alt='volume off button' src='../images/video/desmutado.png' />"
}
}, false);
}
video.muted = true;
}