Video keyframe Image / Poster

Hey guys, are you able to set a key frame image for a video, so it shows that key frame of the video when inserted into Hype, instead of the first key frame?

Here's how to set that up: Setting a Poster or Background Image for videos (Custom Video elements and using HTML attributes)

Thanks Daniel, how do I add this information:

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

This can be setup in the identity inspector while you have the video element selected:

image

Then you would need to make sure you have poster-for-video.png in your resources library as well. (You may need to uncheck 'automatically optimize while exporting' for that image in the Resources Library to make sure it isn't converted to a JPG.

Oh thanks so much Daniel. That has worked perfectly.

1 Like

Another quick one on this. Once the video has been played on the iPad or on the web, it seems to lose the poster image that has been set. Is there a way to revert back to the poster image once you have clicked away from the 'played' video?

There might be other ways, but it seems that the load() function of a video will allow reverting back to the poster image.

So if you give the video element a Unique Element ID, you could add an On Scene Unload function that looks like:

hypeDocument.getElementById("myvideo").load();

And that should work. (Of course "myvideo" should match your ID, and/or you may need to use a class name instead if you are using symbols or responsive layouts). For some reason doing it On Scene Load doesn't work, but Unload is fine.

Thanks so much, I have used the Identity Inspector to create the Unique Element ID but, I do apologise, where so I actually add the code:
hypeDocument.getElementById("myvideo").load();

On the scene with the video:

  1. Go to the Scene Inspector
  2. Go to the On Scene Unload section and hit the plus + button
  3. For action, choose 'Run JavaScript…'
  4. For function, choose 'New Function…'
  5. Paste into the editor that pops up

Thanks again Jonathan. That worked well but...

I have an issue related to displaying videos. And it may be related to poster images.

The videos keep disappearing from the Hype scene. To get them back I have to save the Hype file and reopen the document and they appear. However as soon as I leave the video scene they all disappear again.

Is this a know issue, or am I doing something wrong.

I am using the below code to display the poster images as per your advice above:

hypeDocument.getElementById("video-1").load();
hypeDocument.getElementById("video-2").load();
hypeDocument.getElementById("video-3").load();
hypeDocument.getElementById("video-4").load();
hypeDocument.getElementById("video-5").load();
hypeDocument.getElementById("video-6").load();
hypeDocument.getElementById("video-7").load();

And pointing to it via a function.

The Hype Editor won't run On Scene Load/Unload code, so it might just be something related to how the poster attribute is being applied in the editor. I'm not sure I've seen that before; it would be useful if you could send a zip of your .hype document to support@tumult.com and let me know any steps that might be needed to be taken to see them in that state. Thanks!

(Also, to verify, this is an editor-only issue, right? Like it doesn't affect your actual output?)

Yes, that's correct. Editor only issue. Output is fine.
I will send the file to you.
Thanks.

1 Like

Hi Jonathan, tat issue seemed to resolve itself after a couple of restarts on my Mac and the Hype app, so hopefully should be ok.

One more thing on this, your solution to use On Scene Unload worked well but I wonder if there is any code that returns the video to the poster image once the video has played to the end? Even if the user hasn't changed Scene?

You could use something like this to 'load' the video if the ended event has been detected:

    var myvideo1 = hypeDocument.getElementById("video-1");
    var myvideo2 = hypeDocument.getElementById("video-2");
    var myvideo3 = hypeDocument.getElementById("video-3");
    myvideo1.addEventListener("ended", function(){
        myvideo1.load();
    });
    myvideo2.addEventListener("ended", function(){
        myvideo2.load();
    });
    myvideo3.addEventListener("ended", function(){
        myvideo3.load();
    });

(This just shows the first 3 videos as an example)

Thanks Daniel
Do I need to change the code that sits above the text as I cant get it to work:
function videorefresh (hypeDocument, element, event) {

Can you share an example? You shouldn't need to change that function name. Just make sure it doesn't start with a number.

I still have the function set to run at On Scene Unload on the scene inspector. Maybe I need to change how that function is loaded?

The code that you wrote, I assume, is no longer related to On Scene Unload?

It should run 'on scene load', since it listens to video playback while on the scene.