HTML 5 동영상 - 대체 이미지 항상 다운로드

Question

이미지 태그가 포함 된 HTML5 동영상 태그를 지원하지 않는 브라우저 (예 : IE8)의 대체 버전으로 사용하고 있습니다.

코드는 다음과 같습니다

<video loop="loop" preload="auto"> 
    <source src="/videos/home-slider-1.mp4" type="video/mp4"> 
    <img src="/images/png-jpg/home-slide-1.jpg" width="100%"> 
</video> 

폴백 이미지가 원하는대로, 그것은 비디오 태그를 지원하는 최신 브라우저에 표시되지 않습니다 작동합니다. 그러나 IE8에서는 아무런 문제가 없습니다.

그러나이 코드로 페이지를로드 할 때 Chrome이나 Firefox를 살펴볼 때 폴백 이미지도 다운로드되는 것을 보여줍니다 ... 이유는 모르겠지만 대역폭이 낭비되었습니다.

오전 여기 뭔가 잘못하고? 대체 이미지를 제공하는 다른 방법을 사용해야합니까? 다른 HTML5 대체 시스템에도이 문제가 있습니까?

Answer 1

브라우저는 문서의 모든 애셋을 다운로드하므로보고있는 내용이 정상입니다. 당신은 아무런 잘못을하지 않았습니다. 반대로, 대부분의 사람들은 대체를 구현하지 않습니다. 그래서 실제로 당신은 위를 넘어 옳은 일을하고 있습니다.
만약 당신이 그것에 대해 걱정하고 있다면 나는 당신이 대체 이미지 포스트 페이지로드를로드 할 수 있다고 생각하지만, 나는 그게 정말 극단이라고 생각한다. 당신이 당신의 문서에 엄청난 양의 자산을 가져 오지 않고 부하 속도가 극도로 상하지 않는다면 나는 그것에 대해 걱정하지 않을 것입니다.