Ambiera Forum

Discussions, Help and Support.

Create a new account, Search, or Login:
Name: Password:
Ambiera Forum > RocketCake
HTML5 Video Poster Image ?
Author Text

micaelo
Registered User
Quote
2022-10-06 15:34:37

I haven't found a direct way to insert a poster image. Without a poster image the video will display its first frame which doesn't look nice if the video starts with a fade-in.

My work-around is to insert a background image, publish to local disk to create the \rc_images\ folder, then right-click the video in RocketCake and insert the additional HTML attribute
poster="rc_images/<filename of background image>" 
This works but is an inconvenient detour. Would be great if the video properties allowed to insert a poster image right away.

By the way: What is the background image good for? It's visible in the editor, but after Publish it pops up for just some milli seconds before it gets replaced by the first frame of the video (unless there is a poster image).


micaelo
Registered User
Quote
2022-10-06 16:47:54

Further on the above:

I have found an easier way to prevent the video from displaying its first frame: If I disable the preloading of the video the background image will remain visible and serve as the poster image.
I also found it's a good idea to specify width and height of the video because otherwise it can happen that the layout fidgets in the vertical.
So here is the additional HTML I'm going to use (instead of the one mentioned above):
  width="640" height="360" preload="none" 

The downside of preload="none" is that the video's control bar won't show the duration of the video before it has been started.


micaelo
Registered User
Quote
2022-10-06 22:39:39

Hi guys,

please ignore my opening post in this thread which only reveals what a dilettante I am.

I wanted to insert an HTML5 video and give it a title image. Based on my previous web publishing practice, I know this as a poster image because it is defined with the HTML code
 poster="<image path>" 
Since I didn't find a corresponding option in the HTML5 video properties, I chose the option ->Background ->Image out of necessity (not knowing that this would give me exactly what I wanted).

And indeed I saw the image in the editor, but not in the preview. There was only a black area. However, as I know now, this was not due to a missing image, but because RocketCake apparently allows videos to be preloaded by default and then displays the first frame or one of the first frames. And since the video has a fade-in, starting from black, I only saw a black area.

It took me a while to figure that out. Now, with the additional HTML code
 preload="none" 
that stops the video from preloading I'm on the right track, and my question is solved. I have only summarised this once more in case others also have the problem.


sammyp
Registered User
Quote
2022-10-07 21:20:39

I found this which works when using the HTML5 Video. Load the image and then on the video element right click and add the following code in the additional attributes: controls poster=

Try it and see if it works. I'm not a programmer. Just learning like everyone else. This works for me though.


micaelo
Registered User
Quote
2022-10-07 22:51:25

Yes, thanks, that's indeed the approach I finally ended up with. I set the BackgroundMode to "Image" and specify the image which I want to use as the value for the poster attribute. This way I ensure RocketCake will put this image in the \rc_images\ folder. Then I add
 poster="rc_images/<filename of background image>" 
to the video element. Done!

This way I don't need to enter code to prevent the video from preloading and from replacing the background image because whatever it loads the player window will definitely show what I want it to show, and for as long as no one hits the play button.

The icing on the cake would be if I knew how to let the player return to the poster image when the playback has finished.

Here you can view my test page. Note that the image in the player window is not one of the video's starting frames but the image I specified via the poster attribute
https://4hundert.de/public/video...

PS: There is no need to add the control attribute. It's already in by default.


bupp
Registered User
Quote
2022-10-08 10:40:30

rbild on the cake would be if I knew how to let the player return to the poster image when the playback has finished..


Just an idea:
You could also insert a still image in the video at the beginning and at the end.
or create the possibility that the page reloads. Unfortunately I do not know how.


micaelo
Registered User
Quote
2022-10-08 11:17:25

Thanks, bupp,

adding a 1 second still frame at the end of the video (same image I use for the poster attribute) is indeed much easier a solution than finding a way to let the player return to the poster image or to let the page reload.


micaelo
Registered User
Quote
2022-10-08 15:20:39

@ bupp,

thanks again. Your tip to append some still frames to the end of the video does the trick. No more black player window when the playback has finished.


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Internation?l" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© 2020 Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact