MediaPlus now supports the ability to edit/enhance HTML5 Videos and Images.
To install MediaPlus with these enhanced functions, drag and drop the following bookmarklet to your favorites/bookmarks bar.
The previous post explains how to install MediaPlus as a bookmarklet and how it can be used to move, resize or download media content on web sites. This post describes the additional functionality added to MediaPlus to perform enhancements like brightness, contrast, color adjustment, etc on images and videos.
Architecture
MediaPlus uses Pixastic for manipulating the media content. An image or a canvas can directly be passed to the Pixastic processor. Pixastic then reads the image data from the image or the canvas and manipulates it. It draws the final image on the target canvas.
In case of videos, MediaPlus passes a canvas to Pixastic instead of the actual video. MediaPlus continuously draws the latest frame of the video onto this canvas that is picked up by Pixastic for processing.
Limitations
Since pixastic relies on getImageData, it is restricted by the same domain policy. The Canvas Security policies mandate that pixel data cannot be read from a canvas if content from a different domain have been drawn on the canvas. Unfortunately, a lot of popular websites host their video content on CDN servers that has domain, different from the page. This results in the inability to manipulate HTML5 videos from youtube or facebook.
Most browsers also do not support the CORS way to reading image data yet.
Workaround for Images
The same origin restriction also apply for images. However, Images can be converted to data:uris using a web service and drawn on the canvas. Such images can then be manipulates as they are not from a different domain. However, the data:uri web service can only manipulate images that are directly addressed using a URL.
Image Zoom
Another addition specific to images is the ability to magnify images. The image zoom works just like most image zoom plugins, drawing a larger image inside the magnifying glass and moving it around with the magnifying glass is dragged over the image.
Next Steps
I am working on the ability to allow rotations and CSS3 3D transforms on videos and images. This is a little trickier as I would have to ensure that other functionlity like resizing or dragging continue to working on media content that is rotates in the z axis. Watch out the project page or this blog space for updates.
If you encounter bugs when using MediaPlus, you can report them or contact me.
MediaPlus - Technical Details
In my previous post, I had written about a MediaPlus - a browser bookmarklet. MediaPlus lets you control media content on websites better. This post talks about some of the interesting technical challenges that were encountered when rewriting it from FlashPlus.
The Basics
MediaPlus can be installed by dragging the MediaPlus link to the browser bookmarks/favorites bar. When this bookmark is clicked while browsing a web page, a javascript file is inserted into that web page. This script is responsible for all the magic from drawing borders around elements to making videos full screen. Once the bookmarklet is loaded, it loads additional javascript and css modules dynamically.
Element Selectors
When the mouse is moved over supported (flash, video, canvas, iframes, silverlight) target elements on a web page, the border that lights up around the element with the toolbox at the bottom is the element selector. These element selectors are not one single div (with a border and the height and width of the target element), but four [divs] around the corners of the element (very similar to the Aardvark bookmarklet). Though a single element would do the job just as well, placing it below or above would interfere with mouse events of the target element. Additional jquery "mouseenter" events are directly added to these target elements to show up the selector. The selector element is redrawn around the target element every time the mouse enters a different target element.
Proxy Substitutes
The structure explained above seems to work for all elements except embedded flash, as some browsers draw flash above all elements to prevent clickjacking. Object and Embed tags also cannot hold data. Just for the case of Flash, a proxy <div> is placed on top of the flash. To allow the Flash element to capture its mouse events as usual, the proxy div is "sent to back" as soon as the mouse enters it, bringing the Flash Element to the top.
Moving and Resizing Elements
When an element is resized or moved from its position, three things happen .
Next Action
Some actions like full screen or switch off lights hide all other elements. To restore the page to the state prior to the action, the bookmarklet link has to be clicked again. A button on the page could have done this job, but placing one may look ugly, especially when a video is full screen. Hence, some commands like full screen or switch-off-lights define a "next-action" that is executed when the bookmarklet is clicked again.
Support for tags
This newer version has a better support for tags, and the actions that can be performed on tags. Every tag is defined by a separate object that in turn declares the commands or actions (like move, full-screen, download) that can be performed on the object. Common actions are added using a mixin like pattern.
To look at how MediaPlus works under the cover, you can check out the source code here.
The Basics
MediaPlus can be installed by dragging the MediaPlus link to the browser bookmarks/favorites bar. When this bookmark is clicked while browsing a web page, a javascript file is inserted into that web page. This script is responsible for all the magic from drawing borders around elements to making videos full screen. Once the bookmarklet is loaded, it loads additional javascript and css modules dynamically.
Element Selectors
When the mouse is moved over supported (flash, video, canvas, iframes, silverlight) target elements on a web page, the border that lights up around the element with the toolbox at the bottom is the element selector. These element selectors are not one single div (with a border and the height and width of the target element), but four [divs] around the corners of the element (very similar to the Aardvark bookmarklet). Though a single element would do the job just as well, placing it below or above would interfere with mouse events of the target element. Additional jquery "mouseenter" events are directly added to these target elements to show up the selector. The selector element is redrawn around the target element every time the mouse enters a different target element.
Proxy Substitutes
The structure explained above seems to work for all elements except embedded flash, as some browsers draw flash above all elements to prevent clickjacking. Object and Embed tags also cannot hold data. Just for the case of Flash, a proxy <div> is placed on top of the flash. To allow the Flash element to capture its mouse events as usual, the proxy div is "sent to back" as soon as the mouse enters it, bringing the Flash Element to the top.
Moving and Resizing Elements
When an element is resized or moved from its position, three things happen .
- A new proxy element <img> with the dimensions of the original target element is inserted in its place to ensure that the parent of the target element does not collapse when the target element is moved out of its child hierarchy.
- The element is given an absolute position to allow the drag.
- The element is also re-attached directly under the body to ensure that overflow:hidden in the parent element does not prevent the target element from being moved around.
Next Action
Some actions like full screen or switch off lights hide all other elements. To restore the page to the state prior to the action, the bookmarklet link has to be clicked again. A button on the page could have done this job, but placing one may look ugly, especially when a video is full screen. Hence, some commands like full screen or switch-off-lights define a "next-action" that is executed when the bookmarklet is clicked again.
Support for tags
This newer version has a better support for tags, and the actions that can be performed on tags. Every tag is defined by a separate object that in turn declares the commands or actions (like move, full-screen, download) that can be performed on the object. Common actions are added using a mixin like pattern.
To look at how MediaPlus works under the cover, you can check out the source code here.
MediaPlus 2.0
What is MediaPlus?
MediaPlus is a plugin for your web browser that makes media content on web site easier to use. It gives you control to move or resize videos, play flash games in full screen or popout content to a new window.
Media Content, huh ?
Media Content here refers to Flash videos and games, HTML5 Videos, HTML5 Canvas and iFrames. MediaPlus can manipulate the media content when they are inside almost any webpage.
What can MediaPlus do?
- Move and re-size media content like videos or games on web pages
- Make media content, maximized inside your browser. Play games in full screen.
- Pop out media content into a new browser window
- Switch off lights on the page to view media content better on the page.
- Download Media content from specific websites.
- Enhance HTML5 videos by changing contrast, brightness, etc.
- Delete annoying media like advertisements, etc.
Interesting, now how do I install it ?
Since this is a bookmarklet, no installation is required.
We are working on making this available as extensions for Firefox, Chrome and Opera.
How do I use it?
When you are browsing a page, you could click on the MediaPlus bookmarklet link and it would get activated. You can now move your mouse over media content on the page and you should be able to see a blue highlight around the content with a toolbox below it. Place your mouse over the icons inside the toolbox to see what they do, and click on them to manipulate that media content.
At any time, you can click on the MediaPlus bookmarklet for additional options. For example, when your video is full screen, or the page is dark, click on the bookmarklet to restore the content to its original size or switch the lights back on.
And how does it work?
MediaPlus is a bookmarklet. When you click the MediaPlus bookmarket in your favourites or bookmarks bar, a javascript file is injected in the page you are browser. It is this script that does all the magic. It does not transfer any content from your webpage to anywhere, so it is also safe to use.
What are the supported browsers?
MediaPlus is tested on Firefox 3.5+, IE8+, Chrome 9+ and Opera 10+.
Was this not called FlashPlus earlier?
MediaPlus is like the next version on FlashPlus. FlashPlus only allowed manipulation on Flash content on web pages. MediaPlus is a complete rewrite of FlashPlus and is more efficient and has more functionality. See this link for more technical details.
More details?
You can follow this link for more details. The blog will be update with technical details and other major releases.
Subscribe to:
Posts (Atom)