Media View Component

<media-view> is a Web Component that acts as an abstraction for the <img> and <video> elements and makes fitting and panning over them easy. Use the src attribute like normal and the media-view component will figure out if it's dealing with an image or a video.

Installation

Script tag

• Put this script tag <script src='https://unpkg.com/media-view-component/dist/mediaviewcomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install media-view-component --save
• Put this script tag <script src='node_modules/media-view-component/dist/mediaviewcomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install media-view-component --save
• Add an import to the npm packages import media-view-component;
• Then you can use the element anywhere in your template, JSX, html etc

Usage

Just place the <media-view> anywhere you would otherwise have used an <img> or <video> element. Supply a src attribute or set the mediaViewSource property on the element from code and it will load and display the media. If you know beforehand that the source is an image or video, you can use the optional srcType attribute.

<media-view src="https://www.fillmurray.com/420/560"></media-view>
<media-view src="https://www.fillmurray.com/420/560" srcType="image"></media-view>

A default loading spinner and error message are included, but if you want to show something else at those times, you can use the "loading" and/or "error" slots like this:

<media-view src="https://www.fillmurray.com/420/560">
  <div slot="loading"><span class="my-own-fancy-spinner">turn turn turn</span></div>
  <h1 slot="error">Something went horribly wrong!</h1>
</media-view>

Below is an overview of all the available properties on the <media-view> element. Also see a collection of examples here.

Properties

| Property | Attribute | Description | Type | Default | | ----------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ----------------------- | | fit | fit | (optional) The kind of "object-fit" to use for the image/video. Can be contian, cover, fill, none, scale-down or pan. | string | "contain" | | loop | loop | (optional) Set to true to loop if the source is a video | boolean | false | | mediaViewSource | -- | Use to set the mediaSource object directly. Use either this or the src property. | MediaViewSource | new MediaViewSource() | | panDirection | pan-direction | (optional) The direction in which the panning starts. Accepts 'normal' (up for tall media, right for wide), 'reverse' (down for tall media, left for wide) or 'random'. | string | "normal" | | panEndAtCenter | pan-end-at-center | (optional) Set to false to prevent panning back to the center after all iterations are done. | boolean | true | | panIterations | pan-iterations | (optional) Set the number of iterations (passes) of the panning animation. Only accepts whole numbers and Infinity. | number | 1 | | panMinVisible | pan-min-visible | (optional) The minimum percentage of the media surface that is garanteed to be visible at any point during the panning. | number | 80 | | panPaused | pan-paused | (optional) Set to true to pause the panning animation. | boolean | false | | panTime | pan-time | (optional) Duration in seconds of a single iteration (pass), not counting returning to center. | number | 5 | | paused | paused | (optional) Set to false to start playing if the source is a video. | boolean | true | | playStart | play-start | (optional) Time in seconds to start playing from (and loop back to) if source is a video. | number | null | | playTime | play-time | (optional) Time in seconds to play if source is a video. | number | null | | src | src | The source url of the image/video. Use either this or the mediaSource property. | string | undefined | | srcType | src-type | (optional) The source type. Can be either "image" or "video". If unspecified, the component will figure it out. | string | undefined |

Events

| Event | Description | Type | | -------------------- | ----------------------------------------------- | ------------------ | | mediaLoaded | Fires when the image/video is loaded. | CustomEvent<any> | | mediaSourceInvalid | Fires when the image/video could not be loaded. | CustomEvent<any> | | playEnded | Fires when the video stopped playing. | CustomEvent<any> | | playStarted | Fires when the video starts playing. | CustomEvent<any> |