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

autoplay、muted and loop

muted and loop

muted and control panel

unmuted

unmuted and control panel

Features

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>

Or

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

k :

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

space :

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

m :

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

f :

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

i :

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.

j :

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

l :

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

< :

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

> :

Increase <msc-ez-video /> playback rate. Maximum 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 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