모바일 환경에서 티스토리 유튜브 영상 자동 재생 (원치않는 데이터 사용 주의)(Andriod 한정)

 

https://kingmaron.tistory.com/110

티스토리 유튜브 영상 자동재생, 반복재생 하는 법 (음소거 안해도 됨)

이전 글에서 유튜브 영상 자동재생 하는 법에 대해 다뤘다. 근데 이 방법은 모바일에서는 먹히지 않는다.

그래도 왠지 오기가 생겨 어떻게든 모바일 환경에서 자동재생을 하고 싶었다. 그래서 정보를 찾아봤다.

 

https://jsp-making.tistory.com/466

모바일 기기에서 iframe 으로 embed 된 youtube 영상 자동재생

검색하다가 위 블로그에서 알게된 내용.

 

javascript와 youtube player api를 이용해 플레이어를 제어하여 재생하는 방법.

<div id="player"></div><!-- 실제로 영상이 나올 부분 -->

<!-- 아래 코드가 실행되면 player div 위에 iframe 이 덮입혀짐 -->

 

<script src="https://www.youtube.com/iframe_api"></script><!-- 아래 원문에서 복잡하게 기술되었던 부분 -->

<script>

  var player;

  function onYouTubeIframeAPIReady(){

    player = new YT.Player('player',{

      width:'100%',

      videoId:'영상코드',

      playerVars:{'autoplay':1,'playsinline':1},

      events:{ 'onReady':onPlayerReady }

    });

  }

  function onPlayerReady(e){

    e.target.mute();

    e.target.playVideo();

  }

</script>



출처: https://jsp-making.tistory.com/466 [JSP 요리]

 

youtube player api reference

https://developers.google.com/youtube/iframe_api_reference?hl=ko 

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API

 

 

다만, andriod os에서만 사용가능한 것으로 보인다. (카카오톡 앱을 통해서 접속하면 ios도 가능한 것 같다.)

 

ios의 경우 apple이 '원치않는 데이터 사용을 방지'하기 위해 막아놓았다고 한다.

https://webkit.org/blog/6784/new-video-policies-for-ios/

New

 

 

• <video autoplay> elements will now honor the autoplay attribute, for elements which meet the following conditions:
• <video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
• <video muted> elements will also be allowed to autoplay without a user gesture.
• If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
• <video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
• <video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.

 

이 내용은 Youtube에서도 고지한다.

https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API

모바일 고려사항

자동 재생 및 스크립트 재생

특정 모바일 브라우저(예: Chrome 및 Safari)의 HTML5 <video> 요소는 사용자 상호작용(예: 플레이어에서 탭하기)으로 시작되는 경우에만 재생되도록 허용합니다. 다음은 Apple의 도움말에서 발췌한 내용입니다.

 

'경고: 데이터 네트워크에서 사용자에게 비용이 부과되는 원하지 않는 다운로드가 발생하는 것을 방지하기 위해 삽입된 미디어는 iOS의 Safari에서 자동으로 재생될 수 없습니다. 항상 사용자가 재생을 시작합니다.'

 

이러한 제한으로 인해 autoplay, playVideo(), loadVideoById()와 같은 매개변수 및 함수는 모든 모바일 환경에서 작동하지 않습니다.

 

---

android에서라도 자동 재생이 된다는 건 꽤 매력적인 것 같다.

 

하지만 원치않는 데이터 사용은 내 글을 읽으러 오는 사람들에게 기분 나쁜 경험을 주게 하는 것 같아

 

사용하지는 않을 것 같다. 이 글을 제외하곤.

 

-------추가------

뭔가 잘되는 것 처럼 적어놨지만 제대로 작동 안한다. 정확히는 블로그 내에서 다른 글로 이동할 때는 작동한다.

근데 어찌된 것인지 포털사이트에 검색을 하여 접속하면 작동이 되지않는다.

이 사항은 이전글도 똑같은 사항.

------------------