반응형
비디오 기본 태그
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
해당 브라우저에는 지원되지 않습니다.
</video>
* video 내부에 넣은 문구는 영상이 뜨지 않을시 출력되기 때문에 위 태그와 같이 그대로 사용해도 무관하다. 또한 빨간표시된 부분은 본인 영상에 맞도록 수정하여 적용하자.
Video 선택적 속성
| Attribute | Value | Description |
|---|---|---|
| autoplay | autoplay | 비디오가 준비되는 즉시 재생되도록 지정 |
| controls | controls | 비디오 컨트롤을 표시하도록 지정한다(예: 재생/일시 중지 버튼 등) |
| height | pixels | 비디오 플레이어의 높이 설정 |
| loop | loop | 비디오가 완료될 때마다 다시 시작하도록 지정 |
| muted | muted | 비디오의 오디오 출력을 음소거하도록 지정 |
| poster | URL | 비디오를 다운로드하는 동안 또는 사용자가 재생 버튼을 누를 때까지 표시할 이미지를 지정하십시오. |
| preload | auto metadata none |
페이지가 로드될 때 비디오 로드 여부 및 방법 지정 |
| src | URL | 비디오 파일의 URL 지정 |
| width | pixels | 비디오 플레이어의 너비 설정 |
브라우저별 지원 및 확장자
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES from Firefox 21 from Firefox 30 for Linux |
YES | YES |
| Safari | YES | NO | NO |
| Opera | YES From Opera 25 |
YES | YES |
video 태그는 이벤트 속성도 적용이 된다고 한다. 자세한 내용은 하단 페이지를 참고
HTML Event Attributes
HTML Event Attributes Global Event Attributes HTML has the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element. To learn more about programming events, please visit our JavaScript tutorial. Below
www.w3schools.com
웹, 모바일에 동영상 태그 적용시 활용할 수 있다. 동영상 업로드 플랫폼인 유튜브, 비메오 등이 있는데 별도의 경로만 가지고 있다면 태그를 활용하여 노출도 가능하다. 다음에 시간이 되면 업로드 플랫폼없이 영상을 등록하는 방법에 대해서 알려줄 예정이다. 모두 화이팅!
본 게시글이 도움이 되셨다면 로그인 없이 클릭 가능한 ♥ 공감 버튼 클릭 부탁드립니다 :)
"당신의 하루가 별보다 빛나길"
반응형
'WEB·MOBILE- HTML > HTML&CSS' 카테고리의 다른 글
| 임시 인터넷 파일 캐싱을 위한 방지 방법! html,css,javascript (0) | 2020.01.24 |
|---|---|
| HTML5 video 태그 컨트롤바 및 설정값 보기 (0) | 2020.01.14 |
| HTML text 관련 css 스타일 (줄바꿈 및 글자 자르기, 점선 표시 등) (0) | 2019.12.10 |
| HTML 특수문자 메뉴보기 (0) | 2019.12.06 |
| HTML 퍼블리싱 코딩할 시 편리하게 CSS 스타일, jQuery, javascript 정리하기 (0) | 2019.10.08 |