하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

7. VIdeo 태그

페이지 정보

작성자 관리자 댓글 0건 조회 446회 작성일 22-02-12 17:03

본문

7. VIdeo 태그


video는 HTML 문서에 동영상을 삽입하는 태그입니다. 

HTML 5에서 추가된 것이므로, HTML 5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다.


<video autoplay controls loop muted poster="aaa" preload="bbb">

  <source src="xxx" type="yyy">

  zzz

</video>


autoplay : 동영상을 자동으로 재생합니다.

controls : 재생, 정지 등 조작 메뉴를 보여줍니다.

loop : 동영상을 반복 재생합니다.

poster : 동영상 재생 전에 보여줄 이미지입니다.


preload : 페이지를 열 때 무엇을 로드할지 정합니다.

auto : 동영상, 메타데이타 모두 로드합니다.

metadata : 메타데이타만 로드합니다.

none : 로드하지 않습니다.


source

src : 동영상 위치를 입력합니다. 웹브라우저가 가장 많이 지원하는 형식은 MP4입니다.

type : 동영상 타입을 알려줍니다. 만약 MP4 파일이라면 video/mp4라고 적습니다.

zzz : 웹브라우저가 video 태그를 지원하지 않을 때 출력될 텍스트입니다.


상충되거나 혼자서는 작동하지 않는 속성이 있습니다. 예를 들어 autoplay로 정하면 preload는 무시됩니다. 크롬 등 일부 웹브라우저에서는 muted와 autoplay를 같이 사용해야 자동 시작이 작동합니다.


예제 1


Clouds.mp4라는 동영상을 HTML 문서에 삽입합니다.

페이지가 로드되면 동영상이 자동 재생되고, 반복하여 재생됩니다.

재생, 정지 등 조작 메뉴가 보이지 않습니다.

IE 8 등 video 태그를 지원하지 않는 웹브라우저에서는 'Your browser does not support the video tag.'를 진하게 출력합니다.

크기, 배치 등은 CSS로 조절하는 것이 좋습니다.

<!doctype html>

<html lang="ko">

  <head>

  <meta charset="utf-8">

    <title>HTML</title>

    <style>

      video { max-width: 80%; display: block; margin: 20px auto; }

    </style>

  </head>

  <body>

    <video muted autoplay loop>

      <source src="videos/Clouds.mp4" type="video/mp4">

      <strong>Your browser does not support the video tag.</strong>

    </video>

  </body>

</html>


예제 2


페이지가 로드되면 Clouds.png라는 이미지와 재생 메뉴를 보여줍니다.

재생 버튼을 클릭하면 동영상을 재생합니다.

<!doctype html>

<html lang="ko">

  <head>

  <meta charset="utf-8">

    <title>HTML</title>

    <style>

      video { max-width: 80%; display: block; margin: 20px auto; }

    </style>

  </head>

  <body>

    <video controls poster="videos/Clouds.png">

      <source src="videos/Clouds.mp4" type="video/mp4">

      <strong>Your browser does not support the video tag.</strong>

    </video>

  </body>

</html>


참고사이트 


<video>: The Video Embed element - HTML: HyperText Markup Language | MDN (mozilla.org) 

댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.