如何在 youtube.com 上的 iOS 上自动播放视频

How do videos autoplay on iOS at youtube.com

提问by vsky

When I set autoplay to true for a YouTube video (IFrame API) on my site, it doesn't work. All the documentation says apple disables autoplay on ios for bandwidth reasons.

当我将网站上的 YouTube 视频 (IFrame API) 的自动播放设置为 true 时，它​​不起作用。所有文档都说苹果出于带宽原因禁用了 ios 上的自动播放。

However, I see that videos play automatically (without clicking on the video element) on youtube.com on iPad. How did YouTube make it work? It would be hard to imagine Apple does something special just for YouTube.

但是，我在 iPad 上的 youtube.com 上看到视频会自动播放（无需单击视频元素）。YouTube 是如何让它发挥作用的？很难想象 Apple 会为 YouTube 做一些特别的事情。

回答by Aitor Aznar álvarez

It seems that Youtube's team uses the interaction of the user when taps/clicks a video button to authorize the reproduction.

似乎 Youtube 的团队在点击/点击视频按钮时使用用户的交互来授权复制。

Remember that youtube.com is a SPA (Single Page Application) so there is no page reload or redirection.

请记住，youtube.com 是一个 SPA（单页应用程序），因此没有页面重新加载或重定向。

So, youtube.com doesn't have autoplay enabled.

因此，youtube.com 没有启用自动播放。

回答by Bas van Stein

You can do it with javascript.

你可以用javascript来做。

Here is an example:

下面是一个例子：

<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>

回答by Crennotech

I stumbled into similar but more complicated issue/requirement.

我偶然发现了类似但更复杂的问题/要求。

I need to show YouTube video on a modal popup. Popup is shown on a click. Have taken YouTube API code (From https://developers.google.com/youtube/iframe_api_reference) and modified a bit to work with Bootstrap popup.

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

Below is my code

下面是我的代码

    <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>

回答by Jon

I haven't tested this, but you may be able to use Javascript and call the play function for the player, or even just click the element when the page has loaded.

我尚未对此进行测试，但您可以使用 Javascript 并为播放器调用播放函数，甚至可以在页面加载时单击该元素。

回答by ?И?Я??

It can't be done. For various reasons (including, but not limited to data usage), Apple doesn't allow auto-playing of videos.

做不到。出于各种原因（包括但不限于数据使用），Apple 不允许自动播放视频。

Please refer to:

请参阅：

Youtube embedded video: autoplay feature not working in iphone

Youtube 嵌入视频：自动播放功能在 iphone 中不起作用