README.md

February 19, 2016 · View on GitHub

#Frame Player

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

##The Problem The problem of today's HTML5 video is that it can't be played in-line on an HTML page on mobile devices. The way the handheld devices handle it is they open the video in a native player which takes over the page itself, making it impossible to implement any interaction while the video is playing. Also, you can't play two videos at the same time.

##The Solution Create a player instead of playing video files, show a sequence of images at a certain rate.

##Instalation

  • Download the latest version of Frame Player.

  • OR Use bower to install Frame Player

bower install frame-player
  • Put the script and the style on your page
    <link rel="stylesheet" href="path-to/frameplayer.css">
    <script src="path-to/frameplayer.js"></script>

##Usage

  • Insert this HTML code on any part of your page and set the data-src attribute for your JSON video file
    <div id="my-player" class="frameplayer" data-vidsrc="videos/video.json"></div>
  • Set the options
var options = ({
    'rate': 30,
    'controls': false,
    'autoplay': true,
    'backwards': false,
    'startFrame': 10,
    'width': '640px',
    'height': '390px',
    // 'radius': '50%'
});
  • Init the player
var player = new FramePlayer('my-player', options);
	player.play();

Methods

MethodParametersReturnsDescription
play()None.Nothing.Start playing the video.
pause()None.Nothing.Pause the current video.
resume()None.Nothing.Play the current video from the moment it was paused.
gotoFrame()Integer.Nothing.Jumps to a specific frame of the video.

##Generating the JSON Video File (ffmpeg lib must be installed)

- Option 1: Node.js - single command

    ```bash
    cd converter/nodejs_one
    node app.js path/to/video/file path/to/video.json/file startTime endTime
    ```

- Option 2: Node.js

    - Use ffmpeg to generate the frames from a video file:

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

    - Convert all frames on a single JSON file

	```bash
	cd converter/nodejs
	node app.js frameStart frameEnd folder/to/imgs/ json/video.json
	```

- Option 3: PHP

    - Use ffmpeg to generate the frames from a video file:

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

	```bash
	cd converter/php
	php to_data_uri.php frameStart frameEnd folder/to/imgs/ json/video.json
	```

Development

In order to run it locally you'll need to fetch some dependencies and a basic setup.

  1. Install Gulp:

    $ [sudo] npm install --global gulp

  2. Install local dependencies:

    $ npm install

  3. To test your project, start the development server (using your prefered server) and open http://localhost:8000.

    $ python -m SimpleHTTPServer 8080

  4. To build the distribution files before releasing a new version.

    $ gulp build

  5. Send everything to gh-pages branch.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

Vagner Santana | --- | --- | --- | --- | --- | --- | --- Vagner Santana
@vagnervjs|

License