Interactive video

1

Hi, I trying to make an interactive video which is a streaming video from a provider called vzaar in which I embed 2 multi choice questions, each with 2 choices.
I thought of pausing the video at 22 secs then jumping to scene quiz1 with a quiz question and on answering that, returning to the video back to 22 secs and playing then again pausing at 35 secs and jumping to scene quiz2 and returning.

I dont know if this is the best method but Im unsure how to write and execute this

2

Your video player (vzaar) likely has documentation for it, which will allow you to trigger commands like ‘jump to 22 seconds and resume playback’. Based on their documentation it looks something like this:

 var vzp = new vzPlayer("vzvd-11616962");
  var seekButton = document.getElementById("seekButton");

  vzp.ready(function() {
    seekButton.addEventListener("click", function() {
    	var newTime = document.getElementById("seekTime").value;
      vzp.seekTo(22); //Seeks to the designated time.
    });
  });

You can find other function like ‘play’ and ‘pause’ here: https://developer.vzaar.com/docs/player-api-functions

So if you embed your player within the inner HTML of a rectangle, you could run that function in response to clicking a button. To do that, you would select the button, and create a new ‘Mouse Click’ action to run a JavaScript function.

3

I am not familiar with “vzarr” and don’t know if there is a technical limitation with your set-up… but another approach could be adding an “overlay” instead of jumping to different scenes. You would still embed the player in a rectangle as @Daniel suggested.

A symbol could be used for the overlay and use the Symbol’s timeline(s) to display your different quiz sections.

If this would work I think symbol(s) might offer a better visual integration of the quizzes and the video. Just a thought…

4

Thank you both. Daniel what you have provided is beyond me unfortunately.
I did try and overlay but I found that even thought the main timeline with the video is not playing , the timeline is playing. What I mean is I put a pause on the video on scene load and I triggered an event a few sec in however even tho the video is paused the timeline plays and triggers the event

5

Uploading an example Hype project would help to understand your current work better.

6

This appears to be working better but its not perfect - the idea is to pause the video, answer the question and then continue from the paused position

7

trying to figure out how I upload the hype project :thinking:

8

Right click on your Hype project and select “Compress” from the fly-out menu which turns it into a “.zip” file.

Next, drag this zip file from its location in a folder, or the Desktop, onto the area in your post where you are writing~editing. See Fig.1 below.

Done.

Note: The zip file must be under 3MB.


Fig.1

27%20PM
Screen Shot 2019-09-12 at 10.08.27 PM.png782×469 35.7 KB

1 Like
9

hypetest.zip (1.8 MB)

10

I can’t open this format

11

Hi Michael!

Your uploaded project “hypetest” does not appear to be as described in your original post. I am not seeing the “vzarr” set-up - just an “.mp4” video.

The “vzaar” will be something You need to set-up - but in the mean time please review what @Daniel suggested as an over all approach - using a “rectangle” as a container for a video. Even though this tutorial is using audio - the same principles apply to video.

Here is information about embedding videos.

Note: I can open your Hype document & play it - I’m not sure what is giving @Casimiro the problem.

==========================

EDIT:
With a little more time I’ve created a Demo for You of using a “rectangle” to contain a video using the basic set-up in your “hypetest” example project above…

hypetestJHSv1.hype.zip (1.8 MB)

In the “InnerHTML” of the rectangle named “Video Holder” in this Demo we have a “video tag”:

<video width="800" id="myVideo">
	<source src="${resourcesFolderName}/page4.ipodtouch.mp4" type="video/mp4">
</video>

Note: The id name “myVideo” is what is used for the “Play” & “Pause” javascript functions’ “id” - not Hype’s “Unique Element ID” in the “Identity Inspector”.

12

Thank you Jim and apologies I ve been trying a few different things with videos.

In terms of the timing of the question, since the video is not on the timeline and I cant scrum through it, does the 2 sec mark on the time line equate to 2 secs into the video?

13

To begin, You were using a video that was dragged into the editing window which was not what we need. I was just trying to show how to use the innerHTML of a rectangle to load a video - nothing more. This process an important first step.

The answer to your question is a qualified "Yes". As I have my demo set up using your example video a timeline would be accurate - as the user has to hit the "Start" button the video should have plenty of time to load from the server (not guaranteed though).

Additionally, I have it on the "Main Timeline" - not ideal. A separate timeline would be better, and a Symbol with its own timeline would be better still for this use.

However, none of these timeline based set-ups is a bullet proof method - there are other ways (via scripting) to have more precise control over events.

Having an actual Demo project that uses your intended video source ("vzaar") will be important as there is a specific "Application Program Interface" (API) for "vzaar" as @Daniel pointed out in the vzaar documentation.

Until this is set-up in a functioning manner everything else is speculation. :wink: