p5.js video stops after a while

[szmarci]

it stops at about one third of the video. after it starts for a few seconds and stops for more seconds, and so on... I thought it was some buffering issue, but after leaving it for a couple of minutes the same happens. it is the newest Chrome, on a Mac OS X 10.9.3. are there a pre-rendered version of the video? I know this way the interactivity is lost, but at least it would be accessible for a lot of people.

[scottgarner]

Thanks for the report, @szmarci. Sorry to hear you're having issues.

It's unusual because we're pre-buffering the entire video before it starts playing, so hiccups like this shouldn't happen. I'm wondering if it's an issue with the way we're effectively using GitHub as a CDN. Vimeo would probably be a smoother choice, but browser security issues prevent the use of video textures from other domains.

Would you mind testing in Safari?

My initial feeling is that since this seems to be a network/buffering issue, there's probably not much we can do on our end. A pre-rendered alternative is a good suggestion. I'll have to wait a week or so before I'm back at a computer that can handle rendering and capturing at the same time.

[szmarci]

Hi Scott, I've tested both Safari and Chrome Canary, but both are equally bad. After 1 or 2 seconds choppiness starts. First I suspected network/CDN issue as well, but then it should be almost the same in all browser, right? In the latest stable Chrome the point of failure varies a lot. Right now it stops about where Dan appears. Yesterday it went longer, about 1/4, maybe even 1/3 of the video. Firefox is kind of the same. I have a 10 Mbit connection, everything is smooth, but this. It's weird...

[scottgarner]

Very strange! We're specifically using the canplaythrough event to start the video, which should only fire after the browser determines that it can play through the video without stopping. Your problem seems to indicate that the file starts to load quickly at first and then has problems. I wonder if it has something to do with the particular GitHub CDN node that serves you?

Would you mind looking at the raw videos to see if there's anything strange about the way they load?

http://hello.p5js.org/assets/video.mp4 http://hello.p5js.org/assets/video.webm

(Chrome will play both formats, Safari will only play mp4 and Firefox will only play webm).

Thanks!

[szmarci]

Loading the raw files, they all seem to have the same issue. But if it's a GitHub CDN thing, then there's nothing you (or I) can do about, I guess. Only GitHub.

[scottgarner]

Well, bummer. It looks like GitHub uses Fastly for Github Pages, but that information doesn't really help us here.

[scott@aether ~]$ host hello.p5js.org
hello.p5js.org is an alias for scottgarner.github.io.
scottgarner.github.io is an alias for github.map.fastly.net.
github.map.fastly.net has address 23.235.47.133

One thought might be to clear you DNS cache and hope that you land on a better CDN node next time it resolves, but I'm not totally sure that would work. In terminal, you could run dscacheutil -flushcache and then clear your cache in Chrome and see if that makes a difference.

Another option would be a very hacky entry in your /etc/hosts file to make hello.p5js.org resolve to a different CDN node, but that certainly wouldn't be ideal. Something like this:

23.235.47.133 hello.p5js.org

But that's a lot of fuss to make one website work. ;-)

[szmarci]

thanks, after a couple of DNS cache flushes I was able to watch the whole video. still it was a little choppy and out of sync, but finally I could go from start to finish :)

[scottgarner]

Well, I'm glad it mostly worked. Sorry about the trouble.

I'm going to try to reach out to Vimeo and see if there's a way we can work on this for future projects.

Thanks again for the feedback.