media-view-component v0.2.5

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

Events