elex-webVideoTextCrawler
Converts elex data to a text crawler for HTML5 Video.
It converts into a plain text file.
Alternatevly it can also convert it to a vtt file (subtitle file).
If using the vtt file, it can be used as a HTML5 video track.
With video js live streaming could be supported. And video js captions plugin roll-on mode would make it resemble tv text crowlers.
Another option is to do some CSS Styling on the VTT track element, to animate the scroll.
(For more on HTML5 video text track see)HTML5RocksVideo.
Example
For the porpouse of the example, in ./HTML5VideoExample
a plain text is used, and loaded into to marquee
tag to have animated scroll below the video.
For more on marquee tag see here
How it works
Given an elex results json filetest/results.json
, index.js
creates a plain text file. This plain text file that contains the info of the candiates last name, state and vote count.
Other options (vtt)
From line 29 to 54, the code to export as vtt file(subtitle tiel) is commented out.
Uncomment that code to export as vtt.
When exporting with vtt, to obtain the text crawler effect it's necessary to play a round with CSS tags on the vtt file.
How to use
npm start yourJsonFileWithPath.json
if you want to try out the example.
npm start ./test/results.json
This generates results.json.txt
Run the example
To try it in the example you can move this to the example folder
mv ./test/results.json.txt /HTML5VideoExample/results.json.txt
to run the example you need to start a server in the directory HTML5VideoExample
.
cd into that directory and run a server like python -m SimpleHTTPServer 8080
.
Navigate to http://localhost:8080
in your browser, and you should see the example.
Default example can also be viewed here
Design
The parsing of elext json has been abstracted into a separate component, in order to allow flexibility to implement conversion to other types of jsons.