Preventing the browser from reading the YouTube code until the image was clicked

asasass · November 24, 2018, 10:59pm

I know this is how it works using 1 video:

Would there be a way to add (seek to start) to any of these init codes I wanted to?
It’s the seek to start which I was trying to get to work.

  const startSeconds = 5;
  const endSeconds = 7;

  function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.ENDED) {
      player.seekTo(startSeconds);
    }
  }

        start: startSeconds,
        end: endSeconds
      },
      events: {
        "onStateChange": onPlayerStateChange
      }

Adding (seek to start) to whichever init codes I wanted to add them to.


(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        videoPlayer.init({
            video: wrapper.querySelector(".video"),
            playerVars: {
                start: 900,
                end: 1200
            }
        });
    }
    const cover = document.querySelector(".playa");
    cover.addEventListener("click", coverClickHandler);
}());

asasass · November 25, 2018, 1:45am

This is the type of code I’m looking to implement:

Without the jquery:

players = new Array();

    function onYouTubeIframeAPIReady() {
        var temp = $("iframe.yt_players");
        for (var i = 0; i < temp.length; i++) {
            var t = new YT.Player($(temp[i]).attr('id'), {
                events: {
                    'onStateChange': onPlayerStateChange,
                  'onReady': onPlayerReady,
                }
            });
            players.push(t);
        }
    }
    onYouTubeIframeAPIReady();

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            var temp = event.target.a.src;
            var tempPlayers = $("iframe.yt_players");
            for (var i = 0; i < players.length; i++) {
                if (players[i].a.src != temp) 
                    players[i].pauseVideo();
            }
        }
    }

This one works like that too:

When clicking on another video, the one before it pauses.

This does seem like it would be simple to implement.
But I don’t know how I would set it up.

On here:
https://jsfiddle.net/d72Lp43v/153/

asasass · November 25, 2018, 10:13am

This one uses:
event.target.getVideoUrl();

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING) {
    var temp = event.target.getVideoUrl();
    var tempPlayers = $("iframe.yt_players");
    for (var i = 0; i < players.length; i++) {
      if (players[i].getVideoUrl() != temp) players[i].pauseVideo();

    }
  }
}

Instead of
event.target.a.src;

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            var temp = event.target.a.src;
            var tempPlayers = $("iframe.yt_players");
            for (var i = 0; i < players.length; i++) {
                if (players[i].a.src != temp) 
                    players[i].pauseVideo();
            }
        }
    }

I don’t know which it should be.
And is there a difference in which is used?
Maybe one is more appropriate to use than the other for this.

And how would I remove the jquery from it?

And will it work in here?
https://jsfiddle.net/d72Lp43v/153/

I tried putting it in the code but I’m having trouble with it,
and it would need to be converted to .forEach

Paul_Wilkins · November 25, 2018, 11:12am

It looks like you are trying many different things that are related and similar, but aren’t quite what you actually require when it comes to looping some of the videos but not others.

Tomorrow I’ll have a go at everything you’ve come up with, and supply meaningful information about each of them.

asasass · November 25, 2018, 2:07pm

I hope you can provide information on this also, but that seems like the simplest thing to figure out. #348

They are full working codes, there’s a piece of jquery that needs to be removed, and it would need to be converted to .forEach.

I’m just not sure if it would use this:
event.target.getVideoUrl();

or this:
event.target.a.src;

Because both ways seem to work, but maybe one is right, and the other is wrong.

When clicking on another video, the one before it pauses.

About the looping thing, maybe there are different ways to loop other than using (seek to start) that I’m unaware of.

Paul_Wilkins · November 25, 2018, 9:36pm

Yes, that works in the following with a simple addition.

Once you have the youtube event you can get the player object, which is already being done.
From that player object you can get playerVars from player.b.b.playerVars
I looked through the available player function methods and didn’t find any that would give us playerVars any other way. It’s preferable to use built-in function methods but failing that, we can get it directly from player.b.b.playerVars
From there you can get the start value. With that there’s no need for the startSeconds or endSeconds parts of the code.

The only trouble there is customizing the code so that it knows if you want to loop or not. That can be easily achieved by adding a playerVars key/value pair of loop: true - that way you can check if playerVars.loop is true before seeking back to the start.

Yes, that is stopping all other video players when you start another one. I recommend that you focus on one thing at a time to help avoid confusion.

Using the built-in functions such as getVideoUrl() is preferable as that helps to protect you from from API changes in the future.

What do you want to work on first is the primary question here - looping playback or solo play?

The API doesn’t seem to provide any other way.

asasass · November 25, 2018, 9:39pm

When it comes to pausing / stopping the players.

I would first want to remove the jquery, and get it to work using ‘for loop’ with the jquery removed.

Then I would want to convert it to .forEach.

So, I’ll have a before and after.

But we can work on this one first, then do the other after:

Would there be a way to add ( seek to start ) to any of these init codes I wanted to?
It’s the seek to start which I was trying to get to work.

The first step is to do what?

Can I add this to a player?

Done Here:

  const startSeconds = 5;
  const endSeconds = 7;

  function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.ENDED) {
      player.seekTo(startSeconds);
    }
  }

        start: startSeconds,
        end: endSeconds
      },
      events: {
        "onStateChange": onPlayerStateChange
      }

asasass · November 25, 2018, 9:45pm

If this is good, what I have here, what would I do next?

      playerVars: {
        loop: true,
        start: startSeconds,
        end: endSeconds
      },


const startSeconds = 5;
  const endSeconds = 7;

  function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.ENDED) {
      player.seekTo(startSeconds);
    }
  }

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        loop: true,
        start: startSeconds,
        end: endSeconds
      },
      events: {
        "onStateChange": onPlayerStateChange
      }
    });
  }

Paul_Wilkins · November 25, 2018, 9:56pm

I can’t answer that yet because I haven’t yet received and answer from you about my question.

asasass · November 25, 2018, 9:57pm

looping playback is what that would be referring to, (seek to start) so that one first.

Then the other after. Which is the pausing / stopping of the videos.

Paul_Wilkins · November 25, 2018, 10:00pm

Okay then. You don’t need startSeconds or endSeconds, because those can be already defined when you init the player. From inside of the onPlayerStateChange function you can access playerVars via player.b.b.playerVars, and from there get to the start/end information.

asasass · November 25, 2018, 10:01pm

      playerVars: {
        loop: true,
        start: 5,
        end: 7
      },

Seek to what though?

This would become what?
startSeconds

(just the start number?)


  function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.ENDED) {
      player.seekTo(startSeconds);
    }
  }

Would become this?


  function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.ENDED) {
      player.seekTo(5);
    }
  }

Paul_Wilkins · November 25, 2018, 10:06pm

Well, get the playerVars, then use its start value.

asasass · November 25, 2018, 10:08pm

What do you mean by that?

I did it right here?

  function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.ENDED) {
      player.seekTo(5);
    }
  }

Paul_Wilkins · November 25, 2018, 10:17pm

No you didn’t. You haven’t got playerVars, and what you’ve done cannot currently handle different start values.

asasass · November 25, 2018, 11:19pm

Am I removing/ deleting this part?
player.seekTo();

Would I leave it empty:
player.seekTo(Would inside here stay empty?);

  function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.ENDED) {
      player.seekTo(5);
    }
  }

Paul_Wilkins · November 25, 2018, 11:23pm

No you are not.

No that isn’t supposed to be empty. Instead, you are supposed to use the start property from playerVars. Which means first, getting playerVars.

asasass · November 25, 2018, 11:26pm

I have this:

1.)

  function onPlayerStateChange(event) {
    const player = event.target;
    if (event.data === YT.PlayerState.ENDED) {
      player.seekTo(5);
    }
  }

And I have this part:

2.)

      playerVars: {
        loop: true,
        start: 5,
        end: 7
      },

1.) needs to find a way to access 2.) correct?

Getting playvars would mean onPlayerStateChange accessing the playvars section of 2.)

Paul_Wilkins · November 25, 2018, 11:28pm

Yes that’s right, and I’ve mentioned several times today already on precisely how you can do that.

asasass · November 25, 2018, 11:30pm

Would I be adding something to this line?

function onPlayerStateChange(event, playvars) {


function onPlayerStateChange(event, playVars) {
    const player = event.target;
    if (event.data === YT.PlayerState.ENDED) {
      player.seekTo(startSeconds);
    }
  }