Setting background or poster image for video elements

video

(Fenna) #1

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:


#2

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.


#3

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>

#4

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

I may be wrong


(Fenna) #5

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!


#6

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)


(Fenna) #7

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…


#8

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


(Fenna) #9

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


#10

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


#11

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)


#12

Got it it’s perfect! Thanks!