PackedPlayer beta
PackedPlayer is a tiny JS library that allows you to play & seek videos (fx with transparency) in your modern browser.
Since the player is based on CANVAS, it works well on mobile devices & desktop. PackedPlayer library do not uses at all the HTML 5 VIDEO tag.
How it works ?
PackedPlayer is built on two parts :
The packer (application) : who analyze the video frames and the cumulative changes on each frame. The algotihm is based on YCrBr analysis. The packer export the video into textures & a datas file.
The player : load the textures, parse the datas and play the video.
Sample texture preview :
The textures contains only the datas that have changed on a frame-by-frame basis. It means that in the #demo 1, you will load 5 images of 1024x1024 textures to display a 640 x 360 - 150 images video.
The packer allow you to define the "tolerance" of the algorithm and the compression rate of the textures.
Demo #1 - Planet
150 frames
640 x 360
Demo #2 - Planet alpha mask
150 frames
640 x 360
The mask is also a video - 150 frames
Default + Mask
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend vitae metus vitae viverra. Duis vulputate augue nec volutpat rutrum. Suspendisse vehicula augue tortor, sit amet accumsan urna bibendum quis. Nullam velit erat, consequat in facilisis a, rhoncus ut arcu. Donec eu justo at lorem porttitor elementum ut et magna. Aenean ac pellentesque justo, vitae varius leo. Proin feugiat arcu ipsum, eu faucibus sapien tristique nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend vitae metus vitae viverra. Duis vulputate augue nec volutpat rutrum. Suspendisse vehicula augue tortor, sit amet accumsan urna bibendum quis. Nullam velit erat, consequat in facilisis a, rhoncus ut arcu. Donec eu justo at lorem porttitor elementum ut et magna. Aenean ac pellentesque justo, vitae varius leo. Proin feugiat arcu ipsum, eu faucibus sapien tristique nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend vitae metus vitae viverra. Duis vulputate augue nec volutpat rutrum. Suspendisse vehicula augue tortor, sit amet accumsan urna bibendum quis. Nullam velit erat, consequat in facilisis a, rhoncus ut arcu. Donec eu justo at lorem porttitor elementum ut et magna. Aenean ac pellentesque justo, vitae varius leo. Proin feugiat arcu ipsum, eu faucibus sapien tristique nec.
Demo #3 - Seeking
140 frames
640 x 720
Pros / Do
- Perfect control of loading
- Seeking
- Transparency
- Special FX effects
- Mobile / Tablet
- Auto-play
- Composition
Cons / Don't
- Texture download size
- Long videos
- Performance
The end
PackedPlayer is not released and still in early development stage.
To keep informed, follow @didierbyte or drop me your email : db@bigbossstudio.com