This post was written by Davin Kluttz, Product Manager in charge of VideoUpload D.png

Jive Video is getting a facelift, and whole lot more!


Today, video has become one of the most popular forms of communication in the enterprise, as well as for customer communities. It's used for everything from executive communications to employee onboarding and training, and even to augment technical documentation. At the same time, mobile and webcam use has exploded, and video has become even easier to create and share content on the go.The new Jive video module embrace these trends and adds a whole new look and feel to both creation and playback of video.

 

Highlights:

  • New video creator interface
  • New player interface
  • Ability to embed video from other web sites
  • Full screen, HD playback
  • Clearer on-screen flow for uploading, webcam recording, and embedding
  • Optimized mobile playback
  • Leverage Structured Outcomes and mark videos as "final", etc.

 

Rich, beautiful playback experience

We took a radical departure from our other content layouts to give video something it really needed—real presence! We gave video a greater focus on the page to provide users an immersive experience. Our approach the the overall redesign took a number of factors into account, each playing their part in featuring video and making it a first-class citizen. Let's explore each of these improvements, in the new video player…

 

It's all about the video!

Video is now "on stage" with an expanded viewing area. The new design lets users experience video as the primary focus on the page, positioning it clearly for playback on a clean, modern canvas. The elegant design stands on its own, featuring video right at the top, without competing with other controls and page elements. When users scroll down, all the usual elements users interact with (description, comments, etc.) are there to provide context to the video content.

 

Clean viewing experience

We chose a darker, slightly-gradient backdrop behind the video to give clear contrast of the video being played. This ensures users eyes don't have to compete with brighter elements around the video.


lslu.png

Consistency with any video player

While the Jive video module provides excellent creation and storage of video content, a lot of Jive customers take advantage of video on other web sites. They needed a better way to incorporate all of these video assets into Jive. We made it possible to embed video from any web site, but we gave it a unified look. All players are presented with the darker backdrop regardless of the source for video content, providing a consistent feel for the end user. This helps ensure users don't have a disconnected feeling from the video page and the video itself.

 

Repositioned layout

We've moved few other elements around, so the overall layout works better. The viewing area has a clear separation from the metadata, ratings and other page elements, making the page a lot friendlier and easier to interact with.

VideoDocumentLayout.png

 

Video Player: Technical Details

  • Plays any video format that is supported by HTML5 browsers or Adobe Flash Player
  • Reverts to HTML5 for non-Flash enabled browsers and mobile
  • HD playback in both hardware accelerated and application rendered modes
  • Support for progressive and streaming videos
  • Scales to any size and retains a fixed 16:9 aspect ratio
  • Automatically resizes to fit larger or smaller areas

 

Creating and uploading couldn't be easier.

 

Why build a better player, if you can't have a pain-free video creation experience? We changed the creation and upload process completely, adding some nice improvements in the process. The process is now far more intuitive and gives users a lot more control.

 

Video creation: before (previous versions of Jive)

Here's how uploading a video worked before we completely changed the interface and added the new controls.

 

Upload Old.png
Video, the old way.

 

Video creation: after

The new video creation interface provides clear guidance for three methods of creating the video. We have removed the character limit for descriptions and added the ability to embed video from any web site.

 

Below is the flow users will see when creating video content. Note the clear presentation of options at the onset. Each choice carries users down a very logical path with a simple set of options, as well as confirmation upon successful upload. What's not shown below is a friendly set of error messages and instructions that display in cases where a problem may be encountered.

 

Creation flow: Upload a Video

These are the individual steps a user takes to select an existing video file (most formats supported) and upload it. Once the upload completes, the video is automatically transcoded into the necessary formats, including mobile-optimized versions of every video—there's nothing special users have to do.

Upload A.png

Upload B.png

Upload C.png

Upload D.png

 

Creation flow: Record from Webcam

Recording from a webcam couldn't be easier. Connected cameras (and microphones) are automatically detected. Users walk through a few simple steps to record directly into Jive. We even added a nifty countdown timer, so you can make sure to start with a smile!

Record from Webcam A.png

 

Record from Webcam B.png


Creation flow: Embed a Video

While you could already embed video into the Jive text editor (comments and inline), embedding video from other web sites is completely new for the video creation process. This means you can now insert an embed code from web sites like Ted, Hulu, YouTube, DailyMotion, and others—they'll show up in Jive as an actual video asset: Users can search and comment on them as though they were native Jive videos. This opens up a world of options in your community—some ideas:

 

  • Bring existing company videos, hosted elsewhere, into Jive.
  • Share videos from other web sites, so users can comment on them and inspire each other.
  • Building a collection of crowd-sourced video from your followers and fans, all accessible within Jive.
  • Use Gamification (optional) to challenge your community champions to share video around the web.
  • Use Structured Outcomes in your workflow to mark external video as final.

 

Okay, so here's the actual flow. Three steps.

Embed A.png

Embed B.png

Embed D.png

 

Video Creator: Technical Details

  • Supports any embeddable iFrame or Object/Embed video from any website
  • Automatically strips embed tags and only embeds clean tags
  • Automatically resizes the embedded video to fit any video size container
  • Automatically converts supported video site URLs into its embed, so users only have to provide a URL to the video

 

So, what's next?

 

Our customers and users are telling us that video is important for both internal and external communities. These enhancements represent an important next-step in the evolution of Jive video. Look for more in the future, and please share your feedback!