ICM Final Journal

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.

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.

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]

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.