본문 바로가기

HTML5

2개의 포스트
video loadmetadata 이벤트가 일관되게 실행되지 않는 이유

로컬 또는 빠른 네트워크 환경에서 테스트하는 경우 비디오가 빠르게 로드됨 즉 loadedmetadata, 이벤트 리스너를 설정하는 스크립트가 실행되기 전에 브라우저가 실행 반면에 비디오를 로드하는 데 시간이 조금 더 오래 걸리는 느린 네트워크를 통해 테스트하는 경우 브라우저에서 이벤트를 실행하기 전에 스크립트가 실행될 수 있습니다. 이벤트를 받는지 여부는 단순히 네트워크 조건, 비디오가 캐시되었는지 여부, 마크업에서 TCP 패킷 경계가 발생한 위치에 따라 달라짐 해결방법 아래 두가지 방법은 네트워크 환경에 관계없이 loadedmetadata 이벤트 리스너가 미리 등록되어 있기 때문에 항상 이벤트가 발생됨 1. 요소에 속성으로 이벤트 추가 2. 자바스크립트로 비디오 요소 생성 후 이벤트 추가 var vid..

2022년 02월 08일
HTML5 비디오 자동 재생

무음인 경우 항상 자동 재생이 가능 video요소에 muted 속성을 추가 하거나, muted 값을 true 로 설정한 경우는 자동 재생이 가능합니다. 비디오 파일에 오디오 트랙이 없는 경우 일부 브라우저(Safari, Firefox)는 muted 여부와 별개로 자동 재생이 가능합니다. 무음 자동 재생 중에 스크롤 등으로 인해 비디오가 뷰포트 밖으로 나가는 경우, 일시 정지됩니다. 저전력 모드가 켜져있는 경우 유/무음 자동 재생 불가. (iPhone)

2021년 03월 12일