HTML5 Multimedia - Video Elements

1. Video Elements

 

- 별도의 플러그인 설치를 필요로 하지 않는 동영상 자료를 표시

- Control API 제공

 

src	비디오 자원의 경로지정 <source> 사용 시 생략
width	표시되는 요소의 넓이
height	표시되는 요소의 높이
poster	포스터 이미지를 지정함 (영상이 없을 때, 시작 전에 보여지는 이미지) 영상의 크기와 동일한 크기의 이미지를 준비한다.
controls	컨트롤 패널을 표시함
autoplay	로드되면 자동 재생함
loop	반복 재생함 / loop="3"
type	비디오 코덱 정보를 지정
muted	비디오 사운드 제거
preload	영상을 로딩하면서 재생이 동시에 이루어짐 (필수)

<video src="./movie/movie1.mp4" poster="./images/po.jpg" controls preload>

/* 크로스 브라우징을 위한 문법 */
<video width="400" height="240" controls preload>
    <source src="movie/movie1.mp4" type="video/mp4">
    <source src="movie/movie1.ogv" type="video/ogg">
    <source src="movie/movie1.webm" type="video/webm">
    <p>Your browser is old. <a href="movie/movie1.mp4">Download this video instead.</a></p>
</video>

* 웹접근성 위배

- 소리가 있는 영상에 대한 autoplay

- 소리가 있는 영상에 대한 loop

 

비디오 파일의 타입/종류별 주의사항
- 비디오를 재생하기 위해서는 코덱이 필요함.
- 코덱의 종류의 따라 [ mp4 / avi / mov / flv / f4v / ogv / webm / asf / mkv ··· ] 다양한 확장자가 있음.
- 브라우저마다 지원 코덱이 다름. 브라우저의 코덱 지원 여부에 따라 play가 결정됨.

Can I Use
https://caniuse.com/?search=video

 

 

대표 브라우저 별 사용 가능 확장자

크롬	mp4 / webm / ogv
사파리	mp4 / webm
익스	mp4
엣지	mp4 / webm / ogv
파이어폭스	mp4 / webm / ogv
오페라	mp4 / webm / ogv

* 브라우저가 코덱을 지원하기 위해서는 비용이 들기 때문에 수시로 변경될 수 있음 (mp4가 비싸다고 한다... tmi)

 

 

 

＊ 브라우저가 사용하는 대표 코덱

mp4	MPEG-4 / H.264
ogv	Ogg / Theora
webm	WebM

 

 

＊ 비디오 파일 변환 사이트

https://convertio.co/kr/mp4-webm/

온라인에서 무료로 MP4를 WEBM로 변환합니다 — Convertio

https://ko.cloud-converter.com/Convert-to-WebM

Convert to WebM, YouTube 를 WebM - 무료 WebM 변환기 - 변환에WebM - YouTube 를 WebM - 무료 WebM 변환기 온라인

 

 

* ogv파일 변환

ffmpeg2theora-0.27.exe

2.63MB

 

 

유튜브 동영상 다운로드 : 주소 앞에 ss 추가 / https://www.ssyoutube.com/watch?v=