# **web api - video**
저자: 마장홍선 ghdtjs0417
1. ## video 태그
2. - src attri를 사용하면 해당 src에 대해서만 로딩을 시도한다.
3. ### video의 src를 동적으로 추가하기
4. - src
4.1. - js로 동적으로 바꿔도 된다.
4.1.1. - 자동으로 바꾼 src로 영상을 시작한다.
4.2. - currentSrc라는 getter 존재
5. - loop
5.1. - 해당 attri가 설정돼있으면 영상이 끝나면 자동으로 재시작한다.
5.1.1. - 유튜브는 기본적으로 이 설정을 지원하지 않지만 설정하면 자동재생이 된다.
6. - width, height
6.1. - css 픽셀 단위로 나타냄 (device 픽셀 단위 아님)
6.2. - 영상 src와 설정한 width, height가 다를 경우 영상이 잘린다.
6.2.1. - 어떻게 잘리나?
6.2.2. - 제어 가능한가?
7. - played
7.1. - 재생된 영역
8. - preload
9. ### video 태그 안에 올 수 있는 태그 요소들
10. - 영상을 재생할 수 있을 때 (브라우저가 video 태그를 지원)
10.1. - sorce 태그
10.2. - track 태그
10.2.1. - 자막
11. ### HTMLVideoElement 인터페이스를 구현하고 있음
12. ## my video playground
13. - 각 이벤트마다 어떤 이벤트인지 설명하기
14. - src 입력할 폼 생성
15. - youtube는 video 소스를 온라인으로 가지고 올 수 가 없네
15.1. - video tag의 src에 youtube 영상을 넣을 수가 없다.
15.2. - youtube 영상을 다른 웹페이지에 넣을 수 있는 방법은 iframe을 이용해야 한다.
15.3. - youtube는 안된다!
16. - 영상 가져올 수 있는 예시 링크를 주면 좋을 듯
17. - 브라우저 지원 controls 사용하지 않고 custom으로 만들어보자
18. - 자동 시작
18.1. - 클라이언트에 자동 시작 여부 정보를 저장해두어야 한다.
18.2. - 기본으로 자동 시작 설정은 false인데, 클라이언트에 저장된 정보가 있다면 해당 정보를 사용하도록 하자.
19. - 배속 설정
20. - 자막?
21. - 음량 조절
22. ### 유튜브, 네이버는 우클릭시 나오는 ui를 커스터마이징했다.
23. ### 영상 타이머에서 드래그했을 때 해당 위치의 화면을 실시간으로 보여주기
24. ### video 태그 안의 src attri와 video 태그 자식으로 source 태그를 사용하는 것의 차이
25. - source 태그를 사용하면 같은 영상에 대해 여러 확장자에 대해서 대비할 수 있다.
25.1. - 유튜브, 네이버 모두 이렇게까지 하지 않는 것 같다.
26. ### video 태그에 쓰이는 attributes
27. - controls
27.1. - 해당 attri를 설정하면 브라우저에서 기본으로 제공하는 영상 컨트롤 ui를 사용할 수 있다.
27.1.1. - 유튜브같은 곳은 자신만의 컨트롤러를 만들었기 때문에 당연히 설정하지 않았을 것
27.1.2. - 유튜브에서 이 설정을 활성화시키면 자기네 것과 중복돼서 보여지게 된다.
28. - autoplay
28.1. - 영상이 재생가능해지면 재생 시작(페이지가 모두 로딩되지 않더라도 시작)
28.1.1. - 유튜브는 영상 자동 시작이지만 이 설정을 사용하지 않는다.
28.1.2. - 자체적으로 이벤트를 걸어서 사용하는 듯 하다.
28.1.2.1. - 영상 재생 가능 이벤트는 뭘까?
28.1.3. - 재생 가능해지면의 기준이 좀 높은 듯 한데? 이래서 유튜브에서는 자체 자동 재생을 사용 하는 듯 하다.
29. - buffered
29.1. - 버퍼에 들어가있는 영역
30. - muted
30.1. - 설정하면 음소거 모드가 된다. (영상과 함께 저장돼있는 음성은 재생하지 않는다.)
31. - poster
31.1. - 영상이 재생되기 전까지 보여질 이미지
31.1.1. - 영상을 멈추면?
31.1.1.1. - poster가 띄워지지 않고 멈춘 장면이 보인다.
31.1.1.1.1. - 멈췄을 떼, poster를 보여주고 싶으면 어떻게 하지?
31.1.2. - src는 없고 poster만 있다면 영상 재생은 할 수 없고, poster 이미지만 보인다.
31.1.2.1. - poster도 없으면?
31.1.2.1.1. - video 태그 안의 컨텐츠와 무관하게 까만 화면이 뜬다. (브라우저마다 조금씩 다를 듯)