70

对于我的问题，我有一个链接<a href="http://www.youtube.com/embed/YT-ID" class="overlay_video"></a>。我想通过单击fancybox 覆盖窗口中的链接来播放视频。这不是问题。问题在于参数，例如“自动播放”或“自动隐藏”。

以下链接不起作用：

<a href="http://www.youtube.com/embed/YT-ID?autoplay=1" class="overlay_video"></a>

覆盖窗口打开，但视频没有自动播放。

编辑：我想在移动设备上使用 HTML5 播放器。在桌面浏览器上，它适用于参数，但不适用于移动设备。

4

6 回答 6

72

事实证明，无法在 iOS 设备（iPhone、iPad、iPod touch）和 Android 上进行自动播放。

请参阅https://stackoverflow.com/a/8142187/2054512和https://stackoverflow.com/a/3056220/2054512

于 2013-02-26T15:41:31.653 回答
19

看看下面的代码。测试并发现在移动和平板设备上工作。

<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div id="player"></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: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
  }

  // 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();
  }
</script>
于 2016-11-25T07:20:51.790 回答
12

下面的代码在 iPhone、iPad (iOS13)、Safari (Catalina) 上进行了测试。它能够在所有设备上自动播放 YouTube 视频。确保视频静音并且打开了playsinline参数。这些是使它工作的神奇参数。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes">
    </head>
  <body>
<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div id="player"></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', {
      width: '100%',
      videoId: 'osz5tVY97dQ',
      playerVars: { 'autoplay': 1, 'playsinline': 1 },
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
     event.target.mute();
    event.target.playVideo();
  }
</script>
  </body>
</html>
于 2019-12-10T12:38:16.247 回答
3

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

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

于 2020-08-19T11:59:12.670 回答
1

有一种方法可以让 youtube 自动播放，并播放完整的播放列表。获取 Android 版 Adblock 浏览器，然后访问 youtube 网站，并将其配置为桌面版页面，关闭 Adblock 浏览器，然后重新打开，您将拥有桌面版，其中自动播放将起作用。

使用桌面版本也意味着 AdBlock 可以工作。移动版本调用独立的 YouTube 播放器，这就是为什么您需要桌面版本的页面，以便自动播放可以工作，广告拦截也可以工作。

于 2016-01-09T07:15:27.353 回答
0

如何使用 Youtube 频道直播网址嵌入和自动播放。而不是必须为实时流更改而不断更新的视频 ID。

我混合了两组代码，并想出了一个从频道直播中嵌入的自动播放 Youtube 视频。

我感谢其他两位贡献者的帮助。希望这对其他人有所帮助。

示例流 https://www.youtube.com/embed/live_stream?channel=UCwobzUc3z-0PrFpoRxNszXQ

Zubi 于 2016 年 11 月 25 日 7:20 回答的以下代码适用于 Youtube 视频。

Darien Chaffart 的代码位于

https://stackoverflow.com/a/61126012/1804252

例子

<html>
<head>



</head>
<body>
<center>



<script src="https://www.youtube.com/iframe_api"></script>

<!-- Insert Livestream Video -->
<iframe id="live-video" src="https://www.youtube.com/embed/live_stream?channel=UCwobzUc3z-0PrFpoRxNszXQ&enablejsapi=1" width="100%" height="100%" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen enablejsapi="1"></iframe>

<!-- Basic API code for Youtube videos -->
<script>
  var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('live-video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
function onPlayerReady() {
  var url = player.getVideoUrl(); /*Use Youtube API to pull Video URL*/
  var match = url.match(/[?&]v=([^&]+)/);
  var videoId = match[1]; /*Use regex to determine exact Video URL*/
  // Insert a new iFrame for the livestream chat after a specific div named chatframe*/
  var livevid = document.createElement("iframe");
  livevid.src = 'https://www.youtube.com/live_chat?v=' + videoId + ''
  livevid.width = '100%';
  livevid.height= '100%';
  document.getElementById("chatframe").appendChild(livevid);
}
    function onPlayerStateChange() {
    }

    
    function onPlayerReady(event) {
      event.target.playVideo();
    }

    // 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, 90000000);
        done = true;
      }
    }
    function stopVideo() {
      player.stopVideo();
    }
       
</script>



</center>
</body>
</html>
于 2021-12-15T16:04:14.297 回答