Chrome 브라우저 HTML5 Video Element의 src 캐시 버그

 
프로젝트 도중에 HTML5 Video Element를 8개 삽입하면 7번째 Video Element 부터는 동영상을 제대로 로딩하지 못하는 문제가 있다는 사실을 발견하였다.

<video src="http://video.webmfiles.org/elephants-dream.webm"></video>
<video src="http://video.webmfiles.org/elephants-dream.webm"></video>
<video src="http://video.webmfiles.org/elephants-dream.webm"></video>
<video src="http://video.webmfiles.org/elephants-dream.webm"></video>
<video src="http://video.webmfiles.org/elephants-dream.webm"></video>
<video src="http://video.webmfiles.org/elephants-dream.webm"></video>
<video src="http://video.webmfiles.org/elephants-dream.webm"></video>
<video src="http://video.webmfiles.org/elephants-dream.webm"></video>

 
7, 8번째 동영상을 로딩하지 못해서 아래와 같이 나온다.

 
 
 
크롬을 열어서 네트워크 탭을 봤더니 src 요청이 pending에 걸려있다.

 
익스플로러, 사파리, 파이어폭스 모두 정상 동작하는데 크롬만 문제인 걸 보니 Blink 엔진의 버그로 추측된다. 바로 구글링을 해봤는데 역시나, Blink 버그가 맞는 듯 아래의 이슈 티켓 두 개를 찾았다.

• Issue 234779: HTML5 video request stay pending (forever)
• Issue 31014: Byte range cache is locked when attempting to open the same video twice

 
코멘트가 너무 많아서 자세히 읽어보진 않았지만 리소스 캐시 문제인 것 같다.  그래서 video element의 src 값을 다르게 줘봤는데 이번에는 정상 동작한다.

<video src="http://video.webmfiles.org/elephants-dream.webm"></video>
<video src="http://video.webmfiles.org/elephants-dream.webm"></video>
<video src="http://video.webmfiles.org/elephants-dream.webm"></video>
<video src="http://video.webmfiles.org/elephants-dream.webm"></video>
<video src="http://video.webmfiles.org/elephants-dream.webm"></video>
<video src="http://video.webmfiles.org/elephants-dream.webm"></video>
<video src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-eng.webm"></video>
<video src="http://video2.servicecanada.gc.ca/video/boew-wet/dc-td-eng.webm"></video>

 

 

 
처음 이슈를 제기한 게 수년 전인 거 같은데, 아직까지 수정을 안 하고 있다니. 어쨌든 최근에 작업을 한 듯 보이니 다음 버전쯤에는 해결되기를.