Youtube 在手机上嵌入自动播放

Question

我使用 React 将 iframe 与页面上的 youtube 视频设置为正确大小。一切正常，但对于手机无法使用自动播放选项。

页面有什么有趣的地方，我有什么作为示例视频，效果很好。

<iframe type="text/html"  allowTransparency="true"  height="100%" width="100%" preload="metadata" gesture="media" allow="encrypted-media" className="autoplay-iframe"
            src={`https://www.youtube.com/embed/`+this.props.autoplay+`?autoplay=1&version=3&html5=1&hd=1&controls=0&loop=1&playlist=`+this.props.autoplay+`&playsinline=1&rel=0&showinfo=0&modestbranding=1&related=0&enablejsapi=1&origin=`+window.location.hostname} frameborder="0"></iframe>

以上是我的 iframe 代码。 我剪切了部分 iframe 代码，但样式属性中只有样式。这对于自动播放并不重要。 其他页面的最终网址相同。我不确定为什么。有什么提示可以解决这个问题吗？

提前致谢。

Answer 1

您将无法实现此功能，因为它已被有意禁用所有移动设备。原因是用户保存蜂窝数据。在this post 中也引用了它。

视频自动播放不起作用的原因很简单。特点是 故意disabled 在 iOS 和 Android 中用于移动设备。 这样做的原因是为了节省移动用户的钱。此类设备 （尤其是手机）经常使用收费的数据连接 带宽。他们有数据限制，并且会产生费用。

以下 SO 帖子也支持此声明。

• no autoplay in iframe HTML5 player on mobile (Android Chrome and Firefox)?
• how to get embedded youtube video to autostart on iphone
• Youtube autoplay not working on mobile devices with embedded HTML5 player

Answer 2

我能够播放 Youtube 视频（无需静音）。因为内联加载 Youtube 视频让 Google 及其新的 Core Web Vitals 感到不安，所以我们实现了一个缩略图占位符，当单击 (jQuery) 时会使用 Youtube Iframe API 启动加载视频。一开始我也无法让它们自动播放。通过让 API 嵌入 iframe 解决了这个问题——而不是事先将 iframe 放置到位。它在 iOS Safari、Chrome 和 Firefox 上自动播放。这对我有用：

文件准备就绪：

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady(yt_id, iframe_id, iframe_width, iframe_height){
    player = new YT.Player(iframe_id, {
        width: iframe_width,
        height: iframe_height,
        videoId: yt_id,
        playerVars: { 'autoplay': 1, 'playsinline': 1 },
            events: {
                'onReady': onPlayerReady
            }
    });
}

function onPlayerReady(event) {
    //event.target.mute();
    event.target.setVolume(70);
    event.target.playVideo();
}

---

点击事件：

$('.yt_video_link').on('click', function(e) {
    e.preventDefault();
    var div_id      = $(this).attr('id');
    var div_iframe  = div_id + '_iframe';
    var yt_id       = $('#' + div_id).data('ytid');

    $('#' + div_id + ' .yt_video_play').css('display', 'none');

    onYouTubeIframeAPIReady(yt_id, div_iframe, 560, 315);

});

---

HTML：

<div id='yt_video_desktop' class='yt_video_link mobile_hide' data-ytid='<?=$yt_id?>'>
    <div id='yt_video_desktop_player' class='yt_video'>
        <img src='/catalog/images/yt_video_thumb_<?=$yt_id?>.jpg' alt='play desktop video' width='768' height='432' id='yt_video_desktop_iframe'>
    </div>
    <div class='yt_video_play'></div>
</div>

Answer 3

规则已更改，因此大多数新手机现在都允许您自动播放，但大多数视频流媒体网站（如 youtube 和 vimeo）尚未启用该功能。 html5 视频有效但 iframe 无效的原因是 youtube 禁用了它。

Answer 4

谷歌官方声明“由于此限制，autoplay、playVideo()、loadVideoById()等函数和参数将无法在所有移动环境中使用。

参考：https://developers.google.com/youtube/iframe_api_reference

Answer 5

通过添加参数playsinline: 1，我设法使自动播放在android和ios上工作。

  createYoutubePlayer() {
      this.youtubePlayer = new YT.Player('youtubePlayer', {
      videoId: 'YOURID', // YouTube Video ID
      width: 277,               // Player width (in px)
      height: 600,              // Player height (in px)
      playerVars: {
        autoplay: 1,        // Auto-play the video on load
        controls: 0,        // Show pause/play buttons in player
        showinfo: 1,        // Hide the video title
        modestbranding: 1,  // Hide the Youtube Logo
        loop: 1,            // Run the video in a loop
        fs: 0,              // Hide the full screen button
        cc_load_policy: 0, // Hide closed captions
        iv_load_policy: 3,  // Hide the Video Annotations
        autohide: 1,         // Hide video controls when playing
        playsinline: 1, //forbid fullscreen on ios
      },
      events: {
        onReady: (e) => {
          e.target.mute();
        },
        onStateChange: (e) => {this.onPlayerStateChange(e)}
      }
    });
  }

Answer 6

对于在 react native 上处理此问题的任何人，您可以覆盖用户代理，它就像一个魅力：

<WebView 
  userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36" 
  ...

Answer 7

视频自动播放不起作用的原因很简单。该功能在 iOS 和 Android 移动设备中被故意禁用。这样做的原因是为了节省移动用户的钱。此类设备（尤其是手机）通常使用按带宽收费的数据连接。