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

Posted 2023-02-24

【中文标题】youtube.com 上的视频如何在 iOS 上自动播放

【英文标题】：How do videos autoplay on iOS at youtube.com

【发布时间】：2013-06-18 04:59:44

【问题描述】：

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

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

【问题讨论】：

不是重复的。 OP 询问为什么如果您访问 iOS 上的 youtube.com 主页，自动播放似乎可以工作（对我来说也是如此）。

【参考方案1】：

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

我需要在模态弹出窗口中显示 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>

【参考方案2】：

你可以用 javascript 来做。

这是一个例子：

<div class="video-container">
    <div id="player"> </div> <!--<iframe   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>

【讨论】：

对此进行了测试，但它在 iOS 9.1 上的 Safari 和 iOS 9.1 上的 Chrome 中不起作用 请参阅 Aitor Aznar Álvarez 的回答，了解 YouTube 如何在他们的移动版本上做到这一点。

我非常讨厌 ios 9.1.. 感谢您的评论，在编写 ios 时仍然可以工作，但那是在“降级”之前。

这适用于笔记本电脑/台式机浏览器。不适用于移动 iOS 浏览器。可能会或可能不会在 android 上运行。

【参考方案3】：

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

【参考方案4】：

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

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

所以，youtube.com 没有启用自动播放。

【讨论】：

那么，他们正在操纵 DOM 和 URL 以使其看起来好像您在不同页面之间移动？

是的，使用纯 JavaScript 并使用“历史 pushState”管理导航。查看此以获取有关自动播放的更多信息：***.com/questions/29894406/…

关于自动播放的规则已经改变，尤其是在 Chrome 中。考虑到这个developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide 和这个developers.google.com/web/updates/2017/09/…

【参考方案5】：

这是不可能的。由于各种原因（包括但不限于数据使用），Apple 不允许自动播放视频。

请参考：

Youtube embedded video: autoplay feature not working in iphone

【讨论】：

这没有回答问题，也不是重复的。 OP 询问为什么如果您访问 iOS 上的 youtube.com 主页，自动播放 确实 似乎可以工作（对我来说也是如此）。