So, last week Stanford ai-class has started.
Immediately found out that not being able to read question for quizzes in text was a problem. And clicking trough video to see it in the subs was not that fun aether. Immediately got an idea to fix that for myself and make an exercise in HTML/JS/CSS out of it (I am kind of slowly learning it all trough small projects like this for last year).
Try number one: bookmarklet
After checking ai-class page and requests found out from where player gets subs. Whole link is large and contains lot of unnecessary parameters, experimenting with it shrunk it down to smaller size. And here how it looks.
In the end I failed with that idea as there is no way to really figure out which video is playing right now on ai-class site. At least trough JS/HTML. May be it is possible to somehow query YouTube player for that.
P.S Killed lot of time on hacking 3 levels of escaping of quotes. First quotes were for anchor href attribute in which bookmarklet code goes. Then quotes inside that code. And third quotes level in that YQL request I hate escaping!
Try number two: php curl
Next quick try was to test PHP curl and see if I can retrieve subs from those urls on server side and make a page out of it. Tried, failed, after lot of fighting with JS on previous step gave up fast. And I don’t have idea how to “debug” curl http requests on server side anyways.
Try number three: Flash local app
Well after some fighting with JS and PHP I fall back to dark side I am Flash developer for last 5 years soo… Something like an hour and I got this:
Just an app where I paste link to AI-Course video and get their subs formatted for reading.
Until homework started this was enough for me.
Try number 4: YouTube JS Api + XML
While doing home works I realized that only text for current video is not enough. Seeing people making lecture notes helped that realization. So I needed ability to get all subs together and search trough them. But wait, text is not enough. Jumping to other videos I need to quickly refresh my knowledge is a “must” too.
First things I went to check was how to get list of ai-class lectures automatically. I am a programmer and for me doing copypasting job is a disgrace. I better write a script to do it for me Poked around Zen GData library for PHP and its YouTube API. Turned out it was not so good for what I needed and there was easier way just trough links like this. Sadly it only lists public videos, so no homework’s. And also order is mixed, ended up parsing video names for ordering. Also turned out that only video owner can get subs trough their API So my hacky way of spoofing player requests seems to be the only way.
Anyways, rewrote my Flash app to get all videos from there, sort them, get subs for each trough old method and output an XML like this. Also ended up adding homework video ids by hand.
And then started making site:
- Made a PHP page with YouTube player and scripts to control it. Fast and easy.
- Used SimpleXML in PHP to parse XML and output a list of lectures with subs. Easy again.
- And then part I don’t like about current standard web development came, layout trough CSS. It got lot better in last 5 years but its still feels like hacking around achieving what you need trough not intuitive means. That’s why Flash won me over 7 years ago
P.S I actually love CSS selectors idea, just layout part feels broken. And I love jQuery for bringing selectors to JS.
- You can open or close lectures separately. Or close/open them all together.
- You can read whole transcripts of lectures and search trough them trough standard browser means.
- And you can click on button to the right of each line to jump to that video on that moment. Magic!
There are still some problems though:
- Firstly, using lists for layout here seems to be a bad idea. Should have used table with two columns instead. Will try soon.
- There are some issues under Mac/Safari with referencing YouTube Player. As I am under winds can try stuff only blindly.
- And script for making an XML still is in Flash/AS3, will need to spend some time trying to port it to PHP, not sure it will work.