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?
}
- function onPlayerStateChange(event) {