구글 크롬에서의 video autoplay가 되지 않을때

오랜만에 <video> 태그를 쓸일이 있어 사용하다 보니 크롬에서 autoplay가 먹지 않는다.

 

이유를 알아보니 구글 정책이 바뀌면서 소리가 들어가는 영상에서는 autoplay가 먹지 않는다.

 

다행히도 이번 작업에서의 소리가 필요가 없어 muted를 넣음으로 인해 autoplay가 구동 된다.

 

항상 유튜브 영상만 불러오다보니 <video> 태그를 쓸일이 없었는데 이참에 또 다른 지식을 하나 얻은 느낌이다. 아니면 내가 이젠 시대에 뒤쳐져 있거나 이참에 <video> 태그에 대해 간략히 정보만...

 

<video> 태그는 html 에서 비디오를 볼수 있게 할 수 있는 태그 이며 지원 형식은 MP4, WebM, OGG파일이다.

 

이벤트 옵션으로는

autoplay     자동재생

    <video autoplay  muted>  //크롬에서 autoplay를 쓰려면 muted를 같이 써줘야 한다.

        <source src="video.mp4" type="video/mp4">

    </video>

 

controls      비디오 컨트롤러 표시

    <video controls>

        <source src="video.mp4" type="video/mp4">

    </video>

 

loop            비디오 자동 반복

    <video autoplay  muted loop> 

        <source src="video.mp4" type="video/mp4">

    </video>

 

muted         음소거

    <video muted>

        <source src="video.mp4" type="video/mp4">

    </video>

 

poster         비디오 로딩 또는 재생버튼을 누르기 전까지 나올수 있게 하는 이미지

    <video 

controls poster="images.jpg"

> 

        <source src="video.mp4" type="video/mp4">

    </video>

 

preload       문서가 로드가 될때 같이 로드를 할것인지에 대한 내용

    <video controls preload="none">

        <source src="video.mp4" type="video/mp4">

    </video>

     속성값

        auto                문서가 로드될때 비디오도 같이 로드

        metadata        문서가 로드될때 메타데이터만 로드

        none               문서가 로드될때 비디오는 로드 되어서는 안됨