클리엘
CLIEL LAB
클리엘
전체 방문자
오늘
어제
  • 분류 전체보기 (513)
    • Mobile (47)
      • Kotlin (47)
    • Web (84)
      • NestJS (9)
      • HTML5 & CSS3 (38)
      • Javascript (20)
      • TypeScript (6)
      • JQuery (11)
    • .NET (300)
      • C# (83)
      • ASP.NET (67)
      • Windows API for .NET (128)
    • Server (53)
      • SQL Server (10)
      • MariaDB (18)
      • Windows Server (6)
      • node.js (19)
    • System (12)
      • 작업LOG (12)
    • Review (11)
    • ETC (6)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 블로그 정리

인기 글

태그

  • android
  • node.js
  • asp.net core web api
  • .NET
  • exception
  • CSS3
  • JavaScript
  • c#
  • asp.net core
  • ASP.NET
  • 변수
  • LINQ
  • jQuery
  • Windows API
  • android studio
  • Entity Framework
  • HTML5
  • Kotlin
  • NestJS
  • MariaDB

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
클리엘

CLIEL LAB

[HTML5&CSS3] 비디오 태그
Web/HTML5 & CSS3

[HTML5&CSS3] 비디오 태그

2019. 9. 25. 10:50
728x90

비디오 태그는 웹상에서 동영상을 재생할 수 있도록 하는 태그입니다.

<body>
    <video controls="controls" src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"></video>
</body>

video태그에서 src는 동영상의 위치를 지정하는 속성으로 http://cliel.com/sample.mp4처럼 웹상의 경로나 /video/sample.mp4 와 같이 서버상의 경로를 지정할 수 있습니다.

 

또한 controls는 동영상 재생 시 컨트롤이 가능한 UI를 노출하도록 하는 속성입니다.

 

동영상 파일은 mp4(H.264 + ACC) 형식인 경우 모든 브라우저에서 지원이 가능하지만 현재 글을 작성하는 시간 기준으로 WebM(VP8+Vorbis)과 OGV(Theora+Vorbis)는 크롬과 파이어폭스, 오페라만 지원합니다. 따라서 브라우저별로 다른 형식을 재생해야 한다면 다음과 같이 source태그를 사용해야 합니다.

<body>
    <video controls="controls">
        <source src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
        <source src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.webm" type="video/webm">
    </video>
</body>

이때 source태그 안에 type속성은 생략해도 되지만 브라우저가 동영상을 모두 다운로드하여 재생가능 여부를 판별해야 하므로 되도록이면 type을 지정해 주는 것이 좋습니다.

 

이 밖에 poster 속성을 사용하면 동영상 재생 전 미리 지정한 이미지를 동영상 플레이어에 노출할 수 있고, preload를 통해 브라우저가 페이지를 로드할 때 동영상을 미리 다운로드할 수 있도록 지정할 수 있습니다.

 

또한 autoplay속성을 활용하면 동영상을 자동으로 재생할 수 있도록 지정할 수 있고, loop속성을 통해 동영상 재생을 반복할지 여부를 지정할 수 있습니다.

 

마지막으로 width와 height속성은 동영상 컨트롤의 크기를 설정하는 속성입니다.

<body>
    <video controls="controls" poster="https://file-examples.com/wp-content/uploads/2017/10/file_example_JPG_100kB.jpg" autoplay="autoplay" loop="loop" width="300" height="300">
        <source src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
        <source src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.webm" type="video/webm">
    </video>
</body>

 

728x90
저작자표시 비영리 변경금지

'Web > HTML5 & CSS3' 카테고리의 다른 글

[HTML5&CSS3] 그룹및 공간관련 태그  (0) 2019.09.30
[HTML5&CSS3] 입력관련 태그  (0) 2019.09.27
[HTML5&CSS3] 오디오태그  (0) 2019.09.23
[HTML5&CSS3] 이미지관련 태그  (0) 2019.09.20
[HTML5/CSS3] 테이블 (Table)  (0) 2019.09.20
    'Web/HTML5 & CSS3' 카테고리의 다른 글
    • [HTML5&CSS3] 그룹및 공간관련 태그
    • [HTML5&CSS3] 입력관련 태그
    • [HTML5&CSS3] 오디오태그
    • [HTML5&CSS3] 이미지관련 태그
    클리엘
    클리엘
    누구냐 넌?

    티스토리툴바