안녕하세요.
이번 포스팅에서는 영상을 표시하는 <video></video> 태그에 대해 알아보겠습니다.
<img/> 태그와 유사하게 <video></video> 태그도 src 속성을 이용해 재생할 비디오 경로를 지정할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<video
width="400px"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
</body>
</html>동영상 크기가 커지는 것을 방지하기 위해 <img/> 태그처럼 width 속성을 지정해주면,
이렇게 까만 화면이 나타난 것을 볼 수 있습니다.
이런 현상이 나타나는 이유는 영상이 재생되지 않고 멈춰진 상태로 있기 때문입니다.
만약 영상을 화면이 로딩되자마자 재생하고 싶다면 autoplay 와 muted 속성을 설정하면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<video
autoplay
muted
width="400px"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
</body>
</html>
autoplay는 자동 재생을 허용하는 것이고, muted는 영상을 음소거 시키는 속성인데, 이 두 속성을 함께 사용하는 이유는 원치 않는 영상이 자동 재생되는 것을 방지하기 위해서입니다.
그렇다고 아예 자동 재생이 안되게 할 수는 없으니 음소거를 시킨 상태에서만 자동 재생이 되게끔 만들어 놓은 것입니다.
크롬은 물론 파이어폭스에서도 이와 같은 정책이 적용되니, 자동 재생이 필요한 영상이라면 위와 같이 muted 속성을 함께 추가 해주는 것이 좋습니다.
하지만 만약 자동 재생을 쓰지 않을 것이라면 일반적으로 사용자가 영상을 재생할 수 있는 방법은 없습니다.
이때는 controls 속성을 추가해주면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<video
controls
width="400px"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
</body>
</html>
그러면 이렇게 브라우저가 제공하는 기본 컨트롤러가 표시되고, 사용자는 음량, 전체화면, 재생, 정지 등의 동작을 수행할 수 있습니다.
하지만 여기까지 보셨으면 의문을 가져야 합니다.
<video></video> 태그는 왜 끝 태그가 존재하는 걸까요?
그 이유는 <video></video> 태그에 내용을 넣을 수 있기 때문입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<video
controls
width="400px"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
지원하지 않는 브라우저입니다
</video>
</body>
</html>첫 번째 사용 예는 위와 같이 브라우저가 영상 형식을 지원하지 않을 경우 표시할 문구를 적는 것입니다.
비디오 형식은 다양한 종류가 있는데, 모든 브라우저가 모든 형식의 영상을 재생할 수 있게 해주지는 않습니다.
아래는 위키피디아 HTML 5 Video 문서에서 가져온 테이블입니다.
간단하게 이야기하면 mp4 형식이 가장 많은 브라우저와 호환된다는 이야기긴 합니다만,
혹시 브라우저가 지원을 안 할 경우를 대비해서 여러 형식의 동영상을 준비해둘 수도 있겠죠.
그럴 경우 <source/> 라는 태그를 이용해 아래와 같이 여러 동영상 형식을 지정할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<video
controls
width="400px">
<source src="동영상.mp4"/>
<source src="동영상.ogg"/>
지원하지 않는 브라우저입니다
</video>
</body>
</html>이렇게 하면 위에서 부터 순서대로 동영상 형식을 확인하며 재생 가능한 형식을 찾을 경우 그 형식대로 영상을 보여주고, 모든 영상이 재생 불가능하다면 지원 불가 메시지를 보여줍니다.
'Frontend 기본' 카테고리의 다른 글
| HTML 태그 - <input> 기본 (0) | 2022.08.11 |
|---|---|
| HTML 태그 - <table> (0) | 2022.08.10 |
| HTML 태그 - <img> (0) | 2022.08.08 |
| HTML 주석과 개발자 도구 (0) | 2022.08.05 |
| HTML 태그 - <ol>, <ul>, <dl> (0) | 2022.08.04 |