Venom

I believe ad with interesting effect will have lots of fun when browsing. That's why I like to implement <msc-venom />

<msc-venom /> is web component based Ad effect module. It has two types for display. One is vision (image) and the other is moment (video).

Basic Usage

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

Required Script

<script async
        src="https://your-domain/pack-msc-venom.js">        
</script>

Structure

Here comes two init ways for different situations. Either way is fine, developers could pick one they like.

- Put the config inside <msc-venom> as its child. This one could be used for data has already collected. (Such as server-side prepared)

<msc-venom width="2" height="1" layout="responsive" duration="6000">
  <script type="application/json">
    {
      "type": "vision",
      "caption": "your-material-caption",
      "image": "your-material.png",
      "srcset": "your-material.png 1x,your-material.png 2x,your-material.png 3x",
      "loc": "your-material-link"
    }
  </script>
</msc-venom>

- Client triggerd. (need to prepare a web service for config fetch.)

Note: when init with this way, response data interface must follow <msc-venom />'s format.

<msc-venom
  width="2"
  height="1"
  layout="responsive"
  duration="6000"
  src="your-web-service-address"
>
</msc-venom>

Web Service response format for vision

{
  "type": "vision",
  "caption": "your-material-caption",
  "image": "your-material.png",
  "loc": "your-material-link",
  "srcset": "your-material.png 1x,your-material.png 2x,your-material.png 3x", // optional
  "width": 200, // optional
  "height": 100, // optional
  "duration": 10000, // optional (in milliseconds)
  "target": "_blank" // optional
}

Web Service response format for moment

{
  "type": "moment",
  "caption": "your-material-caption",
  "videoId": "your-material-videoId", // YouTube videoId only
  "loc": "your-material-link",
  "width": 200, // optional
  "height": 100, // optional
  "duration": 10000, // optional (in milliseconds)
  "target": "_blank" // optional
}

Style Customization

<msc-venom> uses CSS variables to style its interface. That means developer could easy change them into the lookup you like.

<style>
msc-venom {
  --ico-close: url("icon-for-close");
  --ico-volume: url("icon-for-volume");
}
</style>

Attributes

<msc-venom> supports some attribute to let it become more convenience & useful.

Layout: responsive

Element sized to the width of its container element and resizes its height automatically to the aspect ratio given by width and height attributes.

<msc-venom
  layout="responsive"
  width="200"
  height="100"
  src="your-web-service-address"
/>

Layout: fixed

Element has a fixed width and height with no responsiveness supported. (unit: px)

<msc-venom
  layout="fixed"
  width="100"
  height="200"
  src="your-web-service-address"
/>

Type: vision

Use image as its material. It will curtain-call automatically when run out duration.

<msc-venom type="vision" width="2" height="1" layout="responsive" duration="6000">
  <script type="application/json">
    {
      "caption": "your-material-caption",
      "image": "your-material.png",
      "srcset": "your-material.png 1x,your-material.png 2x,your-material.png 3x",
      "loc": "your-material-link"
    }
  </script>
</msc-venom>

Type: moment

Use YouTube video as its material. Developers could set duration to force vistors watch the video. (Close button will display only run out duration.)

<msc-venom type="moment" width="2" height="1" layout="responsive" duration="6000">
  <script type="application/json">
    {
      "caption": "your-material-caption",
      "videoId": "your-material-videoId",
      "loc": "your-material-link"
    }
  </script>
</msc-venom>

Duration

Developers could set duration for curtain-call (vision) or force visitors watch video (moment). Default is 6000.
- Note: duration's value in milliseconds

<msc-venom
  layout="responsive"
  width="200"
  height="100"
  src="your-web-service-address"
  duration="6000"
/>

Layouts

Properties

Event