html video 태그와 audio 태그, source 태그로 미디어 삽입하기

네 여러분, 이번 포스팅에서는 html 문서에 여러 가지 미디어를 삽입하는 방법에 대한 글을 써보겠습니다.

html로 작성이 된 웹페이지를 살펴보시면 오디오 파일이나 영상 파일이 존재하는 것을 본 적이 있을 겁니다.

이번 시간에는 그러한 것들을 어떤 식으로 삽입을 할 수 있는지에 관하여 알아보도록 하겠습니다.

그럼 지금부터 시작하도록 하겠습니다.

1. html에 비디오 삽입하기 : video 태그 이용

html에 비디오를 삽입을 하려면 video라는 태그를 이용을 하여 비디오 파일을 삽입합니다.

그 사용법은 이러합니다.

<video src="me.mp4" width="300" height="200" controls></video>

이런 식으로 가져올 비디오의 주소를 가져오고, 그걸 페이지 내에서 얼마의 사이즈로 띄울 것이며,

control이라는 속성을 이용하여 비디오를 제어를 합니다.

그리고 비디오가 재생이 되지 않을 때에는 '브라우저가 video 태그를 지원하지 않습니다.' 같은 문구로

오류에 대한 안내 메시지를 대신 띄워 알리기도 할 수 있습니다.

그럼 이를 어떤 식으로 쓰는지 간단한 예제 코드를 통하여 알아보도록 할까요?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>비디오 삽입</title>
</head>
<body>
    <h3>비디오 삽입</h3>
    <hr>
    <video src="media/bear.mp4" width="320" height="240" controls="">
            브라우저가 video 태그를 지원하지 않습니다.	
    </video>
    </ul>
</body>
</html>

이런 식으로 코드를 나타내면 bear라는 동영상 파일을 삽입을 할 수 있습니다.

그리고 control 속성을 통하여 비디오의 재생과 정지를 제어를 할 수 있으며,

만일에 이 비디오 파일이 지원이 되지 않는 환경이라면

'브라우저가 video 태그를 지원하지 않습니다.'라고 비디오 파일 대신에 글자를 띄워줍니다.

그럼 이 코드를 가진 웹페이지는 어떤 결과가 나오는지 같이 보실까요?

이렇게 곰 비디오 파일이 화면에 잘 떠서 있는 걸 보실 수 있습니다.

본인이 가지고 있는 비디오 파일이 있다면 한 번 그걸 가지고서 이렇게 시도를 해보시면 좋을 것 같습니다.

그리고 video 태그에서 사용하는 여러 가지 속성이 있는데, 그것도 간단히 제가 정리를 해보겠습니다.

기본적인 틀은 <video> 태그 안에 속성을 넣어서 사용을 합니다.

width, height : 재생할 비디오의 폭과 높이(사이즈 설정)
controls : 비디오의 재생, 정지, 재생시간, 음소거 등 제어 버튼을 만들어주는 속성
autoplay : 비디오가 로딩이 되면 즉시 재생이 되도록 하는 속성
loop : 비디오를 반복적으로 재생하게 해주는 속성
muted : 오디오를 끌 때 사용하는 속성

그리고 source라는 태그를 이용하여 비디오 파일을 출력할 수도 있습니다.

이 태그는 어떻게 사용을 하는지 한 번 같이 보실까요?

<source src="비디오의 url" type="비디오 파일의 마임 타입">

<!--
비디오의 타입 : mp4, webm, ogg, 각각의 타입은 video/mp4 같이 비디오의 마임 타입으로 나타냄.
-->

여기에서 마임 타입이란 우리가 사용하는 문서나 파일의 타입이 어떤 것인지 알려주기 위한 것,

다시 말해 파일의 다양한 메커니즘에 대하여 알려주는 것이라고 보시면 됩니다.

그리고 source 태그는 종료 태그를 굳이 붙이지 않아도 작동을 하는 태그라는 특징이 있습니다.

2. html 오디오 삽입

오디오 역시 비디오와 마찬가지로 audio 태그, 그리고 source 태그를 이용하여 삽입을 합니다.

그럼 각각의 예시를 같이 보실까요?

<audio src="오디오 파일의 url" 추가적인 속성값></audio>

<source src="오디오 파일의 url" type="오디오 파일의 마임 타입">

그리고 audio 태그에서 사용되는 속성들은 <video> 태그와 똑같지만, width와 height 속성은 굳이 사용할 일이 없기 때문에 쓰지 않는다는 특징이 있으며, source 태그를 사용하여 쓸 때는 audio/mpeg 등으로 type 속성에 작성을 합니다.

오디오 파일의 타입은 mp3, wav, ogg 파일 등이 있는데, 각각 audio/mpeg, audio/wav, audio/ogg로 나타냅니다.

그럼 이어서 간단한 예제 코드를 통하여 오디오를 어떻게 삽입을 하는지 한 번 알아볼까요?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>오디오 삽입</title>
</head>
<body>
    <h3>오디오 삽입</h3>
    <hr>
    재생 버튼을 누르면 음악이 연주됩니다.
    <audio src="media/EmbraceableYou.mp3" controls="" loop="">
            브라우저가 audio 태그를 지원하지 않습니다.	
    </audio>
</body>
</html>

이렇게 코드를 작성하게 되면 embraceable you라는 mp3 파일이 재생 버튼을 누르면

음악이 켜진다는 메시지와 함께 브라우저 창에 표시가 됩니다.

그리고 controls 속성이 있기 때문에 재생, 정지 버튼 등을 직접 조작을 할 수 있게 되고,

loop 속성을 썼기 때문에 웹 페이지가 열리고 오디오 파일이 로딩이 완료되면 자동으로 재생이 됩니다.

그럼 결과 화면은 어떻게 보이는지 한 번 같이 볼까요?

이렇게 오디오 파일이 같이 글과 뜨는 걸 보실 수 있습니다.

여기까지 html 파일에 미디어를 삽입하는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 우리가 html 파일을 작성할 때 좀 더 체계적으로 작성을 하게 해주는

시멘틱 웹에 대한 것을 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사합니다~

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

'html, css, 자바스크립트 > html' 카테고리의 다른 글

html 시멘틱 블록 태그 figure, details, summary 태그에 대하여 알아보기 (0)	2023.03.02
html header, nav, section, article, aside, footer 태그로 시멘틱 웹 구성해보기 (0)	2023.03.02
html target 속성에 대하여 알아보기 (0)	2023.03.02
html iframe 태그로 인라인 프레임 사용하기 (0)	2023.03.02
html a 태그로 하이퍼링크(하이퍼텍스트, 하이퍼미디어)와 다운로드 링크 만들기 (0)	2023.03.02

개발러 L의 뻔fun한 코딩

html video 태그와 audio 태그, source 태그로 미디어 삽입하기