Post

[JWPlayer] Options - Float on scroll

[JWPlayer] Options - Float on scroll

Float on scroll

스크롤 시 플레이어 고정

이 기능은 페이지를 스크롤할 때 원래 위치의 플레이어가 화면 밖으로 벗어나면,
플레이어를 화면의 한쪽 구석으로 축소해 계속 표시합니다.

세로 방향(포트레이트) 모드의 기기에서는
플레이어가 원래 크기로 페이지 상단에 고정(fixed) 됩니다.

플로팅 상태에서는 시청자가 플레이어를 드래그하여 위치를 변경할 수 있습니다.
단, 광고 재생 중에는 이 기능이 비활성화됩니다.

기본적으로, floating 객체를 추가하면 플로팅 플레이어 기능이 활성화되며,
dismissible: true가 자동으로 설정됩니다.

커스터마이징용 CSS 클래스

플로팅 플레이어의 스타일을 사용자 정의하려면 아래 CSS 클래스를 사용할 수 있습니다.

  • .jw-flag-floating .jw-wrapper
  • .jw-float-icon

또한 Floating API 메서드를 사용하면
사용자 정의 플로팅 타이밍(floating timing) 을 구현할 수 있습니다.

주의: Float on scroll 기능은 iframe에 삽입된 플레이어에서는 사용할 수 없습니다.

1
2
3
4
5
6
7
player.setup({
  "playlist": "https://cdn.jwplayer.com/v2/playlists/{playlist_id}",
  ...
  "floating": {
    "dismissible": true
  }
});
  • dismissible (boolean)
    • 시청자가 플로팅 플레이어를 닫을 수 있는지 여부를 제어합니다.
    • 가능한 값:
      • true: (기본값) 시청자가 플로팅 플레이어를 닫을 수 있음
      • false: 시청자가 플로팅 플레이어를 닫을 수 없음
  • mode (string) < 8.17.0+
    • 플로팅 동작 방식을 설정합니다.
    • 가능한 값:
      • notVisible: (기본값) 플레이어가 화면에서 벗어나면 플로팅 시작, 다시 보이면 플로팅 종료
      • always: 항상 플로팅 상태 유지
      • never: 플로팅 기능 사용 안 함
  • showTitle (boolean)
    • 플로팅 플레이어 상단의 닫기(X) 버튼과 함께 동영상 제목을 표시할지 여부를 설정합니다.
    • 가능한 값:
      • false: (기본값) 닫기 바에 동영상 제목 표시 안 함
      • true: 닫기 바에 동영상 제목 표시
This post is licensed under CC BY 4.0 by the author.