Picture-in-Picture Web API 소개

2016 년 Safari Browser는 Macos Sierra와 함께 출시되어 처음으로 Picture-in-Picture 기능을 소개했습니다. 이 기능을 통해 사용자는 항상 다른 창 위에있는 작은 부유 식 창에 비디오를 팝업 할 수 있으므로 다른 작업을 수행하면서 비디오를 계속 볼 수 있습니다. 이 아이디어는 텔레비전에서 비롯된 것입니다. 예를 들어, 사용자는 검색 프로그램 목록 또는 기타 채널을 탐색하면서 인기있는 스포츠 이벤트를 계속보고 싶어 할 수 있습니다.

얼마 지나지 않아 Android 8.0이 출시되어 기본 API를 통한 사진 기능을 지원했습니다. 이 기능은 크롬 데스크탑 버전에서 아직 지원되지 않지만 Android의 Chrome 은이 API를 통해 사진 모드에서 비디오를 재생할 수 있습니다.

이로 인해 표준 Picture-in-Picture Web API가 개발되어 웹 사이트 가이 동작을 시작하고 제어 할 수있었습니다.

작성 당시 Chrome (버전 70 이상) 및 Edge (버전 76 이상)만이 기능을 지원합니다. Firefox, Safari 및 Opera는 모두 독점 API를 사용하여 기능을 구현합니다.

이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 기능과 이후 버전 에서이 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일/태블릿

Picture-in-Picture API를 사용하는 방법

웹 페이지에 비디오를 추가하여 시작하겠습니다.

<video controls="" src="video.mp4"></video>

Chrome에는 Picture-in-Picture 모드를 입력하고 종료하기위한 버튼이 이미 있습니다.

Firefox 구현을 테스트하려면 먼저 media.videocontrols.picture-in-picture.enabled 플래그를 사용하여 구성을 마우스 오른쪽 버튼으로 클릭하여 사진을 찍는 옵션을 찾으십시오.

이 효과가 있지만 많은 경우 비디오 컨트롤이 브라우저에서 일관되게되기를 원하며 Picture-in Picture-in Picture 모드로 이동할 수있는 비디오와 할 수없는 비디오를 제어 할 수 있습니다.

Picture-in-Picture Web API를 사용하여 브라우저의 기본 메소드를 교체하여 Picture-in-Picture 모드를 자체 메소드로 입력 할 수 있습니다. 예를 들어 버튼을 추가하고 클릭하여 활성화하겠습니다.

 <button id="pipButton" class="hidden" disabled>Picture-in-Picture 모드를 입력하십시오</button>

그런 다음 JavaScript에서 비디오 및 버튼을 선택하십시오.

 const video = document.getElementById ( '비디오');
const pipbutton = document.getElementById ( 'pipbutton');

기본적으로 버튼은 숨겨져 있고 비활성화됩니다. Picture-in-Picture API가 사용자의 브라우저에서 표시되기 전에 지원되고 활성화되어 있는지 알아야하므로 표시됩니다. 이것은이 기능을 지원하지 않는 브라우저에서 손상된 경험을 피하는 데 도움이되는 점진적인 형태의 향상입니다.

API가 지원되었는지 확인하고 다음과 같이 버튼을 활성화 할 수 있습니다.

 if (문서에서 'pictureInPictureEnabled') {
  pipbutton.classlist.remove ( 'Hidden')
  pipbutton.disabled = false;
}

Picture-in-Picture 모드를 입력하십시오

JavaScript가 브라우저가 Picture-in-Picture 지원을 가능하게했다고 결정했다고 가정합니다. #PipButton으로 버튼을 클릭하면 비디오 요소에서 requestPictureInPicture ()를 호출하겠습니다. 이 메소드는 기본적으로 구문 분석 할 때 화면의 오른쪽 하단에 미니 창에 비디오를 배치하지만 사용자가 이동할 수는 있지만 약속을 반환합니다.

 if (문서에서 'pictureInPictureEnabled') {
  pipbutton.classlist.remove ( 'Hidden')
  pipbutton.disabled = false;

  pipbutton.addeventListener ( 'click', () => {
    video.requestpictureinpicture ();
  });
}

requestPictureInPicture ()가 약속을 반환하고 예를 들어 비디오 메타 데이터가로드되지 않았거나 DisablePictureInPicture 속성이 비디오에 존재하는 경우 약속이 거부 될 수 있기 때문에 위의 코드를 그대로 유지할 수 없습니다.

캐치 블록을 추가 하여이 잠재적 오류를 잡고 사용자에게 무슨 일이 일어나고 있는지 알려주겠습니다.

 pipbutton.addeventListener ( 'click', () => {
  동영상
    .requestPictureInPicture ()
    .catch (error => {
      // 오류 처리});
});

Picture-in-Picture 모드 종료

브라우저는 Picture-in-Picture Window의 닫기 버튼을 상당히 제공하며 클릭하여 창을 닫을 수 있습니다. 그러나 Picture-in-Picture 모드를 종료하는 또 다른 방법을 제공 할 수도 있습니다. 예를 들어, #PipButton을 클릭하면 활성화 된 사진 창을 닫을 수 있습니다.

 pipbutton.addeventListener ( 'click', () => {
  if (document.pictureInpictureElement) {
    문서
      .exitPictureInPicture ()
      .catch (error => {
      // 오류 처리})
  } 또 다른 {
    // 그림의 사진 요청}
});

Picture-in-Picture 창을 닫으려는 또 다른 상황은 비디오가 전체 화면 모드로 들어가는 경우입니다. Chrome은 이미 코드를 쓰지 않고 자동으로 수행합니다.

사진 촬영 이벤트

브라우저를 사용하면 비디오가 P-In-Picture 모드로 들어가거나 떠날 때 감지 할 수 있습니다. P-P 모드에는 입력 또는 종료 방법이 여러 가지가 있기 때문에 미디어 컨트롤 업데이트를 위해 이벤트 감지에 의존하는 것이 가장 좋습니다.

이러한 이벤트는 EnterpictureInpicture 및 LeavePictureInpicture입니다.

이 예에서는 비디오가 현재 P-P 모드인지에 따라 #PipButton 태그를 업데이트해야합니다.

다음은이를 달성하는 데 도움이되는 코드입니다.

 video.addeventListener ( 'EnterPictureInPicture', () => {
  PIPBUTTON.TEXTCONTENT = 'EXIT PICTION-in-PICTURE MODE';
});

video.addeventListener ( 'LeavePictureInPicture', () => {
  pipbutton.textContent = 'Picture-in-Picture 모드를 입력';
});

다음은 데모입니다.

Picture-in-Picture 창을 사용자 정의하십시오

브라우저는 비디오가 MediaStream 객체 (카메라, 비디오 녹화 장치, 화면 공유 서비스 또는 기타 하드웨어 소스와 같은 가상 비디오 소스에서 생성)를 재생하지 않는 한 기본적으로 Picture-in-Picture Window의 재생/일시 정지 버튼을 기본적으로 표시합니다.

Picture-in-Picture 창에서 이전 또는 다음 트랙으로 직접 이동하기 위해 컨트롤을 추가 할 수도 있습니다.

 navigator.mediasession.setactionHandler ( 'previoustrack', () => {
  // 이전 트랙으로 이동});

navigator.mediasession.setactionHandler ( 'NextTrack', () => {
  // 다음 트랙으로 이동});

사진 촬영 창에 웹캠 피드를 표시하십시오

화상 회의 웹 애플리케이션은 사용자가 응용 프로그램과 다른 브라우저 탭 또는 Windows 사이를 전환 할 때 웹캠 피드를 Picture-in Picture 모드에 배치하면 혜택을 볼 수 있습니다.

예는 다음과 같습니다.

비디오에서 사진을 비활성화합니다

그림 창에서 사진에서 비디오가 팝업되기를 원하지 않으면 아래와 같이 DisabledPictureInPicture 속성을 추가 할 수 있습니다.

<video controls="" disablepictureinpicture="" src="video.mp4"></video>

요약

지금은 그게 Picture-in-Picture Web API에 대해 알아야 할 전부입니다! 현재 API는 지원합니다<video></video> 요소이지만 다른 요소로 확장하기위한 것입니다.

브라우저 지원은 이제 들쭉날쭉하지만 웹 사이트 비디오 경험을 점차적으로 향상시키는 방법으로 사용할 수 있습니다.

추가 독서

• Picture-in-Picture API 사양
• 사진을 사용하여 비디오를 시청하십시오
• Picture-in-Picture 예제 (Github의 Google Chrome)

출력은 원본 이미지와 그 형식을 유지합니다. 텍스트는 원래 의미를 유지하면서 흐름과 명확성을 향상시키기 위해 해당 및 재구성되었습니다. 기술 용어는 일관성을 유지합니다.

위 내용은 Picture-in-Picture Web API 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!