도와주세요

Iframe으로 삽입한 유튜브 영상을 모바일에서 스크린이 꺼져도 계속 재생되게 하는 방법이 없을까요?

이니스프리2017.10.24 20:31조회 수 528댓글 6

  • 1
    • 글자 크기

안녕하세요?

 

유튜브에 공개된 뮤직비디오를 이용하여

 

제가 선별한 플레이리스트 중에서 선택 재생 및 반복 재생 등을 할 수 있는 웹페이지를

 

틈틈이 연습삼아 만들어 보고 있는데요. 

 

 

장기적으로는 UK single chart 40을 파싱해서 매주 플레이리스트를 생성하여

 

웹페이지에서 차트 수록곡의 뮤직비디오를 감상할 수 있도록 만들여보려고 하네요. 

 

제가 어릴 때부터 영국 밴드의 음악을 주로 들어서 그 쪽이 더 친숙하기 때문에 

 

그런 음악을 주변의 친구들에게 소개하려는 목적이거든요 ^^

(물론 다수의 유튜버들이 매주 차트 수록곡을 하나의 영상 또는 플레이리스트로 편집해서 올리고 있긴 하죠)

 

 

잠깐 옆길로 새었는데 제가 개발자도 아니고 컴맹 수준에서 짬짬이 공부하는 것이라서

 

뭔가 막히는 부분이 있어서 여쭤볼게요.

 

다른 분들께서 보시기엔 아주 기초적인 문제인데 제가 잘 몰라서 끙끙거리는 것일 수도 있다는 생각이 들어서요 ㅠㅠ

 

 

유튜브에서 제공하는 Iframe Player API를 이용하면

 

HTML에서 PLAY/STOP 버튼을 만들어서 유튜브의 영상의 재생을 조작할 수 있던데요. 

 

아래에 제가 캡쳐한 부분과 같이 제한이 걸려 있어서 모바일에서는 바로 재생을 시작할 수도 없고 

(PC와 달리 모바일에서는 유튜브 화면을 한 번 탭해야 재생이 되더군요)

 

재생을 하려면 화면이 계속 켜져 있어야 하더군요.

 

그리고 한 번 화면이 꺼지면 화면을 켜고 다시 탭을 해야 재생이 되구요.

 

제가 만들어보고 싶은 방향은 일정시간이 경과하여 모바일 기기의 화면이 꺼지더라도 

 

쥬크박스처럼 선택된 음악을 연속으로 들을 수 있으면 좋을텐데 말이죠.

 

 

이미지 69.jpg

 

그누보드 자료실에서 검색해보니 제가 만들려고 하는 웹페이지와 유사한 것을 

 

보드나 위젯 형태로 이미 올려놓으신 분들도 계시던데요. 

 

그 글의 설명에서도 모바일에서는 정상 작동하지 않는다고 경고문(?)이 써있더군요. 

 

 

아무래도 제 주변의 친구들이 PC보다는 모바일로 음악을 듣지 않을까 생각되는데요.

 

그렇다면 모바일 페이지는 PC와는 아예 다른 방식으로 만들어야 하는 것인가요? 

 

어차피 제가 아무것도 모르는 상태에서 공부 삼아서 만드는 것이라서 

 

아예 방향을 잘못 잡았다면 처음부터 다시 공부하고 방향을 수정하는 편이 맞는 것 같아서요 ㅠㅠ

 

 

파이어폭스 브라우저에서 유튜브를 실행하거나 별도의 앱을 깔면 

 

모바일 기기의 화면이 꺼져도 재생이 가능하긴 하던데요.

 

주변에 모바일 파이어폭스를 사용하는 사람이 많지 않은 것 같더군요. 

 

모든 브라우져에서 별도의 앱 설치 없이 가능한 방법은 없을까요?

 

혹시 처음부터 JW Player를 이용해서 웹페이지를 만드는 것이 더 수월하고 빠른 길일까요? ㅠㅠ

 

 

어쩌면 트리뷰 님의 웹앱 제작 강의나 Ciel 님의 안드로이드 강의를 끝까지 들으면 

 

제가 '유레카'를 외칠 해결방법이 나올 수 있을 것 같기도 하네요 ^-^

 

그럼 다들 편안한 저녁 되세요.

 

항상 감사드립니다!

 

I've got a good feeling about this, and that's all I'm going to tell you.

  • 1
    • 글자 크기
  • 2017.10.24 20:56

    일단 대부분의 모바일 브라우저는 화면을 끔괴 동시에 슬립모드로 들어가는것 아닌가요?

     

    요즘은 파폭으로 유투브에서 바로 재생을 해도 슬립모드에서 잘 안되더라구요.

    저 같은 경우는 별도의 유투브 플레이어 앱을 다운받아놨어요.

  • @맛스타
    이니스프리글쓴이
    2017.10.24 21:06

    옙 답변 달아주셔서 감사합니다!

    그렇다면 브라우저 차원에서 해결하려고 하면 결코 해답이 안 나오겠군요 ㅠㅠ

    제가 여쭤보길 잘 했네요 ㅎㅎ

    아무래도 트리뷰 님의 웹앱 강의나 Ciel 님의 안드로이드 강의를 기다려야겠군요

    그럼 맛스타 님께서도 편안한 저녁 되세요 :)

  • 이니스프리글쓴이
    2017.10.25 01:09

    흠.. 지금 와서 생각해보니

    닭을 사와서 이미 삼계탕을 만들어놓고

    프라이드 치킨으로 해먹을 수 없을까요??

    라는 수준의 질문을 올렸네요 ㅠㅠㅠㅠㅠ

  • @이니스프리
    2017.10.25 01:33

    왠지 될것 같은데 곰곰히 생각해보면 황당한 질문인건가요? ㅎㅎ

  • 2017.10.25 23:59

    웹페이지와는 전혀 다른 이야기지만

     

    안드로이드 전용으로 예전에 OGMods 라는 곳에서 OGYouTube 라는 앱을 지원했었는데...

    기본 유튜브 앱에 백그라운드 재생 + 다운로드 기능이 추가된 앱인데 현재는 지원을 중단하여 이용은 불가능해요 ㅠㅠ

     

    예전에 안드로이드 기준에서는 크롬으로 유튜브에 들어가서 영상을 재생하면 다른 앱 사용해도 백그라운드로 재생이 됬었어요. 물론 지금은 막혔지만...

  • @도다
    이니스프리글쓴이
    2017.10.26 00:03

    옙 예전에는 그런 방법이 있었군요 ㅠㅠ 감사합니다!

    현재로서는 일단 이 문제는 유보해야겠네요 :)

    그럼 도다 님께서도 안녕히 주무세요~

댓글 달기

번호 제목 글쓴이 날짜 조회 수
공지 앞으로 ssh 사용시 한글 사용이 가능합니다.7 마스터 2018.10.12 12882
공지 접속 불가 사태 수습은 진행중입니다.35 마스터 2018.10.05 13521
공지 회원 전용 페이지가 생겼습니다.10 마스터 2018.03.20 14134
공지 [필독] 질문하는 방법5 마스터 2018.02.23 533
208 위키 조금 아시는분 있으시면 도움 구합니다!8 샹키 2017.10.23 148
207 Tiny Tiny RSS 사용하시는 분께 장단점에 대한 질문 드립니다 이니스프리 2017.10.22 178
206 [해결함] 워드프레스 접속이 앙대요8 허니버터뚠뚜니라이츄 2017.10.20 179
205 css 로딩 애니메이션 딜레이시키기5 프요 2017.10.19 173
204 메일에 ?표시는 어떻게 하나요?10 powerserver9011 2017.10.18 204
203 서비스 신청3 기특한크리퍼 2017.10.18 145
202 XE Ace 스킨 사용중인데 이상합니다.4 Kongjak 2017.10.17 121
201 티켓팅, 수강신청 등 관련하여 특정 서버시각 확인에 대해 질문 드려요6 이니스프리 2017.10.16 385
200 드롭박스의 상태가 이상합니다.5 허니버터뚠뚜니라이츄 2017.10.15 182
199 카카오 계정 로그인7 powerserver9011 2017.10.15 530
198 Let's Encrypt6 powerserver9011 2017.10.13 182
197 미디어위키 잘 아시는 분 계신가요15 마카롱 2017.10.12 204
196 로딩 로딩 도와줘요21 모니터 2017.10.12 272
195 이거 어디서 파나요?11 기특한크리퍼 2017.10.11 146
194 포인트를 사용한 사행성 게임이..4 네모 2017.10.11 171
193 홈... 이런게 가능할까요?21 모니터 2017.10.10 250
192 yourls vs phurl 어느 쪽을 더 선호하시는지 사용하신 회원님들께 여쭤봅니다2 이니스프리 2017.10.08 191
191 Windows 10 Administrator 계정4 powerserver9011 2017.10.07 239
190 라이믹스 blogapi 아시는 분들 계신가요!?!?1 준그루 2017.10.06 128
189 Rhymix 짧은 주소가 안됩니다.7 Kongjak 2017.10.04 225
이전 1 ... 8 9 10 11 12 13 14 15 16 17... 23다음
첨부 (1)
이미지 69.jpg
208.4KB / Download 27
서버에 요청 중입니다. 잠시만 기다려 주십시오...