使嵌入式YouTube视频自动播放和循环播放

Jus*_*ury 52 html css youtube youtube-api

我试图让一个基本的Youtube视频自动播放和自动循环嵌入页面,但我没有运气.

<div style="text-align: center; margin: auto"><object type="application/x-shockwave-flash" style="width:1120px; height:630px;" data="http://www.youtube.com/v/GRonxog5mbw?rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;version=3&amp;showinfo=0&amp;modestbranding=1&amp;fs=1">
<param name="movie" value="http://www.youtube.com/v/GRonxog5mbw?rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;version=3&amp;showinfo=0&amp;modestbranding=1&amp;fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object></div>
Run Code Online (Sandbox Code Playgroud)

小智 71

YouTubes HTML5嵌入代码:

<iframe width="560" height="315" src="http://www.youtube.com/embed/GRonxog5mbw?autoplay=1&loop=1&playlist=GRonxog5mbw" frameborder="0" allowfullscreen></iframe>?
Run Code Online (Sandbox Code Playgroud)

你可以在这里阅读:...(编辑链接死了.)...查看Internet Archive项目的原始内容.

http://web.archive.org/web/20121016180134/http://brianwong.com/blog/2012-youtube-embed-code-autoplay-on-and-all-other-parameters/

  • 但是视频每次都会重新加载,我该如何防止它像在 www.kolor.com 中一样,即使您在第一次自动重播后关闭了互联网,视频也会继续播放? (2认同)

Sal*_*n A 39

以下是YouTube嵌入式播放器参数的完整列表.

相关信息:

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

循环(支持的播放器:AS3,HTML5)值:0或1.默认值为0.对于单个视频播放器,设置为1将导致播放器一次又一次播放初始视频.在播放列表播放器(或自定义播放器)的情况下,播放器将播放整个播放列表,然后在第一个视频再次开始播放.

注意:此参数在AS3播放器和IFrame嵌入中的支持有限,可以加载AS3或HTML5播放器.目前,循环参数仅在与播放列表参数一起使用时才在AS3播放器中起作用.要循环单个视频,请将循环参数值设置为1,并将播放列表参数值设置为已在Player API URL中指定的相同视频ID:

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

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

  • 谢谢。将videoid添加到播放列表中有助于我一次又一次地循环播放同一视频。 (2认同)

Tar*_*rik 5

对于我来说,所有答案都不起作用,我检查了播放列表URL,发现播放列表参数已更改为list!因此应该是:

&loop = 1&list = 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>
Run Code Online (Sandbox Code Playgroud)

  • 在您的示例中,列表参数与视频 ID 不同。那正确吗? (4认同)

LuH*_*LuH 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>
Run Code Online (Sandbox Code Playgroud)