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代码的一部分但是样式属性中只有样式。这对自动播放并不重要。其他页面的最终URL也一样。我不知道为什么。我有什么提示可以解决这个问题吗？

提前致谢。

Answer 1

我能够播放 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 2

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

视频自动播放不起作用的原因很简单。功能是 iOS和Android中的移动设备故意disabled。这样做的原因是为移动用户节省了资金。这样的设备（特别是移动电话）经常使用收费的数据连接带宽。他们有数据限制并收取费用。

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

Answer 3

通过添加参数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 4

规则已经改变，所以大多数新手机现在都会让你自动播放，但大多数视频流网站如youtube和vimeo还没有启用这项功能。 html5视频工作但iframe没有的原因是因为youtube禁用了它。

Answer 5

Google官方声明“由于此限制，诸如autoplay，playVideo（），loadVideoById（）之类的功能和参数无法在所有移动环境中正常工作。

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

Answer 6

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

Youtube在手机上嵌入了自动播放功能

6 个答案: