[ HTML ] 비디오 태그 자동재생 관련 옵션

인스타그램 api를 연동하면서 생각못했는데 비디오가 있더구만...
그래서 새로 비디오 태그 작업을 하게 되었다 👀
영상을 넣는데 어려울건 없었지만 알아야할 사항들이 몇가지 있었다.

W3CSchool 비디오 태그 - https://www.w3schools.com/tags/tag_video.asp

해당 문서를 보면 알다시피 비디오 태그는 아래처럼 작성해주면된다.
이미지 태그와 별반 다를게 없다. 

<video width="320" height="240" >
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

하지만 내가 메모하려는 정보는 옵션부분이다.
문서에도 있듯 비디오태그에는 여러 옵션이 있다.

 

우선 나는 autoplay를 해주고싶었다. 그리고 문서에 설명되어있는 것 처럼

autoplay를 작성해주었지만 실행되지 않았다.

검색해본 결과 autoplay를 원할 경우 mute 속성과 함께 사용해주어야한다.

 

두번째로는 ios에서의 문제였다.

비디오태그를 사용하니 ios에서는 전체화면으로 자동재생 되고 있었다.

해당 문제에 관한 옵션은 playsinline속성을 추가해 처리 할 수 있다.

 

결과만 말한다면 비디오태그를 사용해 자동재생을 원한다면

우리는 옵션으로 autoplay mute playsinline 이 세가지의 옵션을 추가해주어야한다 :)