Setting a Poster or Background Image for videos (Custom Video elements and using HTML attributes)

[Daniel]

In Tumult Hype 4, you can set a poster image for a video by setting a HTML Attribute on the Video element:
key: poster
value: ${resourcesFolderName}/poster-for-video.png

Note: Make sure you uncheck 'Automatically Optimize when Exporting' on your PNG, because Hype may convert it to a JPG if no transparency is detected.

Custom Video Element:

The 'poster' value can also be used in a regular video element. This image is what sets the initial frame prior to video playback: If you have posterimage.png in your resource library, you can use it like this:

<video poster="${resourcesFolderName}/posterimage.png" width="640" height="360"  preload="auto" controls>
      <source src="${resourcesFolderName}/videofile.m4v" type="video/mp4" />
      <source src="${resourcesFolderName}/videofile.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="${resourcesFolderName}videofile.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

This is also a great place to set an attribute like preload="auto" (learn more about preloading video)

poster-image.hype.zip (562.9 KB)

[DBear]

I believe she would also like the hover aspect as well @Daniel (hover over image and then play video.)

I may be wrong

[fennakooijmans (Fenna)]

Hi DBear and Daniel,

Thank you so much for such a quick response!

Unfortunately, I am not able to upload the document due to agreements I have with the client.
I do understand this makes it difficult for you to help me.

But here is some more information about my query and lets see:

@ DBear
I indeed used the rectangle video element to upload the video. And then I used a separate photograph as its background.
Your suggestion to create two elements and overlap them is great. In my case: the photograph needs to be on the top (to start off with). Do you know how I can send it to the back when you hoover over it? Do I have to “Run Javascript” and then add a “new function” and then add some kind of code? Or do you think it’s best to make different timelines?

@Daniel
I am a bit of a newbie with Tumult, so I don’t really know what “poster value” means
I already used the following functions in order to get the video play and pause
document.getElementById(‘video1’).play();
document.getElementById(‘video1’).pause();

This is the code I found on the forum.

If there is a way of adding another code which instructs the element to show the background image by default, and then when you hoover over it the video appears and start playing, that would be amazing!

[DBear]

@fennakooijmans

"Run Javascript" and then add a "new function" and then add some kind of code? Or do you think it's best to make different timelines?

Yes, Give me 2 secs and I'll do a quick screen cast.

@fennakooijmans ScreenCast: http://quick.as/0dgdi70vy

@fennakooijmans

If there is a way of adding another code which instructs the element to show the background image by default, and then when you hoover over it the video appears and start playing, that would be amazing!

You can also do it this way and just add code that plays the video when it is hovered over. (on mouse over)

[fennakooijmans (Fenna)]

Thanks DBear.

Yes I was able to do that with hoover on mouse over en mouse out.

It’s just the photo thingy that I’m not able to sort out…

[DBear]

add this to your <video> code that is in your innerHTML:

<video id="video1" poster="YOUR PATH TO YOUR FILE HERE"> // this can be ${resourcesFolderName}/YOUR FILENAME

so you add a poster frame to your video of whatever picture you want and when you mouseover it will disappear and your video will play

[fennakooijmans (Fenna)]

Thank you both! Thanks to your advise I was able to achieve what I wanted to!

[monsieurjoko]

Hey everyone!

I read the tread but my case is a little bit different. I have a video with Java that makes it stop and play when you click on it. I don’t have any commands and I don’t want to.

I just want a poster picture of any frame (that I have already in PNG) to be there when the scene open on top of the video. Then, when we click on the video, I want the video to start like normal and the poster to disapear.

Is this possible?

David

[Daniel]

At this time it’s not possible to do this without at least one line of code.

If your image is ‘image.jpg’ in your resources library, and your video has a ‘unique id’ of myvideo, you can use this line to set the video poster:

hypeDocument.getElementById('myvideo').setAttribute('poster','${resourcesFolderName}/image.jpg');

… set as a JS function which runs ‘On scene load’ for the scene containing your video.

test1.hype.zip (2.2 MB)

[monsieurjoko]

Got it it’s perfect! Thanks!

[cvad (Chris V.)]

I am doing something wrong and I can’t figure out what. Can someone please take a look at the “Whole Health” scene in this file (scene 2)?

There are two videos in this scene. Both fade from black, so the first frame is black. I’m trying to get the videos to stop being shown as black boxes by loading the poster images “image1.png” and “image2.png” to show a more compelling preview. To do this, I created the setposter function as described here but I did something wrong and it’s not working. Thanks.

TVHSMod2.zip

Live site here

[DBear]

You must give the video elements an ID that corresponds to your code.

Also, you may find that the automatic optimising may be changing your images to jpegs so either turn it off or change your code to “image1.jpg”

P.S I would also use “camel case” to your ID’s. This is best practice. e.g wholeEarth2d and tvhsWholeHealthYoga (no spaces and symbols)

[cvad (Chris V.)]

Thank you so much. Followed your advice and it worked. (Did end up having to use jpg images.)

[epistrophy]

I cannot seem to set the poster image for the videos I’ve added to my hype document. I followed the instructions for Hype 4.

I may be confused about what the proper name for the resource folder should be.

[jonathan (Jonathan Deutsch)]

Two points:

• ${resourcesFolderName} is the magic variable itself; this gets substituted on export by Hype so you want to keep that bit. It probably should be: ${resourcesFolderName}/frelin.png
• Select the image in the resource library and make sure to uncheck “Automatically optimize when exporting” otherwise Hype may convert (and thus rename) the file.