html video
문서
- 미디어 입력 장치 사용 권한을 요청하며, 사용자가 수락하면 요청한 미디어 종류의 트랙을 포함한 MediaStream을 반환합니다
- IE 지원 안 함
blog
Capture Audio and Video in HTML5
- 소개하는 글
- getUserMedia()로 가는 길
- 시작하기
- 사진 찍기
- Applying Effects
- Web Audio API와 함께 getUserMedia 사용하기
- 결론
- Additional resources
Validating Video Uploads On The Frontend
Event
Method
Example
Example Playlist Files for use with HTTP Live Streaming
Building Custom Controls for HTML5 Videos
Video 에서 지정된 시간의 thumbnail 가져 오기
After Effects
- Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!
- promo 에서 사용
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets1.lottiefiles.com/private_files/lf30_amtyctks.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
Bodymovin - Export After Effects animations to HTML5
Adobe After Effects 사용 안내서 > 표현식 및 자동화
이슈
여려개 video tag 사용
결론
muted 적용 추가
자동 재생이 가능한 경우
- 이벤트 (click 등) 발생 시
- 비디오 내에 오디오 트랙이 없는 경우
- muted 속성 적용
- iphone 에서 playsinline 요소 추가
- 모바일일 때 해당 사이트를 즐겨찾기 한 경우
- 부모 frame 에게 자식 frame 에게 비디오 권한을 부여한경우
Property ‘playsinline’ does not exist on type ‘DetailedHTMLProps<VideoHTMLAttributes, HTMLVideoElement>'.
결론
typescript 은 cammelCase 을 사용한다
그래서 playsInline 으로 사용하면 된다
video bgColor 와 css backgroundColor 의 값은 같으나 다르게 보일때
Different video colour on different screens - rgb values and CSS
- video bgColor 를 재생하는 비디오를 css backgroundColor 로 교체하는 방법
SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
canvas.toDataURL()
- CORS를 통하지 않고, 다른 origin으로 부터 가져온 데이터들은 canvas에 그려지는 즉시 canvas는 오염됩니다
HTML5 video screenshot via canvas using CORS
- canvg.js를 사용
vidoe capture timeline 만들기
<video
onLoadedData={(e) => {
e.target.currentTime = 0;
}}
onSeeked={(e) => {
// canavas 를 이용한 캡쳐
e.target.currentTime = goTime // 이동할 sec
}}
>