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'/>

同样适用于另一张图片。