让嵌入的 YouTube 视频自动播放和循环

问题描述 投票:0回答:6
html css youtube youtube-api
6个回答
105
投票

YouTube HTML5 嵌入代码:

<iframe width="560" height="315" src="http://www.youtube.com/embed/GRonxog5mbw?autoplay=1&loop=1&playlist=GRonxog5mbw" frameborder="0" allowfullscreen></iframe>​

您可以在这里阅读:链接查看互联网档案项目上的原始内容。


49
投票

这里是 YouTube 嵌入式播放器参数的完整列表

相关信息:

自动播放(支持的播放器:AS3、AS2、HTML5)值:0 或 1。默认 为0。设置初始视频是否自动播放 播放器加载。

loop(支持的播放器:AS3、HTML5)值:0 或 1。默认值为 0。 对于单个视频播放器的情况,设置为 1 将导致 播放器一次又一次地播放初始视频。如果是 播放列表播放器(或自定义播放器),播放器将播放整个 播放列表,然后从第一个视频重新开始。

注意:该参数在 AS3 播放器和 IFrame 嵌入,可以加载 AS3 或 HTML5 播放器。 目前,loop参数仅在AS3播放器中使用时有效 与播放列表参数结合使用。要循环播放单个视频, 将循环参数值设置为1并设置播放列表参数值 到已在播放器 API URL 中指定的相同视频 ID:

http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID

在嵌入代码中使用上面的 URL(也附加其他参数)。


10
投票

所有答案都不适合我,我检查了播放列表 URL 并看到播放列表参数更改为列表!所以应该是:

&循环=1&列表=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs

这是我用来制作干净、循环、自动播放视频的完整代码:

<iframe width="100%" height="425" src="https://www.youtube.com/embed/MavEpJETfgI?autoplay=1&showinfo=0&loop=1&list=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs&rel=0" frameborder="0" allowfullscreen></iframe>

5
投票

播放列表破解对我来说也不起作用。 2018 年 9 月的工作解决方法(奖励:通过 CSS 设置

#yt-wrap
的宽度和高度,而不是在 JS 中对其进行硬编码):

<div id="yt-wrap">
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="ytplayer"></div>
</div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_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 onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      width: '100%',
      height: '100%',
      videoId: '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();
    player.mute(); // comment out if you don't want the auto played video muted
  }

  // 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.
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.seekTo(0);
      player.playVideo();
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

4
投票

有同样的经历,但是对我来说最神奇的不是将嵌入更改为 v。

所以代码看起来像这样......

<iframe width="560" height="315" src="https://www.youtube.com/embed/cTYuscQu-Og?Version=3&loop=1&playlist=cTYuscQu-Og" frameborder="0" allowfullscreen></iframe>

希望有帮助...


0
投票

TL;DR:Youtube 开发演示

您现在可以使用 youtube 开发人员示例为您构建嵌入标签。

单击

Share
>
Embed
>
Developer Sample

在那里,您可以构建标签(显示播放器参数有好东西):

© www.soinside.com 2019 - 2024. All rights reserved.