Video 태그 속성 - Video taegeu sogseong

<video>

목차 Show

그외 video 태그의 속성들
마무리 속성 정리
video 태그
video 태그
video 태그 사용 방법
video 태그에 사용하는 속성

<source src="경로/동영상명.mp4" type="video/mp4">

</video>

동영상을 추가하고 싶으면,

video 태그를 적어주면 된다.

src 는 비디오 파일의 주소를 적어주면 된다. 경로는 해당 폴더명을 적어주면 된다.

video 태그의 poster는 비디오를 재생하기 전의 썸네일이미지를 추가해 준다.

그외 video 태그의 속성들

</video>

width와 height 속성으로 동영상의 너비와 높이를 조절할 수 있다.

<vidoe>

autoplay -> 자동 재생

controls -> 컨트롤 막대라고 해서

이미지에보면 점선으로 표시해둔 부분이 컨트롤 막대다.

재생, 음량조절, 다음 영상으로 이동 등이 컨트롤 막대에 나타난다.

</video>

loop - 동영상을 반복 재생해 준다.

마무리 속성 정리

HTML

video 태그

video태그는 웹페이지에 영상파일을 재생할 때 사용합니다.
예전에는 웹페이지에 동영상을 재생하기 위해 외부 프로그램을 설치하는등 복잡한 과정이 필요했으나
지금은 video태그로 간단하게 이를 구현할 수 있습니다.

video 태그 사용 방법

<video src='동영상의 주소'>
    웹브라우저가 video태그를 지원하지 않을 때 표시할 문구
</video>

비디오 태그는 여러 속성을 사용할 수 있습니다.

video 태그에 사용하는 속성

src : 비디오 파일의 주소
controls : 컨트롤러 표시
autoplay : 자동 재생
loop : 반복 재생
width : 영상의 가로길이
height : 영상의 세로길이
muted : 음소거

예제를 통해 확인하겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>video 태그</title>
</head>
<body>
<video src='/material/internal/video/disneyTour.mp4' width='400' controls autoplay>
    해당 브라우저는 video 태그를 지원하지 않습니다.
</video>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

위의 코드에 대한 결과 입니다. (모바일 데이터에 주의하세요.)

해당 브라우저는 video 태그를 지원하지 않습니다.

아래는 HTML5의 Video 태그의 사용 방법과 예제 등 다양한 내용을 정리하였습니다.

# Video 태그는?미디어 파일인 비디오나 오디오 등을 재생하기 위해서 HTML5부터 새롭게 추가된 API가 바로 Video 그리고 Audio입니다. 이 둘은 실제로 거의 비슷한 메소드와, 프로퍼티를 가지고 있습니다. 여기서는 Video 태그에 대하여 알아봅니다.

! Video 태그의 특징은?
video 태그는 다양한 포맷을 지원하며 비디오 영상을 쉽고 간단하게 재생할 수 있습니다. video 태그를 사용해 다양한 브라우저 및 환경에서 재생 가능합니다.

Video 태그를 사용하는 방법은 간단합니다. 아래와 같이 적용합니다. 만약 a.mp4라는 파일을 재생한다면 아래와 같이 두 가지 방법을 사용합니다.

위에 코드처럼 src 프로퍼티를 사용하는 방법과 내부의 <source>태그를 사용할 수 있습니다. 두 가지 방법 모두 많이 사용되는 방법입니다.

! video 태그 자동 재생 방법video 태그에 autoplay 속성을 사용하여 자동재생이 가능합니다. 즉 방문자가 웹페이지에 접속하면 자동으로 영상이 재생되게 됩니다.

이 방법은 일반적인 경우에는 자주 사용되지 않지만 웹페이지의 백그라운드 배경에서 영상 재생시 주로 사용됩니다. 다만 모바일 환경에서 자동 재생이 안될 수 있습니다. 관련 내용은 하단의 모바일 자동 재생에서 참고하세요.

! video 태그 속성 및 메소드 와 프로퍼티
video 태그에서 사용되는 자주 사용되는 메소드와 프로퍼티는 다음과 같습니다.

@ video 태그 속성
src // 파일 소스의 정보 추가하기
controls // 시작, 정지 등등 컨트롤러 사용하기
loop // 반복 재생 설정하기
muted // 음소거 사용 설정하기
autoplay // 자동재생 설정하기
playsinline // 아이폰 인라인 재생 허용하기

[ playsinline ]
iOS, 아이폰의 경우 영상 재생이 자동으로 풀스크린 화면이 나타나게 됩니다. 이때 이 옵션을 사용해 자동 풀스크린을 제거하고 인라인 플레이가 가능하게 설정할 수 있습니다.

! 메소드 정보아래는 video 태그 메소드 정보입니다.
play() // 영상 재생하기
pause() // 영상 멈춤, 정지

! 프로퍼티 정보아래는 vidoe 태그 프로퍼티 정보입니다.

# 이슈사항과 해결방안
아래는 Video 태그를 적용하면서 나타날 수 있는 다양한 정보들입니다.

! video 태그의 소스 src를 다이나믹하게 바꾸는 방법만약 video 태그의 소스를 a에서 b로 바꾸는 경우 실제 웹에서 재생되지 않거나 에러가 나타날 수 있습니다. 이 경우 어떻게 해결할 수 있을까요?

이슈상황을 확인하기 위해서 코드를 재현해보고자 합니다. 먼저 아래와 같은 video 태그가 있습니다.

이제 a.mp4 영상을 자바스크립트에서 b.mp4로 바꾸어보려고합니다. 아래와 같이 코드를 작성하고 실행해봅니다.

let _video = document.querySelector('#testVideo');
_video.src = 'b.mp4';

_video.play(); // 에러가 발생할 수 있음

브라우저의 소스 보기를 사용하면 b.mp4로 바뀐 모습이 나타납니다. 하지만 실제 재생해보면 에러가 발생할 수 있습니다. 이 때 어떻게 해결할 수 있을까요? 가장 중요한 부분은 load() 메소드를 사용하여 비디오 정보를 다시 로드하는 것입니다. 이제 아래처럼 load()를 추가해 다시 작성해보겠습니다.

let _video = document.querySelector('#testVideo');
_video.removeAttribute('src'); // src 프로퍼티를 제거
_video.src = 'b.mp4'; // 다른 미디어로 소스 변경
_video.load(); // 새로운 정보를 다시 로드

_video.play(); // 잘 동작함

이와 같이 해결되었습니다.

! 모바일에서 자동재생이 안되는 문제모바일에서는 autoplay를 사용해도 자동재생이 되지 않습니다. 그 이유는 모바일 브라우저의 정책에 따라 자동재생이 막혀있기 때문으로 자동재생을 하려면 무음으로 실행해야 합니다. 즉 muted를 동시에 사용해야만 자동재생이 가능합니다. 아래의 코드처럼 사용합니다.

이제 모바일 환경에서 확인하면 자동재생되는 것을 알 수 있습니다.

# 기타 팁과 정보예전에는 비디오와 같은 미디어 재생을 위해서 iframe이나 embeded 태그를 사용하였습니다. 하지만 HTML5 이후부터는 video 태그를 사용하는데 편리한 메소드와 프로퍼티를 많이 가지고 있어 이벤트 등의 제어등에 매우 간단하여 코드도 간결해졌습니다.