innerHTML图像未显示

Question

我正在自定义html5视频播放器。我正在寻找显示不同的PNG取决于视频的状态，如果它正在播放或不播放。这是我使用的脚本，但无法显示图像。

window.onload = function() { 

var video = document.getElementById("video"); 

var playButton = document.getElementById("play-pause"); 

playButton.addEventListener("click", function() { 
    if (video.paused == true) { 
     video.play(); 

     playButton.innerHTML = "<img='pause.png'/>"; 
    } else { 
     video.pause(); 
     playButton.innerHTML = "<img='play.png'/>"; 
    } 
}); 

} 

的HTML

<div id="video-container"> 
<video id="video"> 
     <source src="video.mp4" type="video/mp4"> 
     <source src="video.webm" type="video/webm"> 
     <source src="video.ogg" type="video/ogg"> 
     </video> 
    <!-- Video Controls --> 
    <div id="video-controls"> 
     <button type="button" id="play-pause" class="play"></button> 
    </div> 
</div> 

任何人都可以发现这个错误吗？

谢谢:)

Answer 1

那么首先你缺少的IMG标签的src属性。

<img='pause.png'/> 

应该是：

<img src='pause.png'/> 

，并同样适用于其它图像。