Multiple videos

1

Hi,

What is the best method to use to have multiple videos (mp4) able to play, like this:
[Play video 1] … [Play video 2] … [Play video 3]

I have tried using 3 scenes, then the same 3 buttons on each scene to play the video via javascript, however it is very clunky and buggy. hypeDocument.getElementById(‘video1’).play();

What is the best way?

Thanks

2

This is really subjective to individual needs.

Have a search for video on the site. There are plenty of examples using a few methods, including using a single video element and load each video into that when needed.

3

Hi Tom!

As @MarkHunte mentions there are many ways to create the exact interface You need.

The following is a bare bones example showing the basic structure of using one element (a rectangle) to play several videos.

Hype project Demo: Video_Multi _rect.hype.zip (758.5 KB)

The demo has a rectangle with a video tag in its innerHTML:

<video id="videoHolder" width="320" height="240" controls="">
      <source src="${resourcesFolderName}/video_01.mp4" type="video/mp4">
</video>

More about video tags here.
More about the HTML Video DOM here.

Important: In the JavaScript that follows below we will be using the ID of the video tag itself (“videoHolder”) - not Hype’s “Unique Element ID” field in the “Identity Inspector”.

The buttons labeled “Video 1” & “Video 2” do not have a pause function, they just play. They have IDs that match the video name… e.g. the “Video 1” button’s ID is “video_01” and the video it will play is “video_01.mp4”. In the JavaScript below we will add the “.mp4” to the button’s ID to yield the full name of the video.

Clicking on one of these buttons triggers the “vidSelectPlay()” function:

var vid = document.getElementById("videoHolder");
var whichVid = element.id; // the ID of the button that was clicked
vid.src = "${resourcesFolderName}/" + whichVid + ".mp4";
vid.play();
1 Like
4

Thanks, that works fine.

I should have mentioned in the first message but my aim is to have it similar to a DVD menu where…

  1. User is presented with main menu - a looping video with buttons to play different videos.
  2. User can select a button and video plays. When it reaches the end, it returns to the (looping) main menu screen.

Hopefully I’ll be able to work it out, and if I do I’ll post the project.

However, if someone knows a solution already I’d be interested to hear.

Thanks a lot.

5

@JimScott scot has given you most of it for what you say you want.

For the

When it reaches the end, it returns to the (looping) main menu

Look at the HTML Video DOM link he supplied there you will find HTML Audio/Video Events in particular ended
Each event listed has examples when you click them.

There are also examples on the forum if you search..

6

I ended up doing it in the GUI, manual way using scenes. I only have very little experience with html and css. Javascript is beyond me.
Archive.zip (2.1 MB)

I have attached the scene, and animations I used.

1 Like
7

Hi Tom!

As You are not conversant with the “three pillars” of the web (HTML, JavaScript & CSS) You came up with a reasonable solution.

8

Unfortunately my solution is a bit buggy. If anyone knows how to fix it, I’d love to know. All the material files are there.

Alternatively, there is probably a better way with javascript, so I’ll try and get assistance with it.

9

I assume by buggy you mean that the scene may go back to the menu before the video is fully complete?

In Javascript, HTML5 <video> elements have an onended callback that will get triggered when the video is done playing. You can utilize this for each scene by:

  1. First, remove your existing Jump to Scene actions
  2. Select the video and give it a Unique Element ID in the Identity Inspector like vid1 or something.
  3. In the Scene Inspector add an On Scene Load action for each scene that is set to Run Javascript. The code would just look like:
	hypeDocument.getElementById("vid1").onended = (function () {
		hypeDocument.showSceneNamed('menu');
	});

You will need to replace the “vid1” part with the corresponding IDs for each video.

10

Thanks a lot. it is now working perfectly and I have also added features to it.

I have attached the project if anyone else wants to use it etc.

The purpouse of it is to create an interactive mp4 video with menu selection. Sliders are added for further interactivity.

Archive.zip (2.3 MB)

1 Like