[HTML5] #Video Tag

HTML5 Video Tag

Video Element

• HTMLMediaElement를 상속 받음 + videoWidth, videoHeight 속성 추가.
• videoWidth, videoHeight : 실제 비디오의 해상도 크기.

preload

• “none” : 재생 전에 다운로딩 안함.
• “metadata” : 재생 전에 포스터 같이 한장만 띄워둠.
• “auto” : 재생 전에 다운로딩 ㄱㄱ.

IDL(Interface definition language)

• currentSrc : 현재 재생 중인 src
• loadedmetadata 이벤트가 발생한 이후에 currentSrc를 신뢰할 수 있다.
• 캐시에 따라 미디어 URI가 변경되지 않으면 일부 이벤트 발생 안할 수 있기 때문에

상태 속성 (videoElement.상태속성)

• readyState
• HAVE_NOTHING(0) → 아무 정보가 없는 상태.
• HAVE_METADATA(1) → 미디어에 대한 해상도, 디코딩, 재생시간 등이 정해졌을 때.
• HAVE_CURRENT_DATA(2) → 디코딩은 되었으나 재생할 상태 아니거나, 끝부분에 도달.
• HAVE_FUTURE_DATA(3) → 다음 재생 프레임까지 디코딩된 상태.
• HAVE_ENOUGH_DATA(4) → 네크워크도 좋고 버퍼링을 위해 멈추지 않아도 되는 상태.

• networkState
• NETWORK_EMPTY(0) → currentSrc 설정 안됨.
• NETWORK_IDEL(1) → currentSrc는 설정 되고, 미디어 가져올 수 있지만 사용자 동작 기다림.
• NETWORK_LOADING(2) → 미디어 데이터 다운로드 상태.
• 다운로드 시작 → loadstart 이벤트 발생.
• 다운로드 중단 → stalled 이벤트 발생.
• NETWORK_NO_SOURCE(3) → currentSrc 지정되었지만 로딩 실패, URL 잘못 됨.

---

Source Element

type 속성

• type : VideoElement.canPlayType(값) 으로 받을 수 있음.
• 값으로는 MIME 타입이 들어감 “video/mp4, video/ogg, video/webM 같은 것.

---

---

Video Tag 재생 시 순서 & 이벤트 순서(Fragment mp4 재생 시)

1. Element 생성 및 Attribute(control, preload, autoplay 등) & 이벤트 리스너 등록(20개 정도).
2. MediaSource 생성 및 리벤트 리스너 등록(open, close, error).
3. MediaSource Open 이벤트 발생시 SourceBuffer 생성.
4. SourceBuffer 생성시 MediaSource.addSourceBuffer(codec정보).
5. loadstart 발생 load할 준비 및 미디어데이터 찾기 돌입.
6. SourceBuffer에 InitSegment 생성하여 추가.
7. InitSegment 추가하면 durationChange, resize, loadedmetadata 발생.
8. mediaSegment 추가하면 loadeddata 발생.
9. canplay발생.
10. canplaythrough 발생.
11. play시켜주면서 play 발생.
12. 주기적으로 timeupdate 발생.
13. 주기적으로 progress 발생.
14. 네트워크가 좋지 않을 경우, waitng 발생.
15. 3초이상 받지 못하면 stalled 발생.