iOS上的YouTube如何自动播放视频

Question

当我在我的网站上将Youtube视频（IFrame API）的autoplay设置为true时，它无法正常工作。所有的文档都说，出于带宽原因，苹果禁用了ios上的autoplay。

然而，在iPad上，在youtube.com上观看视频时，我发现视频会自动播放（无需点击视频元素）。 Youtube是如何实现的？很难想象苹果仅仅为了YouTube而做了一些特别的事情。

- vsky

---

不是重复问题。OP问为什么在iOS上访问youtube.com首页时自动播放似乎无效（我也是这样）。 - Nicolas Raoul

Answer 1

似乎Youtube团队使用用户与视频按钮的交互来授权播放。请记住，youtube.com是一个SPA（单页应用程序），因此没有页面重新加载或重定向。因此，youtube.com没有启用自动播放。

- Aitor Aznar Álvarez

---

所以，他们正在操作DOM和URL，使其看起来像是在不同的页面之间移动？ - Nicolas Miari

是的，可以使用纯JavaScript并通过“history pushState”管理导航。有关自动播放的更多信息，请查看此链接：http://stackoverflow.com/questions/29894406/initialize-videojs-from-dummy-element-using-require-js - Aitor Aznar Álvarez

自动播放规则已经改变，特别是在Chrome浏览器中。请参考以下链接：https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide 和 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes。 - Aitor Aznar Álvarez

Answer 2

你可以使用JavaScript来实现。

这里有一个例子：

<div class="video-container">
    <div id="player"> </div> <!--<iframe width="960" height="720" src="//www.youtube.com/embed/5YptIh_avrM?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>-->

</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: '720',
      width: '960',
      videoId: 'YOUR_ID_HERE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }



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

  // 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) {

  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

- Bas van Stein

---

测试过了，在iOS 9.1上的Safari和Chrome上不起作用。请参考Aitor Aznar Álvarez的答案，看看YouTube在他们的移动版本中是如何做到的。 - Jay

我真的很讨厌iOS 9.1.. 感谢您的评论，在写这篇文章时iOS仍然可以工作，但那是在这个“降级”之前。 - Bas van Stein

这适用于笔记本电脑/台式机浏览器。在移动iOS浏览器上无法使用。在Android上可能有或没有作用。 - mjwunderlich

Answer 3

我遇到了类似但更复杂的问题/需求。

我需要在模态弹出窗口中显示YouTube视频。单击时会显示弹出窗口。 已经使用YouTube API代码（来自https://developers.google.com/youtube/iframe_api_reference）并进行了一些修改以与Bootstrap弹出窗口配合使用。

以下是我的代码

    <div class="modal" id="videoModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="videoWrapper">
                    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
                    <div id="player"> </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    // 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: '360',
            width: '640',
            videoId: 'YOUR VIDEO ID',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        //event.target.playVideo();// Nullifying the action otherwise the video will play as soon as page loads

    }

    // 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();
    }

    function ShowPopup() {
        $('#videoModal').modal('show');
        player.playVideo();
    }
    //Stop video when bootstrap popup is closed
    $("#videoModal").on('hide.bs.modal', function () {
        player.stopVideo();
    });

</script>

- Crennotech

Answer 4

无法完成。由于各种原因（包括但不限于数据使用），苹果不允许自动播放视频。

请参考：

YouTube 嵌入式视频：iPhone 上的自动播放功能无效

- ᗩИᎠЯƎᗩ

---

这并没有回答问题，也不是重复的。提问者想知道为什么在iOS上访问youtube.com主页时自动播放似乎可行（对我来说确实如此）。 - mpobrien

Answer 5

我没有测试过，但你可能可以使用JavaScript并调用播放器的播放功能，或者在页面加载后直接点击该元素。

- Jon