[JS] video.js 자동 재생이 안될 때 해결 방법

video.js를 이용하여 HSL 동영상을 재생하는데 자동 재생이 안되는 경우가 있었다.

 

그래서 원인을 찾아보기 위해 가능한 모든 이벤트에 로그를 찍도록 했다.

 

그리고 HLS.js 에서도 같은 현상이 일어나는지도 확인해봤다.

 

우선 HLS.js의 경우 어떤 경우에서도 재생이 잘 됐고 다음과 같이 이벤트가 진행됐다.

1. loadstart

2. durationchange

3. loadedmetadata

4. durationchange

5. loadeddata

6. canplay

7. canplaythrough

8. play

video.js도 잘되는 경우엔 비슷하게 이벤트가 진행됐다.

 

자동 재생이 안되는 경우에는 이벤트가 다음과 같이 진행됐다.

1. loadstart

2. play

3. durationchange

4. loadedmetadata

loadedmetadata 이후에 loadeddata가 호출돼야하는데 더이상 진행이 되지 않았다.

 

이때 시킹바를 움직이거나 일시정지 후 다시 재생을 하면 제대로 재생이 됐다.

 

정확한 이유를 알 수 없었지만 중간에 play 이벤트가 먼저 호출되는게 문제가 있는 것 같아

 

autoplay를 false로 하고 loadedmetadata가 호출된 후 재생하도록 하니 잘 동작하는 것을 확인할 수 있었다.

 

참고 문헌

1. developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events