Preview animated videos on your website | Frequently Asked Questions

Since December 21, 2016 all videos on demand uploaded to Mediastream Platform are generated two (sub) preview videos with 426x240 resolution useful to create Animated Previews on your websites. The videos are generated without audio and in .mp4 (video codec h.264) and .webm (video codec VP8) format in order to ensure native playback in HTML5 with the <video> tag.

The video is automatically generated when a clip is uploaded on platform, the duration of the video is 5 seconds from the first scene change detected in the first 30 seconds of the video. In the following link you can see a functional demo https://jsfiddle.net/skgL4514/2/ and then we explain how to do it.

Insert preview in Web Site

For the preview to work in all web browsers it is necessary to include both videos in the <video> tag as shown below, this way the video preview will be available in all versions of Chrome, IE, Edge, Firefox and Safari.

Example:
<video width="320" height="180" autoplay loop muted>
<source src="https://mdstrm.com/video/585a86acd21be6e024725fe8/preview.mp4" type="video/mp4">
<source src="https://mdstrm.com/video/585a86acd21be6e024725fe8/preview.webm" type="video/webm">
</video>

The video information can be obtained directly from the data provided by the Mediastream Platform API (/api/media/<id_media>) in the preview attribute. In general the file URL responds to the following path:

https://mdstrm.com/video/<id_video>/preview.mp4

https://mdstrm.com/video/<id_video>/preview.webm

but we recommend to always check if the URL is available in the API.

We also recommend to always consider in the video tag the poster option that allows to display an image while the video is being downloaded or in case it cannot be displayed to the user. Example:

The image URL can also be obtained directly from the Mediastream Platform API.

If you have any related questions please feel free to write to us via chat.

Atte. Mediastream team