Video Js - Poster Image Cover/Contain

Make HTML5 video poster be same size as video itself

You can use a transparent poster image in combination with a CSS background image to achieve this (example); however, to have a background stretched to the height and the width of a video, you'll have to use an absolutely positioned <img> tag (example).

It is also possible to set background-size to 100% 100% in browsers that support background-size (example).

---

Update

A better way to do this would be to use the object-fit CSS property as @Lars Ericsson suggests.

Use

object-fit: cover;

if you don't want to display those parts of the image that don't fit the video's aspect ratio, and

object-fit: fill;

to stretch the image to fit your video's aspect ratio

Example

Videojs - how to change video poster dynamically

[Original answer is not correct for any remotely recent version of Video.js]

Set the new poster with myPlayer.poster(POSTERURL), then set the new source with myPlayer.src({type: TYPE, src: VIDEOURL}). Setting the source will reset the player and show the poster.

Alternatively, use the playlist plugin: https://github.com/brightcove/videojs-playlist

How to fill video element with poster image even if the poster image is a different aspect ratio than its video element?

This question got me thinking and your jsfiddle was useful in solving this (albeit not for IE as it doesn't implement the poster image correctly).

Basically combine what you posted, set the required poster image as the background image of the video element and specify a 2x2 transparent image as the actual poster image.

e.g.

<video controls poster="transparent.png"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

and

video { 
   width:305px; 
   height:160px;  
   background:transparent url('poster.jpg') no-repeat 0 0; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
}

I wrote a bit more about it at HTML5 Video and Background Images.

Change poster image with jQuery

This works.

$("#example_video_1 .vjs-poster").css('background-image', 'url(http://video-js.zencoder.com/oceans-clip.jpg)').show();

Dynamically using the first frame as poster in HTML5 video?

Did you try the following?

just append time in seconds #t={seconds} to source URL:

  <video controls width="360">
    <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4#t=0.1" type="video/mp4" />
  </video>

---

Related Topics