video태그의 disablePictureInPicture 속성과 playsinline 속성

video 태그의 disablePictureInPicture과 playsinline

- 웹 페이지에 배경으로 들어가는 영상을 넣었는데, 2개의 이슈가 발생했다.

 

1. disablePictureInPicture

disablePictureInPicture 속성을 video 태그에 사용하면 PIP모드 버튼이 생기지 않는다.

 

- 웹 페이지에 영상을 삽입하면 PIP(Picture-in-Picture)모드 버튼이 생김.

마우스를 영상에 hover하면 PIP 버튼이 생긴다.

- Edge에서 배경으로 들어가는 영상에 마우스를 호버하면 위처럼 PIP 모드 버튼이 생긴다.

- 크롬과 웨일에서는 나오지 않는데, Edge에서만 발생함.

<video src="/testvideo.mp4" alt="" autoplay muted loop disablePictureInPicture ></video>

- disablePictureInPicture 속성을 video 태그에 사용하면 Edge 브라우저에서 위처럼 마우스를 호버해도 PIP모드 버튼이 생기지 않는다.

- document에서는 아래와 같이 설명하고 있다.

developer.mozilla.org

HTMLVideoElement
disablePictureInPicture
 속성은 현재 요소에 대해 PIP(Picture-in-Picture) 기능을 사용할 수 없는지 여부를 나타내는 HTML 특성을 반영합니다.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/disablePictureInPicture

 

- 'Limited availability'으로서 모든 브라우저에서 활용되고 있진 않은것 같다. 그래서 Edge에서만 PIP 모드 버튼이 나온듯하다.

 

2. playsinline

playsinline 속성을 video태그에 사용하면 ios에서 영상 재생 시, 전체화면이 되지 않고 인라인으로 재생된다.

 

- 사용하지 않으면 자동으로 전체화면으로 재생된다.

<video src="/testvideo.mp4" alt="" autoplay muted loop playsinline></video>

ios에서 video태그에 playsinline 속성을 사용하지 않고 영상을 클릭하면,

전체 영상으로 플레이 된다.

- 사용한다면,

전체 화면으로 재생되지 않는다.

 

 

 

 

참고 : https://ossam5.tistory.com/155

[HTML5] 20강 playsinline - iOS비디오정책