media-view-component

A webcomponent that can display an image or video and makes fitting and panning over it easy.

Usage no npm install needed!

<script type="module">
  import mediaViewComponent from 'https://cdn.skypack.dev/media-view-component';
</script>

README

Built With Stencil

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>