Converting the inline javascript to pure javascript, how would this be done?

asasass · October 25, 2018, 3:03am

Update:

Yes it is still needed because without it, then it wouldn’t work.
So it stays in.

I just answered this question above:

Is this youtube api stuff necessary to have in this code?

    var tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

With it inside:

With it removed from the code:

asasass · November 10, 2018, 1:54am

Because player is being defined here:

let player;

Would I add this
player =

back on to this?

player = new YT.Player(video, {,

or is it not being defined, and it’s still useless to add back on?
or it is being defined, but it’s still useless to add back on?

or, yes, I should add it back on because it serves a purpose in that case?

asasass · November 10, 2018, 11:11am

I’m asking this because:

In the api it’s shown like this:

  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }
</script>

Because the code now uses this:
let player;

Would I add this
player =

back on to this?

player = new YT.Player(video, {,

Would that make sense to do?

Would it now be serving a purpose, or no?

Paul_Wilkins · November 10, 2018, 9:59pm

The let player is a bit of a hack, allowing code below it to update the player variable so that other code below it can get the player.

Let’s look at what the code does with player, and find out if other techniques might be more beneficial.

loadClickHandler

The player variable is used first in the loadClickHandler() function:

  function loadClickHandler() {
    loadPlayer();
    player.playVideo();
  }

That can never work. The loadPlayer function adds a script tag to load the youtube player library, and doesn’t have time to do anything before the player.playVIdeo line occurs.

Instead, the playVideo line needs to happen when the player is ready, which is why we have the onPlayerReady function. It needs to be moved down to there instead.

  function loadClickHandler() {
    loadPlayer();
    // player.playVideo();
  }
//...
  function onPlayerReady(evt) {
    //...
    player.playVideo();
  }

That attempts to play, but is stopped because the sandbox that jsFiddle runs the code in, doesn’t allow automatic presentations to occur.

As soon as the code is run outside of jQuery, the youtube video starts playing fine.

colorClickHandler

This code changes the of the lines and starts the player. It’s already started though by the onPlayerReady code too, so duplication is occurring here.

We can instead have the onPlayerReady code call the changeColor function, and there’s now no need for the colorClickHandler function.

  // function colorClickHandler(evt) {
  //   changeColor();
  //   player.playVideo(); 
  // }
//...
  //wrapper.addEventListener("click", colorClickHandler);
//...
  function onPlayerReady(evt) {
    const player = evt.target;
    changeColor();
    player.setVolume(50); // percent
    player.playVideo();
  }

Remove let player

Nothing is left that accesses the player, so there’s no need for that let player statement.

  // let player;
//...
  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    // player = new YT.Player(video, {
    new YT.Player(video, {

Just remember that in jsfiddle when the youtube player shows the More videos panel, it has already started playing but was stopped because the jsfiddle sandbox doesn’t allow autoplay of videos. When you use the code outside of jsfiddle, it works well.

asasass · November 10, 2018, 10:39pm

It auto starts now:

That’s going to drive me nuts.

This is the last updated version I did:


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

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const wrapper = cover.parentNode.querySelector(".wrapg");
    hide(cover);
    show(wrapper); // video
  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());

(function videoPlayer() {
  "use strict";

  let player;
  const load = document.querySelector(".jacketc");
  const wrapper = document.querySelector(".wrapg");


  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function changeColor() {
    wrapper.classList.add("playerStatus");
  }

  function loadClickHandler() {
    loadPlayer();
  }

  function colorClickHandler() {
    changeColor();
    player.playVideo();
  }
  load.addEventListener("click", loadClickHandler);
  wrapper.addEventListener("click", colorClickHandler);


  function onPlayerReady(evt) {
    // const player = event.target;
    player = evt.target;
    player.setVolume(50); // percent
  }

  function onPlayerStateChange(evt) {
    // possible states values are:
    // -1 (unstarted), 0 (ended), 1 (playing),
    // 2 (paused), 3 (buffering), 5 (video cued).
    const state = evt.data;
    if (state > 0) {
      changeColor();

    }
  }

  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  };
}());

I used just this:
https://jsfiddle.net/byw5szgt/59/

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

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const wrapper = cover.parentNode.querySelector(".wrapg");
    hide(cover);
    show(wrapper); // video
  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());

Instead of:
https://jsfiddle.net/byw5szgt/60/

This:

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

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".wrapg");
    hide(cover);

  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());

And this:

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

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    const video = wrapper.querySelector(".video");
    show(wrapper);
  }

  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());

asasass · November 11, 2018, 12:24am

I made a .html file and it autoplays after you click on it inside firefox:
And inside jsfiddle inside firefox.
That’s not good.

And here’s your updated code, with my updated code which does both the cover and video stuff inside one function instead of two.


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

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const wrapper = cover.parentNode.querySelector(".wrapg");
    hide(cover);
    show(wrapper); // video
  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());
(function videoPlayer() {
  "use strict";

  let player;
  const load = document.querySelector(".jacketc");
  const wrapper = document.querySelector(".wrapg");


  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function changeColor() {
    wrapper.classList.add("playerStatus");
  }

  function loadClickHandler() {
    loadPlayer();
  }

  load.addEventListener("click", loadClickHandler);

  function onPlayerReady(evt) {
    const player = evt.target;
    changeColor();
    player.setVolume(50); // percent
    player.playVideo();
  }

  function onPlayerStateChange(evt) {
    // possible states values are:
    // -1 (unstarted), 0 (ended), 1 (playing),
    // 2 (paused), 3 (buffering), 5 (video cued).
    const state = evt.data;
    if (state > 0) {
      changeColor();

    }
  }

  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  };
}());

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

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    const video = wrapper.querySelector(".video");
    show(wrapper);
  }

  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());*/

Paul_Wilkins · November 11, 2018, 11:33am

I’ll do some further testing tomorrow, after which I’ll be taking the week off.

Paul_Wilkins · November 11, 2018, 7:53pm

Why is that not good?

When you click the play button, it plays. That is fully expected behavior for when you click the play button.

asasass · November 11, 2018, 7:55pm

What if I don’t want it to auto play?

Paul_Wilkins · November 11, 2018, 7:58pm

Playing when you click the play button is not autoplay.
It doesn’t play until you click the play button. So don’t click the play button.

Paul_Wilkins · November 11, 2018, 7:58pm

If you want it to do something different than that, then you are breaking expected behaviour, which is best to be avoided.

asasass · November 11, 2018, 7:59pm

What if I used:
player.stopVideo();

Paul_Wilkins · November 11, 2018, 8:00pm

Then you’ll be doing something that doesn’t make much sense.

asasass · November 11, 2018, 8:03pm

I see what you mean now how it works outside of jsfiddle.

asasass · November 11, 2018, 8:04pm

Do you have time for a question about the iframe player in the other thread?

Paul_Wilkins · November 11, 2018, 8:08pm

I’ll do what I can.

asasass · November 11, 2018, 8:41pm

My other question was this:

If I wasn’t using this:

 /* function onPlayerStateChange(evt) {
    // possible states values are:
    // -1 (unstarted), 0 (ended), 1 (playing),
    // 2 (paused), 3 (buffering), 5 (video cued).
    const state = evt.data;
    if (state > 0) {
      changeColor();

    }
  }

"onStateChange": onPlayerStateChange */

With ‘onPlayerStateChange’ removed, the border changes color only if you mouseclick on the border or the lines.

What kind of function would I make so that when the video itself is clicked, the lines would change color?

i.e., How would you add a click event to the youtube, without using their api?

I was trying to figure that out.

added: onPlayerStateChange: The borders change colors after it’s clicked.

With ‘onPlayerStateChange’ removed, how would I get it to work the same way?

removed: onPlayerStateChange
https://jsfiddle.net/byw5szgt/129/

What controls the color stuff:

const wrapper = document.querySelector(".wrapg");

function changeColor() {
    wrapper.classList.add("playerStatus");
}

function colorClickHandler() {
    changeColor();
}
wrapper.addEventListener("click", colorClickHandler);

Click on the youtube player, lines change color.

This one also has no cover on it.

Paul_Wilkins · November 11, 2018, 8:50pm

You might be able to use a click handler on the iframe element, but that’s just a guess at this stage.

asasass · November 11, 2018, 8:53pm

I was thinking that too.

But how would that be written?

There’s no iframe written into the html though.

It’s just this:

<div class="wrapg ">

  <div class="video " data-id="M7lc1UVf-VE"></div>

  <div class="lines"></div>
</div>

I found this:

And this thread:

Paul_Wilkins · November 11, 2018, 9:05pm

Which jsfiddle example do you have where the youtube player is added without the youtube library being used?