Package Exports

cinematic

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cinematic) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Cinematic.js

Travis npm

Heroku: http://cinematic-js.herokuapp.com/
Bower: bower install cinematic

Screencap

Getting Started

Simply define your video element by adding it to the DOM as usual, and then add the data-cinematic flag:

<video data-cinematic>
    <source src="video/output.mp4" type="video/mp4">
</video>

Cinematic.js will then pick up the video and determine how to seek in the video based on the ratio to the scrollTop property and the document's height.

Note: It's entirely up to you to render the video – see using ffmpeg; any stalling in the seeking of the video is — most likely — a video encoding problem, and not a problem of the Cinematic.js module.

In the example, Cinematic.js comes with LeicesterSquareHigh.mp4 and LeicesterSquareLow.mp4 where the difference between the two in terms of file-size is significant, whereas the quality isn't too noticeable.

Happy experimenting!

Using ffmpeg

The most important aspect of the library is the video itself – it must have a generous number of keyframes, which can be defined by experimenting with the -g flag:

ffmpeg -i input.mp4 -g 10 output.mp4

Try experimenting with the -g flag to achieve a compromise between file-size and the quality. Another flag that you can experiment with is the -crf flag which relates to the video's constant rate factor – this ranges from 1 to 51. You can try changing the value to achieve a satisfying compromise:

ffmpeg -i input/mp4 -g 10 -crf 40 output.mp4