[HTML] 아이폰 모바일(safari)에서 비디오 자동 재생(autoplay)이 안 될 때 해결법

<video autoplay loop muted>
	<source src="./01.mp4" type="video/mp4">
</video>

이런 식으로 video 태그를 사용한 뒤 테스트를 해봤는데 아이폰에서만 작동이 되지 않는다.

찾아보니까 muted 기능을 넣으라는 말이 있는데 나 같은 경우는 그걸 넣어도 전혀 재생되지 않았다.

 

그래서 찾아본 결과! 

https://medium.com/code-divoire/autoplaying-inline-videos-on-iphone-ios-10-using-angular-d4e2ea ba2164 

Autoplaying inline videos on iPhone iOS 10 using Angular

iOS 10부터 모바일(iPhone 및 iPad)의 Safari는 재생하려는 비디오가 특정 조건을 충족하는 경우 개발자가 인라인으로 비디오를 자동 재생할 수 있도록 허용하기 시작했습니다.

...

Chrome For Android 에는 처음 두 개만 필요 하지만 Safari를 다루는 경우 iOS 10에 도입된 속성을 추가해야 합니다.크로스 브라우저 호환 코드는 다음과 같습니다. playsinline 

 

 

 

ios10부터는 playsinline을 추가하라고 한다.

그래서 위처럼 수정해 적용해 보았다.

<video autoplay loop muted playsinline>
	<source src="./01.mp4" type="video/mp4">
</video>

 

정상 작동된다!