video 태그에 대해 알아보자(닫는 태그, src속성, autoplay, poster)

1. 닫는 태그

img태그와 다르게 video태그는 닫는 태그가 있고 안에 내용을 쓸 수 있다.

내용은 비디오를 지원하지않는 브라우저에서 보여주는 에러 문구를 작성하는 경우가 많다. 

 

2. 선택사항인 src속성

video태그에서 src속성은 선택사항이여서 src속성을 쓰지 않아도 된다. 하지만 src속성을 사용하지 않으면 source 태그를 video태그 안에 쓰고 source태그 안에 src속성을 줘서 비디오를 보여줄 수 있다

 

3. 새로고침해도 잘되는 autoplay

controls 속성으로 비디오 컨트롤을 보여줄 수 있고 autoplay로 자동재생도 시켜줄 수 있다. 하지만 autoplay로 자동재생 시킬때 새로고침하면 동영상이 자동재생 되지 않고 멈춰있는 걸 볼 수 있다.

 

이렇게 되는 이유는 소리가 나오기 때문이라서, muted 속성도 같이 적어주면 해결되는데 그럼 새로고침해도 자동재생이 잘 된다.

 

4. 영상 첫 화면을 보여주는 poster

poster 속성으로 보여줄 썸네일을 정할 수 있고 poster속성이 없다면 썸네일로 영상 첫 화면을 보여준다.

 

 

---

 

video 태그에 대해서 더 잘 알고싶다면 아래 링크를 클릭하자

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video

<video>: 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN