Portfolio of Videos

Scenes
1

I am building a portfolio type of site that will showcase multiple different video pieces. I want to have thumbnails of each piece and want the user to select a thumbnail that will launch the accompanied video. Should I create a different scene for each video? I currently have about 36 different videos. This may increase over time.

2

I personally would setup a single scene and have a bit of JS to change the video source in the player element.

3

it would depend partly on your layout, if you want all the thumbnails displayed on the same page before selection and maybe a light box type display, I would suggest using one scene and making each thumbnail button and accompanying video into symbols, with independent timelines, you needn’t use any js. it depends on your own design preference

4

Here is a quick example.

The thumbnail id’s are the names of the videos which the JS will use.

Screen Shot 2015-12-31 at 02.27.22.JPG1788×1442 229 KB

videoLoadhype.hype.zip (2.2 MB)

1 Like
5

Thanks for the tip. The light box style is exactly what I’m trying to achieve. I’m really green with all this. Is there any way you may have an example of how to work this using symbols? I’m totally lost. The Java script is completely over my head at this point.

6

Not sure if this is what you mean, you would need to explain more??

But here is a stab at it…

There is no JS.
The symbol is the Thumbnail strip. This is persistent across scenes.
Each scene hold a single video.
Each thumb changes the scene and runs a symbol timeline to move the position of the gold band used as a marker on the thumbs.

videoLoadhype 2.hype.zip (2.4 MB)

7

Thanks guys. Here is a link of my progress so far. Now I’m having trouble with the logo and gears animation and the ending of each video. What I would like is for when the video ends which they all have different lengths to go back to the ossv_work scene.work_in_progress

8

@oldsoul

• What you would do is “On Scene Load” choose “Run Javascript…” -> “New Function…”
• Then add an “event listener” in code like:

var video = hypeDocument.getElementById('VIDEO-ID'); /// this can be changed to however you get your video element

video.addEventListener("ended", function () { /// listens for the 'ended' event that fires when your video ends
    hypeDocument.showSceneNamed('YOUR-SCENE'); /// this will be your scene 'ossv_work'
});
9

Thanks DBear. I’m a total newbie and over my head with Java but will try and figure it out.

10

When you say
var video = hypeDocument.getElementById(‘VIDEO-ID’); /// this can be changed to however you get your video element
My video is is placed in the Main Timeline. Is the VIDEO-ID the name of my movie file?

11

no it’s in the Unique Element ID field in the inspector (⌘8). If it’s blank then it means you haven’t assigned one to it. Just type something in there like “video” or “video1” and then put it where it says “VIDEO-ID”

Once you assign it a unique ID then you can access the video using the variable (var)

12

heres an example light box i made without any code, light box example.hype.zip (20.8 KB)

I found some helpful info in this thread: Custom Video Embedding: Youtube, Vimeo, or hosted video files | Stopping Audio when exiting the scene