vagnervjs/frame-player

#Frame Player

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

• Project Page: http://vagnervjs.github.io/frame-player

##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

##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
@vagnervjs|

License

• Code is under MIT license © Vagner Santana