프로젝트/Beatn-beat [비튼 - 비트]

4. Youtube-player 테스트

2024. 1. 24. 11:43
목차
  1. 참고자료
  2. 과정
  3. 피드백

 

참고자료

 

 

youtube_player_iframe | Flutter package

Flutter port of the official YouTube iFrame player API. Supports web & mobile platforms.

pub.dev

 

 

BGMs 개발기 (YouTube 플레이리스트 공유 및 원격 음악 재생 서비스)

회사 초창기부터 5년가량 내부에서만 사용하던 쥬크박스 시스템을 오픈하였습니다. 쥬크박스 개발기를 적어보려고 합니다. 이번 글에서는 어떻게 쥬크박스가 나오게 됐는지, 어떻게 개발했는

secondspaceinc.tistory.com


 

과정

BGMs의 개발기를 보다가 알게 된 정보이다.

Youtube를 iframe으로 재생을 하게 되면, 광고가 나오지 않는다!

 

기존에는 Youtube-preminum을 로그인 시켜서 해야하나 고민을 하고 있었는데,

iframe을 활용하면 해결 된다는 것을 인지하고, flutter에서 youtube_player_iframe을 찾았다.

 

예제 코드를 넣고 테스트를 하는데 동작을 안하는 문제가 발생했다...

예전에 "web에서 자동 재생시 소리를 킬 수 없다"라는 내용을 들었던 기억이 있어서

mute 옵션을 주고 동작시켜보니 정상 동작을 함을 확인했다.

 

이 기회에 정책을 한 번 읽어 봐야겠다 싶어서 아래의 내용을 대충 훑었다.

https://developer.chrome.com/blog/autoplay?hl=ko

 

Chrome의 자동재생 정책  |  Blog  |  Chrome for Developers

Chrome의 새로운 자동재생 정책을 통해 우수한 사용자 경험을 위한 권장사항을 알아보세요.

developer.chrome.com

 

실제 재생의 목적 보다는, 홍보용 페이지이기 때문에 내가 좋아하는 노래의 MV를 넣고

Mute 상태로 재생을 하는 형태로 구현 하였다.

 

final _controller = YoutubePlayerController(
  params: YoutubePlayerParams(
    mute: false,
    showControls: true,
    showFullscreenButton: true,
  ),
);

_controller.loadVideoById(...); // Auto Play
_controller.cueVideoById(...); // Manual Play
_controller.loadPlaylist(...); // Auto Play with playlist
_controller.cuePlaylist(...); // Manual Play with playlist

// If the requirement is just to play a single video.
final _controller = YoutubePlayerController.fromVideoId(
  videoId: '<video-id>',
  autoPlay: false,
  params: const YoutubePlayerParams(showFullscreenButton: true),
);

 

위와 같이, playlist를 만들고 auto-play를 시킬 수 있다.

위 코드를 활용하여 우리가 원하는 기능을 구현할 수 있을 것이다.

 


 

피드백

  • 디자인적 피드백은 이제 거의 없다.
저작자표시 비영리 변경금지 (새창열림)

'프로젝트 > Beatn-beat [비튼 - 비트]' 카테고리의 다른 글

6. Static-build시에, blank 상태 버그  (0) 2024.01.26
5. Scroll-event 구현  (0) 2024.01.25
3. 디자인 전면 수정  (0) 2024.01.23
2. Flutter Web GNB(global navigation bar)  (0) 2024.01.22
1. 구상의 첫걸음  (0) 2023.11.26
  1. 참고자료
  2. 과정
  3. 피드백
'프로젝트/Beatn-beat [비튼 - 비트]' 카테고리의 다른 글
  • 6. Static-build시에, blank 상태 버그
  • 5. Scroll-event 구현
  • 3. 디자인 전면 수정
  • 2. Flutter Web GNB(global navigation bar)
코딩 악귀
코딩 악귀
고민하고 발전하는 코더의 발자취.
코딩 악귀
가짜 개발자
코딩 악귀
전체
오늘
어제
  • 분류 전체보기 (48)
    • 프로그래밍 언어 (10)
      • Python (1)
      • Java (2)
      • MySQL (7)
    • 개발 관련 (7)
      • Agile (4)
      • 마음가짐 (2)
      • 셋업 (1)
    • 알고리즘 (12)
    • 프로젝트 (18)
      • Beatn-beat [비튼 - 비트] (17)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

최근 댓글

최근 글

hELLO · Designed By 정상우.
코딩 악귀
4. Youtube-player 테스트
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.