html5에서 비디오 구현하기, 동영상종류, 브라우저 지원 현황

*비디오 콘트롤러 보이기.

video src="파일위치" controls="controls">

controls는 속성과 값이 같으므로 controls 하나만 적어도된다.

<!-- 비디오 넣을시는 이런식으로 작성 -->
<video src="video/vivaldi.mp4" controls >
   <p>이 브라우저는 video 요소를 지원하지 않습니다.</p>
</video>

p태그로 지원하지 않는 브라우저에서는 에러 문구를 볼수 있게 작성한다.

 

<video controls >
   <source src="video/vivaldi.ogv" type-"video/ogv"/>
   <source src="video/vivaldi.mp4" type-"video/mo4"/>
   <source src="video/vivaldi.webm" type-"video/webm"/>
   <p>이 브라우저는 video 요소를 지원하지 않습니다.</p>
</video>

구형 브라우저나 또는 지원하지 않는 브라우저에서도 그 브라우저가 지원하는

다양한 포멧으로 적어서 볼수있게 된다. (인코딩은 새로 해줘야함)

 

*자동 재생

<video controls autoplay >

위처럼 autoplay를 쓰면 브라우저 열자마자 재생된다.

※소리가 있는 영상은 자동재생하면 안된다. 웹접근성 어긋남

(장애인등이 싸이트에 텍스트를 듣고 알수있는데 영상 소리로 인해 방해된다.)

비디오에서 오디오를 빼고 하던가 뒤에 muted들 써준다.

<video controls autoplay muted >

반드시 자동 재생 하려면 소리를 빼야한다.

 

*반복 재생

<video controls loop>

loop를 적어준다.

 

*영상 대표 화면 설정(스틸컷)

<video controls poster="파일위치/파일이름.이미지확장자">

 

*영상 시작 방식

<video controls preload="auto">

기본적으로 비디오나 오디오가 다운로드가 다 된 뒤에 재생이 되는데

preload="auto"를 써주면 미리 뒤에 값까지 다운로드 하기때문에 실시간 재생가능