programing

HTML5 플레이어가 내장 된 휴대 기기에서 YouTube 자동 재생이 작동하지 않음

nasanasas 2020. 12. 31. 08:29
반응형

HTML5 플레이어가 내장 된 휴대 기기에서 YouTube 자동 재생이 작동하지 않음


내 문제에는 하나의 링크가 <a href="http://www.youtube.com/embed/YT-ID" class="overlay_video"></a>있습니다. 팬시 박스 오버레이 창에서 링크를 클릭하여 동영상을 재생하고 싶습니다. 이것은 문제가되지 않습니다. 문제는 "autoplay"또는 "autohide"와 같은 매개 변수입니다.

다음 링크는 작동하지 않습니다.

<a href="http://www.youtube.com/embed/YT-ID?autoplay=1" class="overlay_video"></a>

오버레이 창이 열렸지만 비디오가 자동으로 재생되지 않습니다.

편집 : 모바일 장치에서 HTML5 플레이어를 사용하고 싶습니다. 데스크탑 브라우저에서는 매개 변수와 함께 작동하지만 모바일 장치에서는 작동하지 않습니다.


결과적으로 iOS 장치 (iPhone, iPad, iPod touch) 및 Android에서는 자동 재생을 수행 할 수 없습니다.

참조 https://stackoverflow.com/a/8142187/2054512https://stackoverflow.com/a/3056220/2054512


아래 코드를 살펴보십시오. 테스트를 거쳐 모바일 및 태블릿 장치에서 작동하는 것으로 확인되었습니다.

<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div id="player"></div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

YouTube 자동 재생을 만들고 전체 재생 목록을 재생하는 방법이 있습니다. Android 용 Adblock 브라우저를 다운로드 한 다음 youtube 웹 사이트로 이동하여 페이지의 데스크톱 버전에 맞게 구성하고 Adblock 브라우저를 닫은 다음 다시 열면 자동 재생이 작동하는 데스크톱 버전이 생깁니다.

데스크톱 버전을 사용하면 AdBlock도 작동합니다. 모바일 버전은 독립형 YouTube 플레이어를 호출하므로 페이지의 데스크톱 버전이 필요하므로 자동 재생이 작동하고 광고 차단이 작동합니다.

참조 URL : https://stackoverflow.com/questions/15090782/youtube-autoplay-not-working-on-mobile-devices-with-embedded-html5-player

반응형