I want to select the preview / poster frame for my videos

(Vikas Kedia) #1

My goal is to create tutorial videos like at: Discourse 1.4 Released!

When I embed mp4 directly the onebox shows the video beautifully but I cannot control the poster image.

Here are the steps I took to enable videojs:

Add css to head

Add JS to /body

In my post used the videojs embed

It is getting rendered as:

Why not just like give the link to the video and let onebox take care of putting the video tag?

Because I want to use the videojs poster feature. So that when the video is not being played I can decide which frame to show.

In the discourse blog at: Discourse 1.4 Released! The poster feature of videojs has been used.

<p><video width="100%" preload="auto" poster="https://blog.discourse.org/wp-uploads/2015/09/d14-darktheme-poster.png" controls><source src="https://blog.discourse.org/wp-uploads/2015/09/d14-darktheme-HD.mp4"></video></p>

From http://docs.videojs.com/docs/guides/options.html

The poster attribute sets the image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As sooas the user clicks play the image will go away.

(Eli the Bearded) #2

As I recall, you can specify a URL to a viewer for a video, and use that page to do the fancy control work. In the URL you want to onebox, you would include opengraph tags along the lines of:

 <meta property="og:type" content="video.movie" />
 <meta property="og:url" content="https://example.com/player" />
 <meta property="og:video" content="https://example.com/video.mp4" />

(Vikas Kedia) #3

Sorry that flew over my head. Can you please give an example of embedding a video with a poster image as the first slide that shows when the video has not started.

Say the video and poster URLs are:

poster= https://blog.discourse.org/wp-uploads/2015/09/d14-darktheme-poster.png
Video = https://blog.discourse.org/wp-uploads/2015/09/d14-darktheme-HD.mp4

(Eli the Bearded) #4

There is an image attribute separate from “poster” that may apply, I’m on my phone now and can’t look at specifics right now.

As a simple approach, the viewer URL could include parameters that find poster and mp4. If it can render as a standalone page, then I think the viewer OG tag url will “just work” for oneboxes.

(Jeff Atwood) #5

This is a tiny micro-optimization that we are unlikely to support for the forseeable future…

(Eli the Bearded) #6

I thought I had seen this work before, but trying it, I can’t seem to get it embed today. So, nevermind.

(Vikas Kedia) #7

I agree.

As a workaround is there a way I can whitelist the video tag ?

(Jeff Atwood) #8

You can upload your videos to YouTube where it is possible to select the preview frame, as well.

(Vikas Kedia) #9

Good idea … but these are internal training video for a mental health corp. HIPAA won’t allow uploading to youtube.

Can I whitelist the video tag ?

(Jeff Atwood) #10

I think there is a plugin somewhere that allows whitelisting random HTML but you will need to search for it, not sure if it works with current Discourse and will absolutely be broken in 4 weeks when Sam moves us to new Commonmark pipeline.

You could also re-render your videos with the “preview” frames at the beginning so it will work everywhere.

(Vikas Kedia) #11

absolutely the best idea :slight_smile:

(Vikas Kedia) #12

@codinghorror Damm … man … you can never make your users happy !!

So I re-rendered the videos with the poster as the first picture and they love it … and now they say they want to play the video at 1.5 times the speed …

Videojs on the home grown platform allowed 1.5x speed play …

Any idea how I can allow them to change the play speed with the onebox video?

(Rafael dos Santos Silva) #13

You want to host it somewhere they provide all the features you want (like Youtube, even Vimeo doesn’t have play speed) or write a plugin/customization that enables videojs for every video tag.

(Vikas Kedia) #14

Good idea … I will do that …