">

<script 
  type="module"
  src="https://your-domain/wc-msc-ez-video.js"
script>

">

<msc-ez-video
  src="your-video-path.mp4"
  poster="your-video-thumbnail-path.jpg"
  width="16"
  height="9"
  muted
  autoplay
  loop
  controls
  title="your video title"
  artist="your video artist"
>msc-ez-video>

{ "src": "your-video-path.mp4", "poster": "your-video-thumbnail-path.jpg", "width": 16, "height": 9, "muted": true, "autoplay": true, "loop": true, "controls": true, "title": "your video title", "artist": "your video artist" } ">

<msc-ez-video>
  <script type="application/json">
    {
      "src": "your-video-path.mp4",
      "poster": "your-video-thumbnail-path.jpg",
      "width": 16,
      "height": 9,
      "muted": true,
      "autoplay": true,
      "loop": true,
      "controls": true,
      "title": "your video title",
      "artist": "your video artist"
    }
  script>
msc-ez-video>

">

<msc-ez-video
  remoteconfig="https://617751a89c328300175f58b7.mockapi.io/api/v1/ezVideo"
  ...
>msc-ez-video>

import { MscEzVideo } from 'https://your-domain/wc-msc-ez-video.js'; //use DOM api const nodeA = document.createElement('msc-ez-video'); document.body.appendChild(nodeA); nodeA.src = 'your-video-path.mp4'; nodeA.poster = 'your-video-thumbnail-path.jpg'; // new instance with Class const nodeB = new MscEzVideo(); document.body.appendChild(nodeB); nodeB.src = 'your-video-path.mp4'; nodeB.poster = 'your-video-thumbnail-path.jpg'; // new instance with Class & default config const config = { src: 'your-video-path.mp4', poster: 'your-video-thumbnail-path.jpg', ... }; const nodeC = new MscEzVideo(config); document.body.appendChild(nodeC); ">

<script type="module">
import { MscEzVideo } from 'https://your-domain/wc-msc-ez-video.js';

//use DOM api
const nodeA = document.createElement('msc-ez-video');
document.body.appendChild(nodeA);
nodeA.src = 'your-video-path.mp4';
nodeA.poster = 'your-video-thumbnail-path.jpg';

// new instance with Class
const nodeB = new MscEzVideo();
document.body.appendChild(nodeB);
nodeB.src = 'your-video-path.mp4';
nodeB.poster = 'your-video-thumbnail-path.jpg';

// new instance with Class & default config
const config = {
  src: 'your-video-path.mp4',
  poster: 'your-video-thumbnail-path.jpg',
  ...
};
const nodeC = new MscEzVideo(config);
document.body.appendChild(nodeC);
script>

<style>
msc-ez-video {
  /* slider thumb */
  --slider-thumb-with: 14px;
  --slider-thumb-color: rgba(255,0,0,1);

  /* indicator */
  --indicator-background: rgba(255,255,255,.2);
  --indicator-buffer-start: rgba(255,255,255,.4);
  --indicator-buffer-end: rgba(255,255,255,.4);
  --indicator-duration-start: rgba(255,0,0,1);
  --indicator-duration-end: rgba(255,0,0,1);

  /* time information */  
  --time-text-size: 16px;
  --time-text-color: #fff;

  /* warning information */  
  --warning-font-size: 16px;
  --warning-color: #fff;
  --warning-text: 'Some errors occured. Please try later.';

  /* function button */
  --action-height: 36px;
  --action-icon-size: auto 65%;
  --ico-play: url(ico-play.svg);
  --ico-pause: url(ico-pause.svg);
  --ico-mute: url(ico-mute.svg);
  --ico-unmute: url(ico-unmute.svg);
  --ico-fullscreen: url(ico-fullscreen.svg);
  --ico-fullscreen-exit: url(ico-fullscreen-exit.svg);
  --ico-pip: url(ico-pip.svg);
  --ico-replay: url(ico-replay.svg);
  --ico-warning: url(ico-warning.svg);
  --ico-forward-5: url(ico-forward-5.svg);
  --ico-forward-10: url(ico-forward-10.svg);
  --ico-backward-5: url(ico-backward-5.svg);
  --ico-backward-10: url(ico-backward-10.svg);
  --ico-speed-up-rate: url(ico-speed-up-rate.svg);
  --ico-speed-down-rate: url(ico-speed-down-rate.svg);

  /* reaction */
  --reaction-width: 52px;
  --reaction-bgc-start: rgba(0,0,0,.4);
  --reaction-bgc-end: rgba(0,0,0,.4);

  /* tip */
  --tip-font-size: 12px;
  --tip-line-height: 1.8;
  --tip-color: #fff;
  --tip-background: rgba(0,0,0,.6);
  --tip-play: 'Play';
  --tip-pause: 'Pause';
  --tip-unmute: 'Unmute';
  --tip-mute: 'Mute';
  --tip-fullscreen: 'Full screen';
  --tip-fullscreen-exit: 'Exit full screen';
  --tip-PiP: 'Picture in Picture';

  /* playbackRate */
  --playbackrate-font-size: 18px;
  --playbackrate-line-height: 2;
  --playbackrate-color: #fff;
  --playbackrate-background: rgba(0,0,0,.6);
}
style>

">

<msc-ez-video
  src="your-video-path.mp4"
  ...
>msc-ez-video>

">

<msc-ez-video
  poster="your-video-thumbnail-path.mp4"
  ...
>msc-ez-video>

">

<msc-ez-video
  width="16"
  ...
>msc-ez-video>

">

<msc-ez-video
  height="9"
  ...
>msc-ez-video>

">

<msc-ez-video
  tile="your-video-title"
  ...
>msc-ez-video>

">

<msc-ez-video
  artist="your-video-artist"
  ...
>msc-ez-video>

">

<msc-ez-video
  crossorigin="use-credentials"
  ...
>msc-ez-video>

<msc-ez-video
  muted
  ...
>msc-ez-video>

<msc-ez-video
  autoplay
  muted // must set to active autoplay
  ...
>msc-ez-video>

<msc-ez-video
  loop
  ...
>msc-ez-video>

<msc-ez-video
  controls
  ...
>msc-ez-video>