Comments (10)
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.
from richmondsunlight.com.
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.
from richmondsunlight.com.
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.
from richmondsunlight.com.
Looking at JWPlayer's playlist config options, I don't see that it supports time ranges (or even start times) within playlists.
from richmondsunlight.com.
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.
from richmondsunlight.com.
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.
from richmondsunlight.com.
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.
from richmondsunlight.com.
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.
from richmondsunlight.com.
Huh. That worked...perfectly?
from richmondsunlight.com.
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.
from richmondsunlight.com.
Related Issues (20)
- Menu kerning changes on hover
- Legislator lookup function is broken (again) HOT 1
- Fix admin tag-deletion functionality HOT 2
- Create an automated process to consolidate accounts
- Handful of IPs are racking up huge numbers of views HOT 2
- Install phpMyAdmin via Composer
- Move over Progress VA videos from old S3 bucket
- Deal with duplicate video records
- Ensure that retrieved video will always be embedded
- Legislators' coordinates are reversed
- Redo login form
- Update admin video section for SQS-based system
- Display legislators' bill notes on the bill pages HOT 2
- Support browser geolocation for legislator lookup HOT 1
- Save snapshots of LIS bulk data HOT 1
- Figure out why votes are not being exported as test data HOT 3
- Switch from raster to vector map tiles on legislator pages HOT 1
- Move back to storing sessions in Redis
- Consider adding instant.page
- Move away from Travis HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from richmondsunlight.com.