1 Reply Latest reply: Jul 17, 2013 2:56 AM by poxson RSS

    Clickable hotspots or tooltips on videos; interactive videos.

    queboy89 Community Member
    queboy89 Jun 28, 2013 6:56 AM

      Hello all,

       

      Forgive me if I'm posting this in the wrong forum. I'd like to know if what I'm proposing has been done before, and if so what some of the examples look like.

       

      My idea is to embed clickable hotspots over a video. For example, we have a shot of a truck rolling down the highway. As it continues driving, different hotspots pop up over various parts of the truck, like axles, transmission, engines, etc. These hotspots can then be clickable, and a small tooltip/bubble pops up with a description about that part. As the video continues playing, different hotspots continue to be generated and available.

       

      I've been poking around all over the web looking for either examples or programs that enable the effect. I've found that most "interactive videos" are based around two premises: shopping from within the video and pick your own storyline. Neither of which is necessarily what I'm looking for, so I've begun thinking that this might an After Effects/Flash based affair. I can use After Effects to generate the tooltips or 3D overlays of the various parts onto the original video, and use Flash to generate the approriate interaction.

       

      As this video will be web based, my final idea was to run the video underneath a layer of code that generated both the sprites and the effects. The problem there is setting up the scripts so that they are timed perfectly with the video.

       

      Any thoughts? If this isn't the place for this, could someone point out where I can get some insight? Much appreciated in advance!

       

      Cheers.

       

      D.

      • 5390 Views
      • Tags:
        • 1. Re: Clickable hotspots or tooltips on videos; interactive videos.
          poxson Community Member
          poxson Jul 17, 2013 2:56 AM (in response to queboy89)

           

          Hey D.

           

          Read your recent question looking for examples of interactive video that looked at other user cases rather than the usual shoppable and choose your own adventure videos.

           

          Thought you might be interested in having a look at wireWAX (www.wirewax.com). We started out much like you creating overlays and doing tracking in After Effects and then using Flash to apply the interaction.

           

          wireWAX has since developed into an online tool that allows anyone one from the most techy creative like yourself, to the basic YouTuber, upload their own videos to the wireWAX studio. From there users can add their own tags to objects and people which are then tracked using our super intelligent tracking system ready for you to add your own overlays or choose from a range of widgets such as YouTube and Facebook. The platform now uses much more advanced image processing to do things like face detection and motion tracking in real-time and works across mobile and tablet too.

           

          OK, sales pitch over, please do have a go. You can simply drop a video into the dropbox on the homepage and use the free tool to add interaction. We also work with brands/producers/filmmakers to create customized experiences on a paid-for service.  

           

          Here are a few examples of some videos you might find useful:

           

          National Portrait Gallery Walkthrough

          This video was created by one of our users using the free wireWAX tool. It allows viewers to click on pieces of the artwork to get more information either through a short text description or video in video interview with the curator.

           

          https://www.wirewax.com/7002501/

           

          BBC News

          The BBC developed this engaging interactive experience to coincide with the anniversary of the Deepwater Horizon disaster. Viewers could learn more about the ongoing impact and explore extra content clicking on the hotspots that interested them.

           

          http://www.bbc.co.uk/news/world-us-canada-22185262

           

          BBC One Luther

          The BBC’s 2nd interactive wireWAX video was a trailer for their crime drama Luther. It included exclusive clips and unseen treats in a fitting stylised tag and overlay for the programme.

           

          http://wirewax.com/luther

           

          Adidas Messi gallery

          A customised overlay for Adidas who created this clickable walk through using wireWax to allow Messi fans to click on memorabilia to discover more.

           

          https://www.wirewax.com/7004524/

           

          There’s also plenty of shoppable examples on our site too.

           

          If you have a specific project in mind or you have any general questions about wireWAX just give us a shout.

           

          Poxy

          Hello@wirewax.com