Fork me on GitHub

Frame Player

A video player without video files, just JSON. Based on "images frames" thought to mobile devices!



Very Simple! Just load the script frameplayer.js and this simple markup on your HTML, and use:

        <div id="my-player" data-vidsrc="video.json"></div>
        <script src="js/frameplayer.js"></script>
        var options = ({
            'rate': 30,
            'controls': false,
            'autoplay': true,
            'width': '640px',
            'height': '390px',
            // 'radius': '50%'

        var player = new FramePlayer('my-player', options);;


First, use ffmpeg to generate the frames from a video file:

        $ ffmpeg -i video.mp4 -an -f image2 "%d.jpg"

Convert all frames on a single JSON file:

    # Option 1: Node.js
    $ cd converter/nodejs
    $ node app.js frameStart frameEnd folder/to/imgs/ json/video.json

    # Option 2: PHP
    $ cd converter/php
    $ php to_data_uri.php frameStart frameEnd folder/to/imgs/ json/video.json