5

So, to know exactly what I'm trying to do, I suppose it's best to look at my code below:

<iframe class="youtube-player" type="text/html" width="280" height="35" src="http://www.youtube.com/embed/XejH7tnOVKA?vq=tiny&autoplay=1&fs=0&iv_load_policy=3&loop=1&rel=0&showinfo=0&color=white&autohide=0&disablekb=1&end=10&playlist=XejH7tnOVKA" frameborder="0"></iframe>

Basically everything works, except the following happens: The video starts playing, it ends at 10 seconds, it loops (restarts), and from that point on it just replays the whole video, instead of stopping at 10 seconds.

Is there any workaround for this? I've really searched all of the web, but I haven't been able to find anything.

PS: I used a blank video, because I don't feel like sharing the video I want to use for this. The 10 seconds is also only for ease of testing.

5

I think the below code is exactly what you want. I did this by combining https://developers.google.com/youtube/iframe_api_reference and Iframe API.

Just replace the video iD, and test it on your local pc.

<div id="myvideo"></div>

<script async src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
var videoId='Your Video ID';
var startSeconds = 4;  // set your own video start time when loop play
var endSeconds = 27;   // set your own video end time when loop play
var playerConfig = {
  height: '250',
  width: '100%',
  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,       // reference to Iframe API
        onReady: function(e) {              // mute the video when loaded
        e.target.mute();             
      }
    }
};
//excute the video in div
function onYouTubePlayerAPIReady() {

  player = new YT.Player('myvideo', playerConfig);

}
//repload the video when onStateChange=YT.PlayerState.ENDED)
function onStateChange(state) {
  if (state.data === YT.PlayerState.ENDED) {
    player.loadVideoById({
      videoId: videoId,
      startSeconds: startSeconds,
      endSeconds: endSeconds

    });
  }
}

</script>
2

The problem you are seeing is from the &playlist= tag. What it looks like (to me) is that you were having problems getting 'loop' and 'autoplay' to work together, so you added the 'playlist' tag.

What's happening here is that the API is being tricked into playing the same video over and over by making it think that it's in an infinite playlist of the same video. After the video ends, the next video plays.. which happens to be the same video. However, the 'end' tag was only applied to the first instance of the video.

In order to achieve this, your best bet is to use the YouTube Javascript API as pensan suggested.

0

Take a look at the YouTube JavaScript API. There are functions like player.getCurrentTime() which return the elapsed time of the video. The function player.seekTo(0) will set the player to the beginning of the video.

You could write a small script which resets the player after a specific time (setTimeout) or you could check continuously the getCurrentTime function.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.