Make any video interactive - Amazon Web Services · 2018-08-31 · Make any video interactive in 15...

in 15 minutes

Make anyvideointeractive

Make any video interactive in 15 minutes

THE HOTSPOT

A call-to-interact that can stick to moving people & objects.

COOL FACT: Sticky hotspots stick to your moving people or objects like glue.


Good interactive video is not whack-a-mole.Hotspots should remain visible on screen for 3 seconds minimum to allow your viewer enough time to identify and interact.

Early bird catches the worm.Say your video is interactive and try to have a tag inside the first 30 seconds.

I choo choo choose you.

If you’ve got lots of hotspots on screen at any time, you’ll paralyse viewers with the paradox of choice.

HOTSPOT Tips

Get Inspired

https://www.wirewax.com/examples/


THE OVERLAY

What appears when someone interacts with a hotspot.

NOTE: You decide how your overlay appears and functions.


Keep it simple

Don’t overcrowd your overlay. Keep it focused and short.

Mobile

Bear in mind mobile users will be on smaller screens.

Relevant

Make your overlay content relevant. Give viewers what they want.

OVERLAY Tips


INSERT IMAGE HERE

You’ve just got to push the buttonAfter signing-up at wirewax.app, just hit the Upload a File button to add your first video.

You can upload an image, or video from Your Computer or paste URLs for any video from any popular video site like YouTube or Vimeo. You can even paste a Dropbox URL.

UPLOAD

1

http://www.wirewax.app


INSERT IMAGE HERE

Drag and drop your video on the cloudYou can also drag and drop a video directly from your computer to your Home folder.

UPLOAD

TIP: Try uploading directly from your mobile or tablet too.

2


INSERT IMAGE HERE

Count to 100

After feeding the studio, the video card will appear on your Home folder.

As it’s uploading, our science stuff is detecting faces, places, people and soon, objects.

UPLOAD

TIP: You don’t have to wait, you can start other uploads or browse other videos in your account. A progress indicator on the top right bar will keep you updated.

3


INSERT IMAGE HERE

Your video is up!

Once your upload is complete, your video’s Quickview Panel will change and display all the info generated. To make your video interactive, click “Open Editor”.

This is where you can start adding hotspots.

UPLOAD

TIP: Try uploading directly from your mobile or tablet too.

4


INTERACTIONSAdd interactivity to your video with Hotspots and Overlays


INSERT IMAGE HERE

Suggested or recognized people may already be tagged

5 – Preview Video

Manage video interactions, publish options and more

THE EDITOR

2 – Add a new hotspot

Use this button to add a hotspot.

3 – Timeline

Navigate scenes in your video

4 – Suggested Hotspots

Preview your video after adding hotspots and overlays

1

2

4

3

6

1 – The Console

5

6 – PublishShare & embed your video


HOTSPOTThe visual call-to-action that indicates things are interactive in your video


INSERT IMAGE HERE

Detections

You’ll notice faces have already been automatically detected - these are suggested hotspots.

Just tap them to add them to your video. Ignore them if you prefer.

HOTSPOT

NOTE: Use J, K, L on you keyboard to quickly navigate through the timeline.

1


INSERT IMAGE HERE

Add a new hotspot

TIP: Use J, K, L on you keyboard to quickly navigate through the timeline.

2

HOTSPOT

Add tags to anything else. When you see anything you wish to tag just hit the + button on the top left side and choose a Sticky or a Static Hotspot.


INSERT IMAGE HERE

You can draw

After pressing the button, draw a box around whatever you want to tag. People, objects, anything.

3

HOTSPOT


INSERT IMAGE HERE

What is it?

Give your new tag a name - this will help you manage your hotspots later on.

Whenever you wish to use the same hotspot on a different moment of the video, simply select from the dropdown list of hotspots.

HOTSPOT

4


INSERT IMAGE HERE

Hotspot Behaviour

Choose what you want to happen when a viewer clicks the hotspot.

Display an overlay – Choose a template or create your own

Open URL / Click-out – Instantly open another web page

Jump to point in video / Branching –

Jump to another point in the video (BRANCHING)

HOTSPOT

5


INSERT IMAGE HERE

Hotspot Designs

Pick a hotspot design that suits your video and calls out to your audience to interact.

Easily identify what’s interactive.

HOTSPOT

Pro Subscribers can have Custom Hotspots uploaded to their Studio account.

6


INSERT IMAGE HERE

Hotspot Icon Position

The bounding box will be the ‘hit zone’ for your tagged object but you can drag the icon to a position that fits best.

You can choose where our WIREWAX tags sit on the object you are tagging.

Simply click and drag the icon on the video or use the x and y values in the settings panel to get nice and precise.

HOTSPOT

NOTE: Not all tag icons can be repositioned.

7


OVERLAYCreate beautifully crafted overlays from templated designs.


INSERT IMAGE HERE

Use this to distribute your layers however you’d like

5 – Save

Change the overall overlay options

OVERLAYEDITOR

2 – Pick a template

Use this button to pick a Standard template or to create a custom overlay

3 – Edit Tools

Add Text, Images, Buttons, Videos, Maps and iFrames to your overlay

4 – Layers

Save and go check it in action

1 2

4

31 – Overlay Settings

5


INSERT IMAGE HERE

Overlay Settings

Change your overlay default settings by changing the Background Colour, Style, Animation and Close Button settings.

OVERLAY

1

1


INSERT IMAGE HERE

Create your overlay

Choose from a gallery of pixel perfect overlay templates that work for your video.

You can also start fresh with the ‘Blank’ template and create an overlay from scratch.

OVERLAY

2

2


INSERT IMAGE HERE

Edit Tools – Add Text

Highlight text to customize its appearance using the top Edit Settings bar.

You know how to use this already.

OVERLAY

33


INSERT IMAGE HERE

Edit Tools – Add Image

Select an image from Your Computer, or one that you have previously uploaded, using the top Edit Settings bar.

You can also add a URL link to your image.

OVERLAY

33


INSERT IMAGE HERE

Edit Tools – Add Button

Customize your button changing its original settings:

Font

Size

Colour

Weight

Alignment

Background-colour

radius values

URL link

OVERLAY

33


INSERT IMAGE HERE

Edit Tools – Add Video

Copy and paste the URL link of any valid YouTube, Vimeo or WIREWAX video to add to your overlay.

You can resize it as much as you like and also choose Autoplay or click-to-play.

OVERLAY

33


INSERT IMAGE HERE

Edit Tools – Add Map

Add a map to your overlay by enter the address at the Edit Settings bar.

You’re able to define the Zoom, if it has a Marker and between using the Original or Monochrome colour versions.

OVERLAY

33


INSERT IMAGE HERE

Edit Tools – Add iFrame

Display web pages and their content within your overlay by adding the URL as an iFrame.

OVERLAY

33

NOTE: Some websites don’t allow embedding by iFrame.


INSERT IMAGE HERE

Layers

With this new feature, you’re able to reorder the elements added by sending it to back or front.

OVERLAY

4

4


INSERT IMAGE HERE

Adjust and Save

Reorder

Duplicate

Delete

Save

OVERLAY

5

5


PREVIEW VIDEOSee how your video looks after adding hotspots and overlays


INSERT IMAGE HERE

PREVIEW

If you want to review how your final video will appear, toggle the Preview mode at the bottom left corner of your video.

If you’re happy, close the Preview mode, return to Edit mode and Publish your video.

PREVIEW MODE

EDIT MODE


CLICKOUTTake the viewer straight to another web page


INSERT IMAGE HERE

Take your viewer out of the experienceAllow your viewers to instantly jump out to another web page with the “Open URL” hotspot behavior.

Type the web page URL in the input.

OPEN URL


BRANCHINGJump to another point in the video


INSERT IMAGE HERE

Jump to another point in your videoChoose the ‘Jump to point in video’ interaction to allow your viewers to change the story.

Change the time the selected Hotspot should point to in the same video by adjusting the Out point value.

Create a ‘Choose-Your-Own- Adventure’ videos in minutes!

JUMP POINT

EXAMPLE: Check out an example of Choose-Your-Own-Adventure here.

#


PUBLISHPublish and share your video with everyone


INSERT IMAGE HERE

Restrict access to your video with different parameters

Change the details of your video

PUBLISH

2 – Share

Preview and share your video to various social networks

3 – Embed

Copy the embed code or URL to embed the video on your website

4 – Access

1

3

2

1 – Details

4


INSERT IMAGE HERE

Details

Choose a Title and Description to best represent your video.

You can also upload a custom Poster Frame or choose from the current video frame.

PUBLISH

1

1


INSERT IMAGE HERE

Share

Share your video to main social networks such as Facebook, Twitter and Tumblr.

You can also Preview your video here.

PUBLISH

2

2


INSERT IMAGE HERE

Embed

For embedding on your own site, choose from all of these options and generate your own embed code.

You can use the Embed code or the Embed URL.

PUBLISH

3

3


METRICSAccess the real-time metrics of any video


INSERT IMAGE HERE

METRICS

You can access the real-time metrics of any video you create.

Gain insight into how your video is performing across all embedded locations.

From number of views, interactions, dwell times, retention to devices, browsers, location and viewing times - all in one beautiful dashboard.

Track video performance

TIP: You can export a copy of your video’s metrics to crunch the numbers even closer.

SUPPORTWe’re here to help.

Drop us a line at [email protected] or chat with us anytime while working in the Studio.

mailto:[email protected]

Make any video interactive - Amazon Web Services · 2018-08-31 · Make any video interactive in 15...

Documents

Transcript of Make any video interactive - Amazon Web Services · 2018-08-31 · Make any video interactive in 15...