Posts tagged ‘Flash’

August 18th, 2011

Preview Thumbnails, New KDP Plugin

by Eitan.Avgil

The ability to show a small preview above the scrubber while the user’s cursor is hovering over it is a feature that sat in my drawer for more than a year. One day, after talking to a colleague at Kaltura, I decided to take it out of the drawer and write the code for this feature.
The idea is simple – my plugin would take the scrubber reference, add some mouse events interaction and use the Kaltura’s great Thumbnail API. This API is pretty straightforward: here’s a media entry, get me an image from second X with specific dimensions.
For more info of this cool feature see this link.

 

Phase 1: Get a thumbnail (any thumbnail) to the player.

Anyway, since building KDP plugins is something I do for a living (senior developer at Kaltura, Professional Services) this task was not that hard to implement, and after a few hours I created the 1st Kaltura Preview Thumbnail Widget. It was with a hard coded URL, random number for seconds to seek to, and without positioning. I used a special service layer that called is ‘foreground’ and serves pop-ups and alert for adding the loader.
Once I saw that the thumbnail service is connected to the KDP I could go to sleep. Apparently it was 01:30 AM on a work day.

 

Phase 2 : Connect the scrubber

2 nights later I added some more features.
From the plugin code I added this:

public var scrubber:UiComponent

And in the UiConfig XML I wrote

scrubber=”{scrubber}”

 

These 2 simple additions used the Binding mechanism that the KDP has, to send the reference of the scrubber to my plugin. This is one of the greatest features in the KDP. With simple expression in curly brackets I can get a reference to another component or plugin or to a public property on it.
Anyway, now I could play with the scrubber. I used the reference to get the scrubber width, and to add some mouse events. With the width and the mouseX, I could calculate the playhead position and send it to the function that loads the thumbnail. Two more code lines made it appear above the stage mouse coordinates. Now I see a thumbnail that matches the mouse position of the scrubber.

 

Phase 3: Optimize

Getting the thumbnail through the thumbnail API is quite slow if you fetch a thumbnail for every mouseMove event and also consumes the Kaltura partner’s bandwidth. I had to do something with this. I decided to do 2 things:

1st  Load only round seconds.

2nd Add a threshold. At first I added a hard coded 10 sec threshold, so if you are hovering on second 52 you would get 50. This way I am not consuming too much from my account and the user experience is still OK. Later on I changed this to be 5 sec with an option to configure it through the uiConfig XML. The name of this public attribute is intervalsThreshhold.

 

Now everything works fine, and the preview looks great. Here’s an example (play and hover over the scrubber):

Another optional feature I added later on, is the option to pre-fetch the thumbnails once the entry is loaded with a loop that intervals every X seconds (where my X is my intervalsThreshhold attribute). With this loop the thumbnails will be cached in the end user’s browser cache, and the user will not have to wait till each image is loaded. It is a better user experience but takes its toll on the bandwidth because I am loading all images for the whole video duration. To turn this feature on we would need to add the attribute prepareThumbnails=”true” in the uiConfig XML since the default for this feature is false.

 

UiConfig XMLTag example:

 

This plugin would work if your entries are managed on the Kaltura cloud platform (SaaS), and only if the partner has access to the thumbnail API.

This plugin is free to use for non-commercial players. If you need want it on a commercial player contact me at this gmail account:

August 12th, 2011

Increase User Engagement Using In-Player Games

by Roni Cohen

KDP plugins can be used to extend the abilities and features that our KDP (Kaltura Dynamic Player) offers. Some plugins give you the abilities to show commercials, some sharing the video or provide other functional needs like subtitles or watermark.

Some plugins are just for fun. Here we’ll suggest another use of a video player you might not consider: Making the player into a game.
Read this post from Atar Shadmi, a senior Flash & Flex developer at Kaltura where she’ll share how you can extend KDP to be more than just a boring video player.

This plugin is a game built on KDP, it enables you to stop the movie, play a quick game and return to the movie after you’ve relaxed.
In a similar way you could integrate games, surveys, and other “in-video-activities” to captivate the audience and keep them engaged, through a small embeded video player.

Click the star button to play a puzzle game:

read more »

Tags:
March 23rd, 2011

The Dragonfly Is Fly

by Jason

Kaltura’s Dragonfly release went live on the Kaltura SaaS (Software As A Service) on March 13th. If you happened to login to your account, you may have noticed some new features like enhanced roles and permissions, HTML5 player and mobile advertising support, and multiple thumbnails. We’ve also got content distribution, more robust video editing, and adaptive bitrate HTTP streaming for both Flash and iOS devices on the horizon.

Roles and Permissions

While Kaltura has always had a concept of Publishers (account owners) and users, the Dragonfly release adds a very clear concept of a user database along with user roles and permissions. An account owner can now add, delete, and block users in the KMC (Kaltura Management Console) and assign them highly granular roles such as “content uploader,” “syndication manager,” or “lord high fixer-upper”. The KMC comes with several pre-defined roles and new roles are user-definable by selecting permissions from a list of KMC permissions.

The new permissions will let you divide the responsibility for your Kaltura account amongst multiple people as well as create “maintenance-only” accounts and other task-oriented logins. It’s possible, for example, to create a role that sees nothing but the analytics tab when they login to the KMC. It’s also possible to create a user that can view, but not alter, various sections of the KMC.

HTML5 Player-Player And Mobile Support

You can now grab an embed code for our fine HTML5 player with automatic detection and fallback to Flash for browsers that don’t support HTML5 video, and then fallback to Java Cortado for browsers without Flash support.

We now have a Blackberry 3GP format to add to our  set of mobile transcoding flavors that support Nokia, iPad, iPhone, and Android. And finally, we now support advertising on mobile players. The advertising settings you apply to your player in the Studio section of the KMC will now also apply for mobile delivery with the limitations described in this table:

Device Supported Ad Types Notes and Limitations
iPhone VAST Pre-rollBumper Video

VAST Post-roll* Ads are played back in the native player* Player controls are not disabled during playback (user can skip the ads)

* Ads are not clickable

* Ads must be encoded for the iPhone (H264)iPadVAST Pre-rollBumper Video

VAST Post-roll

VAST Overlay* Ads must be encoded for the iPad (H264)Android (v2.2 and newer)All* Android version 2.2+ supports Flash playback with all ad types.

Multiple Thumbnail Love

Kaltura has always had the ability to handle a single thumbnail, but now you can upload, or select from your video, multiple thumbnail clips to associate with any video in your KMC. Once the thumbnail is in your KMC account, you can use our new cropping tool to resize and crop it to your liking, then save it as a new thumbnail.

Content Distribution (Coming Soon)

Kaltura has long offered RSS syndication feeds from the KMC, but soon we’ll be adding content distribution as well (Note: some people use the word “syndication” to describe content distribution). That means you’ll be able to push your content to sites like YouTube and MySpace directly from within the KMC. Kaltura customers will be able to control the destinations for each video, and, for each destination, control the video qualities, thumbnail sizes, metadata, scheduling data, and more.

Adaptive Bitrate Streaming Over HTTP (Coming Soon)

Adaptive bitrate streaming over HTTP will improve the user’s video viewing experience.  The Kaltura SaaS uses Akamai as its default CDN (Content Delivery Network) and the default video delivery protocol has been progressive streaming via RTMP. But soon you’ll also be able to select adaptive bitrate streaming over HTTP for both flash and iOS devices. That means new capabilities like seeking to any point in the video without waiting for the entire video to load, caching in routers and proxies outside the CDN network, and no requirement for a Flash media server which means more edge servers in the CDN.

Video Editing And The Community

You may note that the KAE (Kaltura Advanced Editor) and KSE (Kaltura Standard Editor) are gone from Dragonfly. Never fear, they will eventually be replaced by some basic, but more powerful, editing tools that will be more robust and handle the majority of use cases that our customers have been using them for.  Stay tuned for further announcements about these editing options. Meanwhile, the KSE and KAE will live on as community projects on Kaltura.org. And speaking of community, look for the new and improved Community Edition (based on Dragonfly) to show up in the coming weeks.

February 21st, 2011

The Gendered Advertising Remixer

by Zohar Babin

During the last OVC Hack Labs day in NYC (2010 OVC), one of the fun projects we worked on was an education application that allows quick remixing of short video ads.

Here’s a short paragraph describing the application by Jonathan McIntosh, the brains and innovator behind this project:

Each Child in the United States is subjected to an average of 25,000 TV commercials every year. Embedded in those advertisements are a regressive and stereotypical set of social values about expected gender roles for boys and girls.

So how can kids hope to push back against that billion dollar marketing machine?
This simple remixing tool provides an easy way to re-combine audio from ads directed at boys with video from ads directed at girls (and vice versa) to create hilarious and insightful new mash-ups.

The project’s goal is to help empower youth of all genders to better understand, deconstruct and creatively re-frame the highly gendered messages emanating from their television sets.
A series of educational resources and materials are also currently being developed for teachers to use alongside this remixing tool.”

There are about 800 possible Ad combinations from 40 different Ads… Share your best mixed ads below : )

The Gendered Ads Remixer

-

Jonathan and I met during the OVC Hack Labs day, where he shared his idea and told me about a workshop he did: Reel Grrls Workshop: Gendered Ads Remixed.
I took the challenge, and after a couple hours of planning and coding (and mostly beer drinking), the application was ready and live. Last night, in preparation for Jonathan’s participation at the Digital Media and Learning Conference, we polished bits of the design and made it live –Gendered Advertising Remixer – Beta 1.

Some Techie Background -

The application utilizes the Kaltura Flex Collaborative Video Framework, the same code library used behind the scenes to create the Kaltura Online Video Editors (KSE and KAE). This is the “mixing magic” that combines the audio and video streams of the two video ads dragged to the center.

Utilizing Adobe Flex framework 4.5, made it super easy to put the UI parts together, specifically extending Flex’s TileList and other layout components. Right click > view source, on the Flash App to see the source code, and learn more, most should be pretty straight forward for Flex developers out there.

Stay tuned as we might try and make an HTML5 version too (some’s up for the challenge?)  : )

Check out Jonathan’s “The Politics of User Generated Content” session at the DML Conference, March 5th.

Let us know what you think below…

-

December 13th, 2010

One Step Red5 Installation with Kaltura CE3

by Jason

For CE4 and Red 5 Integration video toturials read: Webcam Recording Using Red5 and RTMP and Live Stream using Red5 

Hot on the heels of our Red5 Integration Guide is an even easier way to get Red5 up and running with Kaltura Community Edition 3 (CE 3).  We are pleased to offer an Amazon EC2 AMI with Red5 1.0 beta pre-installed.

ami-8005f3e9 – This is Kaltura CE 3.0 with Red5 running on 32-bit Ubuntu 10.4 LTS

[May 12th, 2011 update. A security update has been made to this AMI to remove ssh keys left in the image. the new image is below]

ami-3aac5253  – This is Kaltura CE 3.0 with Red5 running on 32-bit Ubuntu 10.4 LTS

Once an instance is running, you just finish the CE 3 install as usual (see  our Amazon EC2 Guide for details) and then simply perform two more commands:

cd /home/ubuntu
sudo bash kalred5.sh

That’s all there is to it. Red5 is now running and integrated with CE 3 adding significant functionality to your Kaltura installation [our Red5 Integration Guide has been updated with these instructions.]

Broadcast live using the free Adobe Flash Media Live Encoder (or use your favorite live streaming application)

Red5 adds three important features to CE 3:

  • Record and playback from the webcam
  • Stream videos using RTMP
  • Broadcast multiple live streams

For a list of known issues with the Red5+CE3 integration, see the bottom of our Red5 Integration guide.

We hope you’ll test out the Red5/CE3 integration and provide feedback in our forums, and post bug reports on our bug tracker.

December 1st, 2010

Live Streaming, RTMP, and Webcam Action With Red5 and CE 3

by Jason

You can check also the CE4 and Red5 integration video post series.

We’ve  done a little back room hacking over the Thanksgiving holiday to bring you a relatively easy way to add the free open source Red5 Flash Server to our Community Edition 3. The result?  Live streaming for your events, RTMP streaming for your existing videos, and our  webcam, all working with CE 3.

Your users can now record themselves via the Kaltura Contribution Wizard (KCW) webcam and those recordings can be saved, transcoded, and distributed like any other video.

RTMP streaming is available via the Kaltura Dynamic Player (KDP) for all of your videos.

You can also create multiple live streams in CE 3. A fun way to test them is to stream your webcam from your laptop using the free Adobe Flash Media Live Encoder.

Our Red5 Integration Guide has all the details!

As always, we’re looking forward to your feedback. If you found a cool way to extend this or found a bug, please share in the comments, CE forum or issues queue :-)

October 21st, 2010

Introducing HTML5 Video Player Widget on the Adobe Dreamweaver Widget Browser

by Zohar Babin

Announced today, Adobe HTML5 Video Player Widget, based on the Kaltura HTML5 Media Library.

The main reason why HTML5 is raised in every session or workshop on web video lately is due to mobile devices that don’t support Adobe Flash (*cough* iOS). Alas, whenever HTML5 is presented as the “standard-compliant-preferred” solution for doing cross-device video playback it raises many eyebrows, and rightfully so – some claim that HTML5 isn’t ready yet for production websites. At least not on its own. And further, most mobile devices don’t support the freshly not-yet-fully-spec’d standard.

So we’re left with a hybrid solution: HTML5 (mostly for iOS), Flash (desktop browsers & Android, Future Blackberry) and a link to specially encoded video files (in cases of older mobile phones).
This feels kind of awkward. As a web developer, you will now need to:

  • Encode your videos in various formats making the video ready for each browser/device
  • Detect the browser/device and version of the user client
  • Decide on the playback mechanism that is right for that user client.

To take away this headache (and a few others), we came up with the Kaltura HTML5 Media Library – www.html5video.org, which includes an open source, cross browser, cross device, “fallback” player.
Today, the Adobe Web Frameworks team is introducing a new HTML5 Video Player Widget built on a subset of the Kaltura library. It’s a light-weight Flash & HTML5 hybrid solution for video playback across different browsers and devices. Download it through the the Adobe Dreamweaver Widget Browser.

read more »

July 28th, 2010

OSCON Recap & Our “HTML5′s Multimedia Future” Panel

by Zohar Babin

OSCON Recap

OSCON was awesome, just like every year — the vibe, the many geek discussions and potential collaborations that will grow out of it. OSCON is also a great place to learn, and to be heard. If you have a great thing to share or an important message to be carried to the open source world, OSCON is the place to be.

OSCON was a very exciting stepping stone for us at Kaltura, as we released the new version of Kaltura CE, Kaltura CE v2.0. You can read more about the Kaltura CE v2.0 release in the post before this one. Make sure you go on Kaltura.org, download, install, and share your feedback with us.

The Kaltura OSCON Shirt

Every OSCON we create a new Kaltura shirt. This year’s shirt was all about visibility and inviting people to try out the new Kaltura CE v2.0 – As it’s the only complete & open source solution today for rich-media & video management and publishing. It includes managing transcoding to various video formats, enabling plugins on the API side, and better installation flows and analytics.
Here is this year’s shirt design:

HTML5′s Multimedia Future Panel

This year’s OSCON is another important stepping stone – Video on Wikipedia, based on the Kaltura HTML5 solution and the Kaltura server.

As Kaltura users are constantly in need of cross-device browser playback solutions, it is important to be able to automatically encode to the various video codecs out there, detect the device/browser of the user, and choose the right playback solution, be it HTML5 (using h264, webm or theora) or Flash for non-HTML5 supported browsers like Internet Explorer. Moreover, the standard use case for a rich video website includes advanced analytics, advertising solutions and a lot of flexibility.

Being developers of HTML5 solutions and advocates of the open & cross-platform (cross browser, cross device, cross codec) promise of what the number 5  represents – it was important for us to share a point of view, a reality check of what is available with HTML5, what is planned, and what’s to be improved on both the spec and way things are implemented.

The browser wars of the 90′s left web developers with many development problems. HTML (and JavaScript) wasn’t implemented the same by all browsers and as such required developers to defer to hacks and weird workarounds . HTML5 is the beginning of a remedy for that. It is important now to keep track and be involved with this new standard — to be alert and  raise your voice – to ensure that things are truly cross-platform.

The Panel included Jason (The host), Me (The Flash guy) and Tab from Google (representing HTML5). Tab showed a kick-ass video-to-ascii in real-time, created in HTML5 & JS using the new Canvas element. Jason reviewed the history of HTML5 and I did a reality check of where we are, what Flash provides that HTML5 doesn’t, and what needs to be done.

You can view the slides that I used here.

Our completely full session (all seats taken and people sitting/standing in all available floor space):