vagnervjs / frame-player Goto Github PK

take a look at this: http://jsmovie.burkhardt-medienproduktion.de/?page=home

https://code.google.com/p/jsmovie/

maybe there are things we can adapt to frame-player?

Create a separate module for css filters.

When setting controls to false in the options for the img-tag branch when initiating the player i get the following errors:

Uncaught TypeError: Cannot read property 'appendChild' of nullFramePlayer.getFrames
 @ frameplayer.js:275 FramePlayer.play 
@ frameplayer.js:134(anonymous function) 
@ (index):34

my code is:

<div id="player1" data-vidsrc="videos/video01/"></div>

    <script src="src/js/frameplayer.js"></script>
    <script>
        var options1 = ({
            'frames': 3000,
            'rate': 30,
            'controls': false,
            'autoplay': true,
            'width': '400px',
            'height': '260px',
            // 'radius': '50%'
        });

        var player1 = new FramePlayer();
        player1.load('player1', options1);
        player1.play();
    </script>

How can I fix this error?

frameplayer.js:63 Uncaught TypeError: Cannot read property 'length' of undefined
at FramePlayer.render (frameplayer.js:63)
at frameplayer.js:192
at XMLHttpRequest._HTTP.onload (frameplayer.js:276)

I have my own JSON file and it contains this

{"v":"4.7.0","fr":25,"ip":0,"op":176,"w":1080,"h":900,"nm":"C_8","ddd":0,"assets":[{"id":"image_0","w":1242,"h":2208,"u":"images/","p":"Gruppe_25.png"},{"id":"image_1","w":1242,"h":2208,"u":"images/","p":"welcome.png"},{"id":"image_2","w":1242,"h":2208,"u":"images/","p":"Gruppe_29.png"},{"id":"image_3","w":1242,"h":2208,"u":"images/","p":"Gruppe_46.png"},{"id":"comp_66","layers":[{"ddd":0,"ind":1,"ty":2,"nm":"Gruppe 25.png","cl":"png","refId":"image_0","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[540,960,0]},"a":{"a":0,"k":[621,1104,0]},"s":{"a":0,"k":[87.118,87.118,100]}},"ao":0,"ip":0,"op":381,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":2,"nm":"welcome.png","cl":"png","refId":"image_1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[387,397,0]},"a":{"a":0,"k":[421,462,0]},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":58,"s":[0,0,100],"e":[102.118,102.118,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":65,"s":[102.118,102.118,100],"e":[87.118,87.118,100]},{"t":70}]}},"ao":0,"ip":0,"op":381,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":2,"nm":"imow","refId":"image_2","ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[298.08],"e":[358.56]},{"t":52}]},"p":{"a":0,"k":[540,912,0]},"a":{"a":0,"k":[621,1052,0]},"s":{"a":0,"k":[87.118,87.118,100]}},"ao":0,"ip":0,"op":381,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":2,"nm":"Gruppe 46.png","cl":"png","refId":"image_3","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[540,960,0]},"a":{"a":0,"k":[621,1104,0]},"s":{"a":0,"k":[87.118,87.118,100]}},"ao":0,"ip":0,"op":381,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":1,"nm":"Dark Gray Solid 1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[540,960,0]},"a":{"a":0,"k":[540,960,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"sw":1080,"sh":1920,"sc":"#333333","ip":0,"op":381,"st":0,"bm":0,"sr":1}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Challenge 8","refId":"comp_66","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[540,770,0]},"a":{"a":0,"k":[540,960,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"w":1080,"h":1920,"ip":0,"op":381,"st":0,"bm":0,"sr":1}]}

Can I use URL to image instead JSON file?

In my opinion it makes no sense to create a huge JSON file, a mess of base64 encoded image files.

The approach from JSMovie is much faster and better
See also #3

The images can be also loaded parallely

It would be great to have a callback function for the img-tag branch where when the video finishes playing it calls a function.

Am I missing something ?

Very cool project. It'd be great to make a video.js plugin for this. Here's some existing examples if you'd be interested:

• HTML5
• Flash
• Youtube
• Vimeo
• Daily Motion

What about making it installable with bower? This project is very interesting and for sure people are going to use it a lot soon :)

For the life of me I cannot convert any images to json using:

node app.js frameStart frameEnd img/ video04.json

When I open the video04.json file it show only:

{"frames":[]}

Installed mime via NPM, aside from that nothing else works. Thanks!

Hi,

Your plugin is very cool !

Is there a callback function called when a the video is finished playing ?

Thank you for your help

Hey guy, amazing work!

I was wondering if is it possible to implement a progress bar with your solution to control the video presentation.

Att.

Great Job, i want integrate frame player on Cordova , but i have always black screen.

Im having trouble converting a json file to where when you click on it its just a video. Can you help me?