Fix video clips

[waldoj]

Video clips aren't playing—the link just goes to archive.org.

[waldoj]

IIRC, I spent hours on this a few months ago. I tried to move to the HTML5 version of the video player, but I couldn't get it to play nicely with byte ranges, and gave up.

[waldoj]

Faintly, I remember that the HTML version of Flowplayer simply doesn't support playlists of byte ranges. So that's something that will need investigation.

[waldoj]

I note that the Internet Archive uses JWPlayer, and there's no trouble skipping around between times there. So that's compatible. Whether JWPlayer supports timestamp granularity on playlists remains to be seen.

[waldoj]

Looking at JWPlayer's playlist config options, I don't see that it supports time ranges (or even start times) within playlists.

[waldoj]

Ah, so any modern (HTML5) video player supports byte-range requests, because it's fundamental to the <video> element. So this is really just a playlist problem at this point.

[waldoj]

In theory, this could be done with jPlayer. The play method takes an optional time parameter, so that can start at a specified time. We know how many seconds it's been playing, and, using the jPlayerPlaylist plugin's select method, we can move to other playlist items. So it'd only be a matter of stringing those together.

MediaElement.js has a playlist plugin, and has currentTime get/set methods, so presumably that would work, too.

Finally, there's Video.js. That might be too simplistic for our purposes.

It's worth considering that Flowplayer or JWPlayer might work, too, if we're dropping our standards to "could probably create this functionality via JavaScript. With the caveat that what I don't know about JavaScript is a great deal.

[waldoj]

Oh, hey, I just found in this bill.php:

COMMENTED OUT 08/20/2014
I was testing out moving to HTML5 video, which is long overdue, but then I remembered why I didn't
do this a long time ago -- FlowPlayer doesn't support clips in HTML 5. You can apparently fake it
by setting up cuepoints, and using seek(startpos), pause(), etc.

At this point, I'm inclined to stick with FlowPlayer. If I'm going to be writing JavaScript, I might as well work with a known quantity.

[waldoj]

I think it'll work like this:

• Retrieve a JSON playlist of video clips for a given bill, including the URL, the start time, and the duration.
• Load it as a playlist.
• Set up cuepoints for each video, indicating the time at which to jump to the next video.
• When the cuepoint is hit, advance to the next video in the playlist.
• As each video is loaded, seek() to the start time.
• If the video is the last one in the playlist, stop when the cuepoint is hit, instead of advancing to the next video.

[waldoj]

Huh. That worked...perfectly?

[waldoj]

This has been implemented on the bills page. It remains to be implemented on the video and legislator pages. It would also be wise to add a playlist visible to the user.