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:

• I made a P5 sketch that plays the YouTube video for Neil Young’s Harvest Moon on a repeat of the opening chord.
• Learned how to make a playlist in the iFrame API. (You can’t just plug in a YT playlist number, you gotta actually manually enter all the videos into an array.)

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?
    }