在使用HTML5視頻時，有時候我們在代碼中加入了圖片，但發現圖片并沒有顯示出來，這究竟是為什么呢？

<video controls="controls" poster="poster.jpg">
<source src="movie.mp4" type='video/mp4' />
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
<img src="poster.jpg" alt="poster" />
</video>

在上述代碼中，我們使用了video標簽來嵌入視頻，同時使用了poster屬性來設置視頻的海報（即視頻加載前的圖片）。此外，我們還加入了一個img標簽來顯示視頻的封面圖片。

然而，當我們在瀏覽器中查看頁面時，發現圖片并沒有顯示出來，即使我們嘗試了多種不同格式的圖片，也無法解決問題。這是為什么呢？

實際上，這是因為使用了img標簽會覆蓋掉視頻的海報圖片，造成了圖片無法顯示的問題。要解決這個問題，我們可以在video標簽內部使用CSS來設置海報圖片的樣式，具體代碼如下：

<style>
video {
background: url(poster.jpg) no-repeat center center;
background-size: cover;
}
</style>
<video controls="controls">
<source src="movie.mp4" type='video/mp4' />
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
<img src="poster.jpg" alt="poster" />
</video>

在這個代碼中，我們使用了CSS的background屬性來設置海報圖片的樣式，同時使用了background-size屬性來控制圖片的大小。接著在video標簽內部，我們只保留了source標簽來定義視頻的源文件，將img標簽刪除，這樣就避免了圖片覆蓋視頻的問題。

總結來說，當我們在使用HTML5視頻時，如果需要添加海報圖片或封面圖片，應該避免使用img標簽，而是使用CSS來設置海報圖片的樣式，這樣就能保證視頻和圖片正常顯示。