1. Home
  2. Manual Videoportal University Leiden
  3. 5. Interactive Videos (Kaltura RAPT module)
  4. Creating an interactive video

Creating an interactive video

Now that you have familiarized yourself with the project controls you are ready to create a project. Follow the first few steps of the previous chapter to get through the initial setup.

  • First thing we are going to ask you to do is to open the media pane. You can do so by pressing the “Show media” button on the far right corner.
    • In this pane you can see all the media you own which you can use in your interactive video.
      • Ownership of a video is set upon creation/upload and is set to the name of the account it was uploaded by.
      • A transfer of ownership can be requested through the video-coordinators.
  • To start our project we would ask you to drag the first video from your media pane onto the (empty) “Start” node to set the first video for your project.
  • Next we need to add at least one more node with a video.
    • Dragging a video onto the canvas will automatically create a new node.
    • Please give the nodes appropriate names. This can be done by double clicking the title above the node (or in the Node edit window).
  • The next step would be to link the videos together so that they create a flow.
    • To link a video to the next please hover your mouse over the middle of the right hand side of the node. You will now see a small arrow icon appear (as shown below):

  • When you click and drag the arrow icon towards another node the next node will show a semi-circle gap to which you can connect your “path” (as shown below).

  • When two videos are linked the application will automatically generate hotspots on the video-player through which you can skip to the next video and set the end behaviour of the first video to automatically start the second (linked) video.

  • To change the behaviour of the hotspot we will have to open the “Edit note” pane. You can do so by either double clicking the node you wish to edit or by clicking on the pen icon in the “Node tools” on the task-bar.

  • A new window opens with the following tools in the task-bar:
    • Select:
      • Pointer.
      • Marquee select.
    • Hotspots:
      • Draw hotspot.
      • Duplicate hotspot.
      • Remove hotspot.
    • Rulers & guides.
    • Timeline snapping.
    • API Timeline (opens a timeline for API controls).
    • Click Through mode.

  • Aside from the task-bar a right hand side-bar also appeared with the following options:
    • Node properties:
      • Name.
      • Description.
      • Custom data (API data).
      • Source media.
      • Duration counter.
    • Behaviour:
      • End-behaviour.
  • Underneath the video preview you find:
    • video controls:
      • Jump to start.
      • Play/Pause.
      • Jump to end.
    • Timeline.
  • On the timeline you can see a red pointer through which you can select a specific point in the timeline.
  • Another item on the timeline is the grey bar with the title of the next video.
    • On the farthest left and right hand corners of this bar there are two points which you can use to adjust the start and endpoint in the timeline for when your hotspot shows.
      • You can also adjust the timing for the hotspot by dragging it along the timeline.
  • If you haven’t given your node a proper title yet, please do so now (in the side-menu on the right hand side).
  • You can also give the node a description.
  • Custom data is an option still under investigation, do not do anything here!
  • With the source media control you can change the node’s video to another one (a new edit for instance).
    • You can also replace the video in a node by dragging the new video onto the node from the “Show media” pane.
  • In behaviour you can change what happens when the end of the node is reached.
    • When “end behaviour” is set to freeze the video will stop playing at the set point.
    • When set to “Default path” it will automatically start the video selected in the “Destination” drop-down.
      • Be careful not to create a unintended infinite loop here by having a video connect to itself!

  • You can create a hotspot inside a node by clicking on the “draw hotspot” button in the taskbar and create it anywhere you like.
  • You can also select an existing hotspot to edit its settings. This will appear during video playback and gives the option to skip to the next video, another video or a URL.
  • Now we are ready to change the look and behaviour of the hotspot.
    • Click on the hotspot you just created.
    • The side-bar will change to show the controls for the hotspot. It will allow you to set a size and position for the hotspot, how it behaves and change the look and feel of it.

  • Firstly we will change the position of the hotspot. We want it to be near the top and left border, we recommend changing the position to have a distance of at least 5 to 10 pixels from the edge. Set the X and Y property accordingly.
    • If you want to change the position altogether you can also drag it in place in the video preview screen or type the new coordinates.
  • You can also change the size of the box, by default it is fairly large. Play around with the size to see what works best for your video.
  • In the behaviour part of the controls (below the “Action” drop down menu) you can set the hotspot to:
    • Instant jump (instantly go to the next video or visit the given URL).
    • Pause video.
    • No action.
  • With the destination control (only visible when you have selected “instant jump”) you can set the destination for the jump, by default this is set to whatever node you are connected to.
  • Custom data is under review, please do not do anything here!
  • URL. Enter a URL to lead your viewer to when they press on the hotspot.

Next we are going to stylize your hotspot. This is all a matter of taste and what fits with the videos/presentations you are using.

  • Styles:
    • Skin. With skin you can either create or choose an already existing skin. The skin is a saved setting containing your Text and Background style settings.
      • When you have a skin selected and decide to change any of the settings below it will prompt you to either save this new setting or revert to the original state.
  • Text:
    • Colour. Change your text colour. It is always very important to choose a text colour that is in strong contrast with its background.
    • Size. Changing the text size will help the readability of your hotspot.
    • Style. By making the text bold or italic you can give emphasis to the hotspot text.
  • Background:
    • Colour. Change the colour of the background of your hotspot.
    • Hover colour. Change the colour of the hotspot background when a user hovers over it.
    • Roundness. Change the radius for the border of the hotspot. Setting it to have 0 radius the box will be rectangular. Setting it to 5 pixels or more will give it a rounded feel and setting it more extremely could make it appear round.
  • Select the arrow on the top of the screen to return to the main edit screen.
    • Press “Save project”.
    • Select “Exit project”.
  • (Limited) analytics are available by navigating to the video and choosing for “Analytics” in the “Action” drop-down.
Was this article helpful to you? Yes No

How can we help?