Video filters - image adjustments using CSS3 filters

CSS3 filters can be used on native HTML5 video objects as well as on images. 
I've recently created a little widget that opens an image adjustments menu on top
of the playing video (thank you Muli Dayan for your help with this one!).

The widget allows video image manipulations using these CSS3 filters:

• Brightness
• Contrast
• Greyscale
• Saturation
• Hue-rotate
• Sepia

Chrome and Safari except CSS filers by defining the "webkitFilter" property.

FireFox requires definition of the "filter" property.

IE is not supported as it lacks support for CSS3 filters.

Feel free to play with the demo and download the source code from Github.

Inline video playback on iPhone - my solution

As iPhone users know, when viewing an online video on the iPhone, the video plays in full screen using the device native player.

This presents a major limitation for advertisers since video ads are not clickable and overlay ads cannot be displayed. 
Any custom user interaction during video playback is not supported which prevents interactive videos and games.

There are few approaches for a solution, and here is mine, which I hope you find helpful.

Demo (open on an iPhone): http://amirch1.github.io/VideoInline/
Github code under MIT license: https://github.com/amirch1/VideoInline

The solution:

1. Create an Audio tag and give it the source of the Video tag. Audio tags support any video format (mp4, m3u8 HLS streams, live) and play inline.
2. Hide the Video tag native controls using Shadow DOM CSS rules.
3. Add custom Play / Pause button and a progress bar.
4. Clicking the Play button triggers the Audio tag play() method. It also invokes the Video tag load() method which enables video seek operation.
5. A timed interval is set to sync the Video tag currentTime property to the Audio tag currentTime property. The time interval actually defines the playback frame rate enabling balance between quality and performances. It also updates the progress bar.
6. Seeking using the progress bar sets the Audio tag currentTime value. The Video tag updates accordingly by the timer refresh.

Thats it! 

Rather simple, provides real audio sync and supports all video formats including mp4, HLS and live streams.

Can be easily enhanced to support fullscreen playback without loosing interactivity and additional video controls.

Feel free to play with the code, submit pull requests and star the Github repository :)

Moving to Github Pages

I've just started using Github Pages.
My first project is an updated Video Color Sampler and I will add additional projects soon.

Calculating video frame average color and displaying its name

This little demo shows how to calculate the average color value of a video frame during playback. 
The color name is displayed as well as the color value. 
This can be useful when creating 508 accessible content, for example for color blinded people. 

I used the colorThief library for calculating the average color. 
Note that you can also calculate the frame average palette if you need to display more colors, 
however this results in slower performances.
After getting the color value, I use the "Name that color" library by Chirag Mehta to display the color name.

You can view the source code for this demo by right-clicking the demo and choosing "View Frame Source".

My first commit to a Google open source project

I'm so proud that my first commit to a Google open source project was accepted and merged: https://github.com/googlecast/CastMediaPlayerStreamingDRM/pull/8
This commit enhances Google's example of a Chromecast custom receiver.
While the example demonstrates support for DRM, HLS and smooth streaming, it doesn't provide support for regular MP4 videos (progressive download).
After merging my pull request, I continue developing Kaltura custom Chromecast receiver for OTT, web and mobile.

Check out the example:

Using Adobe Illustrator to mark SVG elements for JavaScript targeting

Lately I've been working with complex SVG files, linking JavaScript interaction to various elements within the SVG markup. 
Its not an easy task to locate elements within the markup. Luckily, Adobe Illustrator comes to the rescue: 

1. Within Illustrator, its very easy to use the direct selection tool to select the required element. It is automatically marked in the Layers window.
2. Give the layer a name. This name later becomes the element ID in the SVG markup.
3. Be carefull not to use the same names for multiple layers. While Illustrator doesn't really care, your HTML / JavaScript are much less forgiving...
4. Use the "Save Aa" command to save your file as SVG.
5. If you open your SVG in a text editor - you will notice that layer names are now element IDs within your SVG markup.

All you need to do now is select your element by its ID in order to assign a JavaScript interaction to it.
In this example, I wanted the sun in the picture to be clickable so I gave its layer the name "sun".
After exporting to SVG, all that remain is:

document.getElementById("sun").onclick = function(){
   alert("You clicked the sun!");
};

Give it a try - click the sun:

Angular JS: Manipulating SVG images

While playing around with SVG files, it seems only natural to bind them to an Angular JS controller and see what happens...

The Code:

HTML:
Controller: