Portable Video

Video - the most popular content in web page. Visitors always attracted with vivid contents. That's why editor like to place video contents in web page.

We could see these video modules fixed in web page corner easily, such as YouTube. It's a very common effect nowadays. But what if visitors could place video module where they want. Or adjust video size for more smooth browsing they like.

That's the main purpose why I design <msc-portable-video /> this web component. With a few setting and everything will be all set. Let's take a look what can <msc-portable-video /> do ?

Show Clear

Basic Usage

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

Required Script

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

Structure

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

<msc-portable-video> <script type="application/json"> { "safearea": 20, "sensor": 26, "cooltime": 0, "embed": "https://www.youtube.com/embed/Ff7k1zxBe1I?autoplay=1&playsinline=1", "align": { // optional "width": 253.125, "height": 450, "corner": "bottom-left" // top-left, top-right, bottom-right, bottom-left }, "allow": "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", // optional, set Feature Policy "calltoaction": { "link": "https://www.youtube.com/watch?v=Ff7k1zxBe1I", "content": "VISIT" } } </script> </msc-portable-video>

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

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

JavaScript Instantiation

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

<script type="module"> import { MscPortableVideo } from 'https://your-domain/wc-msc-portable-video.js'; //use DOM api const nodeA = document.createElement('msc-portable-video'); document.body.appendChild(nodeA); nodeA.embed = 'https://embed-domain/embed-video-url.html'; nodeA.calltoaction = { ... }; // new instance with Class const nodeB = new MscPortableVideo(); document.body.appendChild(nodeB); nodeA.embed = 'https://embed-domain/embed-video-url.html'; nodeA.calltoaction = { ... }; // new instance with Class & default config const config = { "safearea": 20, "sensor": 26, "cooltime": 0, "embed": "https://www.youtube.com/embed/Ff7k1zxBe1I?autoplay=1&playsinline=1", "align": { "width": 253.125, "height": 450, "corner": "bottom-left" }, "allow": "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", "calltoaction": { "link": "https://www.youtube.com/watch?v=Ff7k1zxBe1I", "content": "VISIT" } }; const nodeC = new MscPortableVideo(config); document.body.appendChild(nodeC); </script>

Style Customization

<msc-portable-video /> uses CSS variables to hook uploader trigger theme & drop zone. That means developer could easy change it into the looks you like.

<style> msc-portable-video { --msc-portable-video-theme: #fff; --msc-portable-video-shadow: rgba(0,0,0,.65); --msc-portable-video-border-radius: 26px; --msc-portable-video-btn-close-bg: url(data:image/svg+xml;base64,...) rgba(0,0,0,.5) no-repeat 50% 50%/auto 60%; } </style>

Attributes

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

embed

Set embed for different embed url.

<msc-portable-video embed="https://www.youtube.com/embed/Ff7k1zxBe1I?autoplay=0&playsinline=1" ... ></msc-portable-video>

safearea

Set safearea size (px) for viewport gap. Value should higher or equal 0. Default is 20.

<msc-portable-video safearea="20" ... ></msc-portable-video>

sensor

Set sensor size (px) for resize action area. Value should higher or equal 1. Default is 26.

<msc-portable-video sensor="26" ... ></msc-portable-video>

cooltime

Set cooltime (second) for <msc-portable-video /> display or not. Once setted and user tap "close" button, <msc-portable-video /> won't render until exceed cooltime's value. Value should higher or equal 0. Default is 0.

<msc-portable-video cooltime="0" ... ></msc-portable-video>

calltoaction

Set "call to action" data. This should be JSON string and must contains "link"、"content" for rendering. This attribute is optional.

<msc-portable-video calltoaction='{"link":"?","content":"VISIT"}' ... ></msc-portable-video>

Properties

Property Name Type Description
embed String Getter / Setter for embed.
safearea Number Getter / Setter for safearea size.
sensor Number Getter / Setter for sensor size.
cooltime Number Getter / Setter for cooltime.
calltoaction Object Getter / Setter for "call to action" data. Object must contains "link"、"content"

Methods

Method Name Parameter Type Description
align Object Set width / height / corner for <msc-portable-video /> rendering. Be careful corner only accpets "top-left"、"top-right"、"bottom-right"、"bottom-left" these four values.
close N/A Turn off <msc-portable-video />

Event

Event Signature Description
msc-portable-video-cta-click Fired when <msc-portable-video /> "call to action" clicked. Developers could get original click event from event.detail.baseEvent to do preventDefault behavior.
msc-portable-video-close Fired when <msc-portable-video /> closed.
msc-portable-video-drag Fired when <msc-portable-video /> dragging.
msc-portable-video-resize Fired when <msc-portable-video /> resizing. Developers could gather extra information x、y、width、height、type from event.detail.

Reference