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

，並同樣適用於其它圖像。