Setting background or poster image for video elements

Hi all,

I would appreciate some help with the following:

I just included a video in my Tumult template and in my Element Inspector at Background > Fill Style I put an Image as a background.

This image is only visible for a split second, however, what I’m trying to achieve is the following:
I would like to see the background image by default. And only when you hoover over it, the video starts playing.

I figured out how I get the video playing when I hoover over it.
The only thing I can’t seem to figure out is how you can have your static background picture shown by default (instead of the thumbnail (first shot) of the video).

Many thanks for your help! :slight_smile:

Hi Fenna @fennakooijmans,

Is it possible to upload your document so people can have a look at how you are implementing what you are doing. If you .zip up your document and drag it here into your reply it will upload automatically.

I can only assume you are including the video code inside a rectangle element and thus when the video loads on scene it is covering up the background image.

One way to do what you ask is create 2 elements and overlap them and when you hover over the top one the element’s visibility is hidden revealing the underlining video and also at the same time the video plays.

The ‘poster’ value is what sets the initial frame prior to video playback: If you have poster image.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>

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

poster-image.hype.zip (562.9 KB)

2 Likes

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

I may be wrong

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 :slight_smile:
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!

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

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

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

1 Like

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…

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

2 Likes

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

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

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)

1 Like

Got it it’s perfect! Thanks!

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

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

EE7D82B2-BB3E-4026-B360-56D45901C213

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)

2 Likes

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

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.

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.