Safari 移动版 - youtube iframe api - 自动播放

Posted

技术标签:

【中文标题】Safari 移动版 - youtube iframe api - 自动播放【英文标题】:Safari mobile - youtube iframe api - autoplay 【发布时间】:2018-07-14 02:11:27 【问题描述】:

我正在尝试使用 YouTube iframe API 让 Youtube 视频在 Safari 移动设备上自动播放。这是我的代码:

<div class="player-wrapper featured-small featured-medium featured-large featured-xlarge">
    <div id="player"></div>
</div>
<script>
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubePlayerAPIReady() 
        player = new YT.Player('player', 
          playerVars: 
            'controls': 0,
            'showinfo': 0,
            'autoplay': 1,
            'loop': 1,
            'modestbranding': 1,
            'playlist': '<?php echo $scales_hero_video; ?>'
          ,
          videoId: '<?php echo $scales_hero_video; ?>',
          events: 
            'onReady': onPlayerReady
        );
      

      function onPlayerReady(event) 
        event.target.mute();
        event.target.playVideo();
      
</script>

提前谢谢各位!

视频应该在静音时自动播放和循环播放。但视频根本无法在 Safari 移动版中播放。

【问题讨论】:

@milbrandt 我已经更新了描述:) 【参考方案1】:

Apple 不允许在 ios 设备上基于 WebKit 的浏览器中自动播放或脚本播放,这是为了防止通过蜂窝网络进行不必要的下载。

如 YouTube 播放器 API 手册 (https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations) 中所述:

移动注意事项

自动播放和脚本播放 在某些移动浏览器(例如 Chrome 和 Safari)中,html5 元素仅允许在由用户交互(例如点击播放器)启动的情况下进行播放。这是Apple's documentation的摘录:

“警告:为防止用户自费通过蜂窝网络进行未经请求的下载,嵌入式媒体无法在 iOS 上的 Safari 中自动播放 - 用户始终会启动播放。”

由于此限制,自动播放、playVideo()、loadVideoById() 等函数和参数将无法在所有移动环境中使用。

如你所愿,无法在 Safari Mobile 上自动播放视频...

此致,

莱昂·哈根迪克

【讨论】:

您知道是否正在努力更新此限制?例如,如何限制对蜂窝连接设备的限制?或者如何将其限制为第一个视频的手动启动但允许在后续视频上自动播放(例如从单个 youtube + 非 youtube 链接创建的 youtube 播放列表)?希望这种情况在 5G 到来之前有所改善。工作组 感谢您的参考链接,向我的客户展示这很明显:) @Mcbeese 我看到我的信息已经半过时了:自动播放和 javascript .play() 函数将被尊重,但只有在用户操作直接触发时(例如(双)点击、触摸结束、鼠标按下事件):webkit.org/blog/6784/new-video-policies-for-ios 然而,这不适用于 YouTube 播放器,因为播放是通过不同的 JS 调用来调用的。 playoverwatch.com 后台的视频开始在我的 iPhone X 14.4 上自动播放。在页面源中,视频标签已打开自动播放......所以这似乎是可能的。这只是 YouTube 的限制吗?

以上是关于Safari 移动版 - youtube iframe api - 自动播放的主要内容,如果未能解决你的问题,请参考以下文章

在 iPhone Safari HTML 页面上打开带有图像的 Youtube 视频

选择要上传的文件会导致移动版 Safari 崩溃

ios的移动版Safari版本号

YouTube 直播嵌入代码不断变化

youtube 如何在 Safari 上自动播放带音频的视频?

iOS YouTube 和类似 Safari 的电影播放器