YouTube API - 在设定的开始和结束时间之间循环播放视频

问题描述

我已经设法在我需要的时候开始和结束视频，但是有什么方法可以循环播放吗?循环选项似乎没什么用.

小提琴: https://jsfiddle.net/u7nkz292/>

代码:

<div id="ytplayer"></div><脚本>//异步加载 IFrame Player API 代码.var tag = document.createElement('script');tag.src = "https://www.youtube.com/player_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);//用 <iframe> 替换 'ytplayer' 元素和//API 代码下载后的 YouTube 播放器.var 播放器；函数 onYouTubePlayerAPIReady() {player = new YT.Player('ytplayer', {高度:'360'，宽度:'640'，视频 ID:'M7lc1UVf-VE'，玩家变量:{autoplay: 1,//加载时自动播放视频control: 0,//在播放器中显示暂停/播放按钮showinfo: 0,//隐藏视频标题mediumbranding: 1,//隐藏 Youtube 标志fs: 1,//隐藏全屏按钮cc_load_policy: 0,//隐藏字幕iv_load_policy: 3,//隐藏视频注释开始: 36,结束: 45,loop: 1,//循环运行视频autohide: 0//播放时隐藏视频控件},});}

解决方案

可以实现onStateChange回调&使用相同的 startSeconds & 加载视频endSeconds 参数与 loadVideoById :

//异步加载 IFrame Player API 代码.var tag = document.createElement('script');tag.src = "https://www.youtube.com/player_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);var videoId = 'M7lc1UVf-VE';var startSeconds = 36;var endSeconds = 45;//用 <iframe> 替换 'ytplayer' 元素和//API 代码下载后的 YouTube 播放器.var 播放器；var playerConfig = {高度:'360'，宽度:'640'，视频ID:视频ID，玩家变量:{autoplay: 1,//加载时自动播放视频control: 0,//在播放器中显示暂停/播放按钮showinfo: 0,//隐藏视频标题mediumbranding: 1,//隐藏 Youtube 标志fs: 1,//隐藏全屏按钮cc_load_policy: 0,//隐藏字幕iv_load_policy: 3,//隐藏视频注释开始:开始秒，结束:结束秒，autohide: 0,//播放时隐藏视频控件},事件:{'onStateChange': onStateChange}};函数 onYouTubePlayerAPIReady() {player = new YT.Player('ytplayer', playerConfig);}函数 onStateChange(state) {if (state.data === YT.PlayerState.ENDED) {player.loadVideoById({视频ID:视频ID，开始秒:开始秒，结束秒:结束秒});}}

这里是小提琴

I've managed to start the video and end the video at the times I need, but is there any way to loop this? The loop option doesn't seem to be doing much.

Fiddle: https://jsfiddle.net/u7nkz292/

Code:

<div id="ytplayer"></div>



<script>
  // Load 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);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: 'M7lc1UVf-VE',
          playerVars: {
      autoplay: 1,        // Auto-play the video on load
      controls: 0,        // Show pause/play buttons in player
      showinfo: 0,        // Hide the video title
      modestbranding: 1,  // Hide the Youtube Logo
      fs: 1,              // Hide the full screen button
      cc_load_policy: 0, // Hide closed captions
      iv_load_policy: 3,  // Hide the Video Annotations
      start: 36,
      end: 45,
      loop: 1,            // Run the video in a loop
      autohide: 0         // Hide video controls when playing
    },
    });
  }
</script>

解决方案

You can implement onStateChange callback & load the video with the same startSeconds & endSeconds parameter with loadVideoById :

// Load 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);

var videoId = 'M7lc1UVf-VE';
var startSeconds = 36;
var endSeconds = 45;

// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;

var playerConfig = {
  height: '360',
  width: '640',
  videoId: videoId,
  playerVars: {
    autoplay: 1, // Auto-play the video on load
    controls: 0, // Show pause/play buttons in player
    showinfo: 0, // Hide the video title
    modestbranding: 1, // Hide the Youtube Logo
    fs: 1, // Hide the full screen button
    cc_load_policy: 0, // Hide closed captions
    iv_load_policy: 3, // Hide the Video Annotations
    start: startSeconds,
    end: endSeconds,
    autohide: 0, // Hide video controls when playing
  },
  events: {
    'onStateChange': onStateChange
  }
};

function onYouTubePlayerAPIReady() {
  player = new YT.Player('ytplayer', playerConfig);
}

function onStateChange(state) {
  if (state.data === YT.PlayerState.ENDED) {
    player.loadVideoById({
      videoId: videoId,
      startSeconds: startSeconds,
      endSeconds: endSeconds
    });
  }
}

Here is a Fiddle

这篇关于YouTube API - 在设定的开始和结束时间之间循环播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！