본문 바로가기

video

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

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

2022년 02월 08일
video 태그 m3u8 포맷 스트리밍 지원여부 확인

video 기능 감지 function supports_video() { return !!document.crealeElement('video').canPlayType; } 비디오 포맷은 Boolean으로 return하지 않고 다음과 같은 문자열을 return 합니다. "probably" : 브라우저는 이 포맷을 재생할 수 있다고 거의 확신합니다. "maybe" : 브라우저는 아마도 이 포맷을 재생할 수 있다고 생각됩니다. " ": 브라우저는 이 포맷을 재생할 수 없다고 확신합니다. 크롬에서 Video태그에 바로 m3u8 포맷이 재생되지 않는 경우가 발생될 수 있습니다. 원인은 크롬 및 기타 디바이스 환경에서 HLS를 완전히 지원하지 않기 때문에 발생합니다. 이 경우 HLS를 지원하는 iOS, Safari..

2021년 03월 30일
HTML5 비디오 자동 재생

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

2021년 03월 12일