msc-ez-video

Modern browsers already had a vivid player for <video />. However, web developers and designers still want to custom their own style player for different situations.

Sounds like web component will do a lot favor for this purpose. With <msc-ez-video /> support, customize control panel will become a piece of cake. <msc-ez-video /> adopts CSS custom properties, developers could style them as they want.

That's take a look what can <msc-ez-video /> do in different combination ?

（There will be only sound and picture in picture functions display when controls not set.）

Features

Tap <msc-ez-video /> to toggle play / pause.
Double click <msc-ez-video /> to turn on / off fullscreen.
Full function control panel will only display in fullscreen mode unless attribute - controls set.
Picture in picture support once browser enable.
Developers could customize control panel's appearance with CSS custom properties.

Basic Usage

<msc-ez-video /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-ez-video />'s html structure and everything will be all set.

Required Script

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

Structure

Put <msc-ez-video /> into HTML document. It will have different functions and looks with attribute mutation.

<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>

<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>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-ez-video />.

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

JavaScript Instantiation

<msc-ez-video /> could also use JavaScript to create DOM element. Here comes some examples.

<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 Customization

<msc-ez-video /> uses CSS variables to hook control panel's theme. That means developer could easy change it into the looks you like.

<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>

Attributes

<msc-ez-video /> supports some attributes to let it become more convenience & useful.

src

Set <msc-ez-video />'s video source.

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

poster

Set <msc-ez-video />'s poster.

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

width

Set <msc-ez-video />'s width ratio. Default is 16.

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

height

Set <msc-ez-video />'s height ratio. Default is 9.

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

title

Set <msc-ez-video />'s title. Default is "unknown title".

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

artist

Set <msc-ez-video />'s artist information. Default is "unknown artist".

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

crossorigin

Set <msc-ez-video />'s crossorigin. Default is "anonymous".

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

muted

Set <msc-ez-video /> mute active or not. Default is false. Note: If developers like to implement autoplay, muted must set in mobile.

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

autoplay

Set <msc-ez-video /> autoplay active or not. Default is false. Note: If developers like to implement autoplay, muted must set in mobile.

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

loop

Set <msc-ez-video />> loop active or not. Default is false. There will be a replay sign appeared when video fininshed play once loop doesn't set.

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

controls

Full function contrl panel will only display in fullscreen mode unless controls set. Default is false.

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

Keyboard shortcut

<msc-ez-video /> also comes with keyboard shortcut. I believe this will make <msc-ez-video /> more vivid & more useful.

Toggle <msc-ez-video /> play or pause.

space

Toggle <msc-ez-video /> play or pause.

Toggle <msc-ez-video /> mute or not.

Toggle <msc-ez-video /> fullscreen or not.

Toggle <msc-ez-video /> into picture in picture or not.

esc

Turn off fullscreen mode.

<msc-ez-video /> backward 5 seconds.

<msc-ez-video /> forward 5 seconds.

<msc-ez-video /> backward 10 seconds.

<msc-ez-video /> forward 10 seconds.

Decrease <msc-ez-video /> playback rate. Minimum is 0.25.

Increase <msc-ez-video /> playback rate. Minimum is 2.

0 ~ 9

<msc-ez-video /> jumps to specific timeline. Ex: 7 means to timeline 70%.

Properties

Property Name	Type	Description
src	String	Getter / Setter for <msc-ez-video />'s video source.
poster	String	Getter / Setter for <msc-ez-video />'s poster.
title	String	Getter / Setter for <msc-ez-video />'s title.
artist	String	Getter / Setter for <msc-ez-video />'s artist.
width	Number	Getter / Setter for <msc-ez-video />'s width ratio.
height	Number	Getter / Setter for <msc-ez-video />'s height ratio.
crossorigin	String	Getter / Setter for <msc-ez-video />'s s crossorigin. (It might be "`anonymous`" or "`use-credentials`").
muted	Boolean	Getter / Setter for <msc-ez-video />'s mute status.
autoplay	Boolean	Getter / Setter for <msc-ez-video />'s autoplay status.
loop	Boolean	Getter / Setter for <msc-ez-video />'s loop status.
controls	Boolean	Getter / Setter for <msc-ez-video />'s control panel status.
currentTime	Number	Getter / Setter for <msc-ez-video />'s currentTime (in seconds).
duration	Number	Getter for <msc-ez-video />'s duration (in seconds).
playbackRate	Number	Getter / Setter for <msc-ez-video />'s playback rate. Rate should between `0.25` ~ `2`.
paused	Boolean	Getter for <msc-ez-video />'s pause status.
fullscreened	Boolean	Getter for <msc-ez-video />'s full screen status.
PiPed	Boolean	Getter for <msc-ez-video />'s picture in picture status.

Mathods

Mathod Signature	Description
play	Play video.
pause	Pause video.
requestFS	Switch into full screen mode. Note: this is `high-trusted` event.
exitFS	Switch back to normal mode. Note: this is `high-trusted` event.
requestPiP	Switch into picture in picture mode. Note: this is `high-trusted` event.
exitPiP	Switch back to normal mode. Note: this is `high-trusted` event.

Events

Event Signature	Description
ez-video-play	Fired when <msc-ez-video /> played.
ez-video-pause	Fired when <msc-ez-video /> paused.
ez-video-seek	Fired when <msc-ez-video /> seeked.
ez-video-mutechange	Fired when <msc-ez-video />'s mute status changed.
ez-video-fullscreenchange	Fired when <msc-ez-video /> full screen changed.
ez-video-PiPchange	Fired when <msc-ez-video /> picture in picutre changed.
ez-video-ratechange	Fired when <msc-ez-video /> playback rate changed.
ez-video-error	Fired when <msc-ez-video /> error occured.

Reference

<msc-ez-video />

msc-ez-video

msc-ez-video

Features

Basic Usage

JavaScript Instantiation

Style Customization

Attributes

Keyboard shortcut

Properties

Mathods

Events

Reference

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

msc-ez-video

msc-ez-video

Features

Basic Usage

JavaScript Instantiation

Style Customization

Attributes

Keyboard shortcut

Properties

Mathods

Events

Reference

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads