Inline Video & Poster Previews on iOS

[sandor]

Is there a way to have a video preview on iOS without setting an explicite Poster Image (just like it is on OSX)? I know how to work with poster images, but it is annoying to create the images for every video when you have to deal with a lot of them – I am really lazy

[DBear]

There was some talk in the past about adding the autoplay attribute (even though it doesn’t allow autoplay it would still load the first frame) although iOS 10 does allow autoplay if conditions are right. If doing this I would pause the video just in case. Whether this still applies … who knows.

Other than that, it’s the poster way, unfortunately.

[Daniel]

You would need to use something like:

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

iOS should set the poster image as the first frame of the video, but this requires that you have preload set to ‘auto’ (this is the default).

This looks really cool: https://github.com/rwaldron/popcorn.capture, and might help (but maybe not as @DBear says it’s not maintained)

[DBear]

iOS should set the poster image as the first frame of the video, but this requires that you have autoplay set to ‘on’.

Maybe I should have re-worded what I said to make it clearer

Also, I believe sandor wanted a way to skip creating the images in the first place the lazy %&^* that he is

I would avoid popcorn. It’s an old library and hasn’t been active for a while. Not maintained anymore.

[sandor]

Thanks Guys!

@DBear – you are right, I was looking for a solution without having to create a bunch of image previews. And yes, I do have a cozy one But I have to mention that I am talking about 10 presentations with 10-16 videos in each of them…

@Daniel – thanks, this is surely the right way. Right now (lazy %&^* that I am) I am assigning the poster Image as an Image background to my videos. This “seems” to work in the scenarios I have tested (iOS/iPad and OSX). Do you know if this would cause some trouble with other configurations?

[Daniel]

Do you know if this would cause some trouble with other configurations?

Don’t think so, the poster is pretty well supported.

[DBear]

Do you know if this would cause some trouble with other configurations?

I wouldn’t have thought so!

lazy %&^* that I am

I’m sure you did but just to make sure, you understand this was a joke

[sandor]

Sorry Guys, I think I was somehow pretty unclear What I am doing exactly is: select the video in hype, in the hype element tab I select “Image” as a background for the videoelement. So I am not setting the poster image via JS but assigning a bg-image to the video div…

@DBear – no worries unless you call me Donald

[DBear]

Setting the background image should be fine. If the browser / app allows the first frame as a poster image then it will override the bg image otherwise (i would think) the bg image would be displayed.

As per my suggestion above, setting the video to autoplay on iOS devices may give you a (1st frame) poster image. Therefore, not needing to create individual images. Maybe you could test that first. Failing that, return to the BG image approach.

[sandor]

Thanks again. I have tested that workflow and seems to be working (at least on iOS 10x) and also in Hype Reflect. Just was unsure what will happen on older iOS – but this is not a big deal, almost 100% of the Pads of my client (Sales Stuff) will be using an actual iOS. So I will leave the presentations that are ready with the bg-image and make the other presos with the autoplay function. Will save me 1-2 minutes

[sandor]

@DBear Just for information – a small (but really small) backside of using the autoplay and pausing the movie on load is a small flickering of the movie-container on load… Anybody who can live with this can really save some time having not to create poster frames for iOS…