ICM Final Journal

Nov 15:

  • Working on making a P5 program that can play YouTube videos and switch between videos.
  • No progress since last week. I spent Thursday-Sunday working on finishing the Rembrandt for my show on Sunday and on Mon-Tues I had personal obligations to attend to.

Based on class feedback and discussions with Dano last week my program will consist of:

  • Using the YouTube API or making my own API in order to access a structure series of videos, with multiple in and out points. (To be determined as I do the project).
  • Until I get the program done, I will only use a few videos around the Departure-Initiation-Return cycle of the Hero’s Journey. I will populate with more videos once I have the bulk of the programming done.

Objectives to end of week:

  • Aim by end of week is to have a solid framework (or at a minimum a solid understanding of what it takes to develop such a framework) that I can use to orient my efforts around.

Nov 22:

  • I’m starting to find my way around this YouTube iFrame player API.
  • There’s numerous confusing elements to using this API. There is an expertise gap between my current level of P5/JS knowledge and the knowledge that the API guide assumes. That said, I am just trying stuff right now at the moment and discovering things by trial and error.
  • Discovery: the P5 alpha editor is somewhat inconsistent in its execution of the YouTube API. Sometimes it doesn’t read functions, sometimes it does.

Achievements of the day:

November 24:

  • Figured out the¬†onYouTubeIframeAPIReady() and¬†onPlayerReady(event) are executed before setup() is even called. I learned this using console.log numbers to show me what order things were presented.
  • I was trying to make two player objects, one for Harvest Moon, and one for Old Man, and somehow have a defined start/stop time for each of them respectively. But it looks like you can’t make two player objects since P5 only plays the first one created.
  • Figured out the format that playervars, a setting inside the creation of the YTPlayer object should take. It’s like this:

autoplay: ‘1’, — [i.e. the first value no quotes and second value in one finger quotes]

With this discovery, I can utilize the wide range of iFrame player customizations listed here.

Nov 28:

  • Previous attempts at loading a playlist did not work because I was not able to specify different start and end points for each separate video in the playlist, since the player objects only generically allows start/end points. This means I can’t do individualized start/end points, so if I want to use 0:08-0:13 of Harvest Moon and 0:03-0:07 of Old Man, it doesn’t work.
  • This being the case, I am not working on constructing multiple player objects so that each player object holds one video with a unique start/stop point.
  • Problem is, there is a DOM element to this that I don’t understand how the YTPlayer objects works and I don’t seem to be finding sufficient (or understandable) documentation. StackOverflow has been helpful in this regards and it looks like others have been in my shoes. But at this point, I don’t really get if I can have multiple iFrame objects
  • The YouTube API documentation, as well as StackOverFlow discussions, all refer to things in an “event” function that seems to be built into Javascript. Relvant functions include
    • event.target.a.id;
    • event.data;
    • event.target.playVideo();
  • While the API’s own documentation relies on event.data in theonPlayerStateChange function, event.data returns an “undefined” when printed in console.
    • function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.ENDED && !done) {
      setTimeout(nextVideo, 9300);
      done = true;
      }//is event.data only avail in these fucntions?

Leave a Reply

Your email address will not be published. Required fields are marked *