동영상(video) 태그 삽입시 참고사항

• 아이폰에서 동영상 사용시 전체화면 뜰때

<video id="myVideo" autoplay muted loop playsinline>

 

 <video> 요소에 playsinline 속성을 추가하면 전체화면 전환 없이 바로 재생이 됩니다. 위에서 언급했듯 아이폰에서 autoplay 속성을 사용하고자 할 경우라면 playsinline 속성을 같이 추가해야 원하던 의도대로 화면 안에서 비디오가 바로 재생되는 상황을 만들 수 있다.

 

iframe 사용시playsinline=1" frameborder="0" allowfullscreen>

 

 

• 안드로이드에서 자동재생을 했는데도 동영상이 실행되지 않을때

모바일에서 autoplay 속성을 붙여도 비디오파일에 오디오 트랙이 있으면 자동재생 기능이 동작하지 않는다고 한다.

(자세한 내용은 각 디바이스의 운영체제 레퍼런스를 참조해야 할 것.)

꼼수로, muted 속성을 같이 붙이면 자동재생이 된다고 한다.

하지만 이마저도 아이폰의 경우 비디오는 전체화면으로 재생되어야 한다는 조건이 있어서 자동재생이 안된다고 한다.

그래도 ios10 부터는 playsinline 속성을 붙이면 자동재생이 가능하다고 한다.

 

그래서 비디오 태그를 사용할때는 모바일 환경을 고려하여

<video id="myVideo" autoplay muted loop playsinline>를 필수로 추가해주자.

 

<video oncontextmenu="return false;" id="myVideo" width="100%" autoplay muted loop playsinline>

<source src="<?php echo G5_IMG_URL?>/movie.mp4" type="video/mp4">

</video>