Today, we bring you another major release of WebViewer Video, with expanded features to enable professional annotation and collaboration on videos right in the browser. We’re pretty stoked about these changes (and hope you are too) as most were inspired by insightful feedback from our customers.

Here's what's big and new for WebViewer Video 4.11:

  • Mobile Mode: Intuitive navigation and touch-based controls for improved mobile integration.
  • Annotation Previews: Clickable previews of video frames where annotations are placed for quick, contextualized search & retrieval of specific markups.
  • Custom Headers: Easily add an extra layer of security by passing authentication information with a simple API request.

Details on these features below!

Enhanced Mobile UX with Mobile Mode

First, with 4.11, we rolled out a new mobile-optimized version of WebViewer Video -- Mobile Mode -- to make mobile integration even simpler for apps that display WebViewer Video in mobile browsers. This new mode packs many UI enhancements, such as improved navigation and touch-based controls.

WebViewer video in mobile SDK for video annotating

WebViewer Video’s new mobile-friendly navigation and touch-based annotation

Clickable Annotation Previews

Ever draw a circle on a video frame, only to wonder seconds later, "What did I just circle?"

Well, now there’s no need to hunt for your markups by searching through the video frame-by-frame since the new Annotation Previews will simplify user search and review. These are generated whenever someone annotates to give you an interactive thumbnail preview of the video frame plus the annotation on it.

Users can then click these previews to jump right to the timestamp where an annotation starts.

WebViewer video annotation preview appearing on video annotation

To turn this behavior off, simply disable the showAnnotationPreview option in the API by setting it to false as referenced in the WebViewer video documentation.

Custom Authentication Headers

Next, while WebViewer already boasts secure features such as powerful, serverless document processing and advanced user permissions, we’re always on the lookout for ways to make its integration even simpler and more secure.

Our WebViewer Video subset is no exception. So in a recent smaller release, we added Custom Headers -- to easily enable an extra layer of protection around your secured videos.

The code below demonstrates using a basic authentication header but can also be used with API tokens and cookies as well.

WebViewer(...)
    .then(function(instance) {
      const license = '---- Insert commercial license key here after purchase ----';
      const {
        loadVideo,
      } = await initializeVideoViewer(instance, { license });

      loadVideo('https://www.mydomain.com/my_video_url', {
        headers: {
          'Authorization': 'Basic YWxhZGRpbjpvcGVuc2VzYW1l'
        },
      });
    });

For the full code sample and details, please refer to the API documentation. WebViewer Video’s custom headers are now also consistent with vanilla WebViewer’s functionality.

Annotation Icons

Lastly, to improve the visibility and distinction of annotations, we've added icons corresponding to the different types of annotations, so you don't have to manually click on each annotation to see what type it is. These are visible under the audio waveform once an annotation is made.

Video annotation icons on WebViewer video

That's a Wrap!

That’s it for this release! To view a demo of all these features and more, check out the WebViewer Video demo here.

Stay tuned for our future releases of WebViewer Video, where we plan to add a video compare feature!